如何理解前端模块化开发，并如何着手学习模块化开发？
看一下这个，说的是这块内容 望采纳
/article/6911
你还没有登录，请先登录或注册慕课网帐号
58696人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2您的位置： >>
　　模块化概念
　　模块化就是为了减少循环依赖，减少耦合，提高设计的效率。为了做到这一点，我们需要有一个设计规则，所有的模块都在这个规则下进行设计。良好的设计规则，会把耦合密集的设计参数进行归类作为一个模块，并以此划分工作任务。而模块之间彼此通过一个固定的接口（所谓的可见参数）进行交互，除此之外的内部实现（所谓的隐参数）则由模块的开发团队进行自由发挥。
　　程序模块化的目的：
减少循环依赖
提高设计效率
　　程序模块化的实施：
把耦合密集的归为一个模块
模块间通过固定的接口交互
模块内部实现自由发挥
　　HTML CSS Images的模块化设计
　　页面模块化的实施，这里指的是针对除去JavaScript部分的页面代码进行模块化实施。通过html css 图片进行模块化。
　　页面模块化的实施思路是高度耦合的页面片段封装，模块布局作为公开接口，高度耦合的页面进行封装，使用独立的css文件，高度耦合的图片进行封装，给某类相关性强的图片建立文件夹。
　　页面模块化的目的是，实现多人协同开发页面，提高页面研发速度和降低维护难度。研发速度的提升体现在多人协同并行开发， 维护难度体现在减少版本的混乱，根据模块区分版本降低版本间代码冲突和文件错误覆盖。&
　　拆分页面模块，从小到大的分解
　　1. 拆分页面模块
　　一个页面有很多个小单元模块组成，他来自有原始需求文档，比如logo，导航，内容1，内容2，内容3，内容4，尾部导 航，版权信息等等。根据他们就可以拆分出基本的模块。
　　2. 拆分网站模块
　　将整个网站安排频道或者分类进行拆分，比如首页，内容页，文字列表页，图片列表页，频道1页面，频道2页面，分类1页面，分类2页面，后台管理页面，等等。
　　3. 每个网站作为一个模块。比如商城站，支付站，论坛，三个站独立为三个大模块。
　　模块化实现
　　1. 高度耦合提取为一个模块，用模块代码作用域进行控制
　　代码1. 非继承模块，通过后代选择符方式控制作用域
&div class="mod"&&h3 class="title"&title&/h3&&div class="con"&
&a class="more"&more&/a&&/div&
.mod {}.mod .title {}.mod .con {}.mod .more {}
&div class="footer"&&ul&&li&&a href="" title=""&关于&/a&&/li&&li&&a href="" title=""&合作&/a&&/li&&li&&a href="" title=""&招聘&/a&&/li&&/ul&Copyright & 2009 某公司 版权所有&/div&
.footer {}.footer ul {}.footer p {}
　　代码2. 继承模块，提取众多模块中公共部分，具体模块通过优先级进行处理。继承模块方面整站某些模块的批量修改处理，也提高复用性，降低代码重复。
.mod {}.mod .title {}.mod .con {}.mod .more {}.note {}.note .title {}.note .con {}.note .more {}
&div class="mod note"&&h3 class="title"&title&/h3&&div class="con"&
&a class="more"&more&/a&&/div&
　　2. 页面模块
　　页面模块代码作用域的控制通过css文件来控制。某类具有高度耦合的页面使用自身的css文件。
　　3. 模块间的公开接口
　　上面是模块的封装，公开的接口在页面中表现为什么？
　　首先是reset，base，可继承模块，这些代码是开放接口，必须根据这些代码进行页面代码开发，也就是你的页面代码必须在以上代码基础上开发。
　　其次是css文件，css文件名称和它作用于那些页面。
　　再次是布局、模块class，id命名，模块在页面的哪个位置。在CSS中的表现就是定位，布局，和部分盒模型。float、position、 width、height等等。布局通常使用css作为接口实现，如果布局具有高度的逻辑性，完全可以通过html和css组合进行，比如960 Grid System，或者采用YUI grid.css。模块class和id的命名用于区分模块，不能在一个页面的所有css中出现不同模块同用一个class和id名。
　　规划整站模块
　　上文提到的基本的原理，真正实施起来还是存在很多问题，模块粒度问题，公共模块与普通模块的区分，继承模块是否值得继承等等，页面模块如何划分。
　　首先，了解你的项目，通过画网站树状图了解你网站的总体结构和页面模块。
　　其次，理清结构逻辑和视觉逻辑，结构逻辑就是看你的页面由那些模块组成，视觉逻辑了解可继承模块，布局逻辑（网格布局或者非网格布局）
　　附图：
Web前端热门文章
Web前端最新文章1382人阅读
Web前端工程化（3）
Javascript（30）
前段模块化基础
前端模块化其实就是将一个完整的单一的功能整合起来形成单独的一个功能组件，当需要用的的时候只需要加载这个组件，然后便可以通过该组件唯一的名称去使用其中的内容。
主流模块化框架
commonJS模块化
定义模块：即一个单独的文件就是一个模块，切该文件中的作用域独立，当中的变量是无法被其他文件引用的，如果要使用需要将其定义为global；
输出模块：模块只有一个出口，即使用module.exports对象，将需要输出的内容放入到该对象中；
加载模块：通过require加载，例如：var module = require('./moduleFile.js');该module的值即对应文件内部的module.exports对象， 然后就可以通过module名称去引用模块中的变量和函数了；
// 定义模块 module.js
var data = "hello commonJS !";
function test1() {
alert("hello test1 !");
function test2() {
alert("hello test2 !");
// 输出模块
module.exports = {
test1: test1,
test2: test2
// 加载模块
var module = require('./module.js');
// 使用模块功能
module.test1(); // "hello test1 !"
module.test2(); // "hello test2 !"
总共四个步骤： 定义 -& 输出 -& 加载 -& 使用
PS: commonJS是基于服务器端开发的，由于require是同步加载，所以当在浏览器中是无法运行的，所以就有了下面的异步模块的出现。
AMD(Asynchronous Module Definition)，异步模块定义
AMD是一套基于浏览器端模块化开发的规范，在进行页面开发时需要用到该规范的库函数，即：requireJS
requireJS解决了两个问题
多文件依赖关系处理，被依赖的需要早一步被加载；
加载js时候页面会停止渲染，如果加载的文件越多，页面失去响应的时间就会越长；
['dependModule', '...', ...],
function () {
var data = "hello AMD !";
function test1() {
alert("hello test1 !);
function test2() {
alert("hello test2 !);
test1: test1,
test2: test2
require(['module'], function (myModule) {
myModule.test1();
myModule.test2();
1. 模块定义：使用全局函数`define(id, dependencies, factory);`
1. id: 用来定义模块标识，非必选参数，如果没提供该参数则会默认使用脚本文件名（不带扩展名的）；
2. dependencies：是表示该模块所依赖的模块名称数组；
3. factory：如果是函数则为该模块初始化所执行的函数，如果是对象则为该模块的输出值。
4. 模块加载：使用**异步的**`require(dependencies, function (myModule) {});`函数
1. `dependencies`: 模块依赖的模块数组；
2. 回调函数：模块加载完成后执行的函数，加载的模块将以参数形式传入该函数，即：myModule，供使用。
CMD(Common Module Definition)通用模块定义
就近依赖，需要时再进行加载，所以执行顺序和书写顺序一致；这点与AMD不同，AMD是在使用模块之前将依赖模块全部加载完成，但由于网络等其他因素可能导致依赖模块下载先后顺序不一致这就导致了，执行顺序可能跟书写顺序不一致的情况。
define(function (require, exports, module) {
var module1 = require('./module1.js');
module1.test1();
seajs.use(['module.js'], function (myModule) {
ES6模块化，未来标准，但目前未广泛使用
类似commonJS，语法更简洁；
类似AMD，直接支持异步加载和配置模块加载；
结构可以做静态分析，静态检测；
比commonJS更好的支持循环依赖；
命名式导出方式：每个模块可以有多个
定义式导出方式：每个模块只有一个
ES6命名式导出方式
一个模块通过export声明来导出多个，需要导出的变量或函数只需要在声明最前面加上export关键词即可，然后在需要用的地方使用import导入。这些导出主要根据变量和函数名字来区分，故称之为命名式导出方式。
// module.js
export const PI = 3.1415926;
export function double( r ) {
return 2 *
export function sum( x, y ) {
return x +
// 在main.js中使用
import { PI, double, sum } from 'module';
console.log(PI); // 3.1415926
console.log(double(10)); // 20
console.log(sum(10, 8)); // 18
// 使用属性命名来使用模块
import { PI, double, sum } as myModule from 'module';
// 这样就可以通过 myModule.double(10);语法去调用模块内变量或函数了
console.log( myModule.PI ); // 3.1415926
console.log( myModule.double(10) ); // 20
console.log( myModule.sum(10, 8) ); // 18
上面是ES6标准方式，下面是commonJS形式
// module.js
var pi = 3.1415926;
function double( r ) {}
function sum( a, b ) {}
module.exports = {
double: double,
// main.js
var module = require('./module.js');
console.log( module.pi );
module.double(10);
module.sum(10, 8);
从上述代码中可知命名式导出方式的使用步骤
1. 在模块文件中使用export关键字将指定的变量或函数导出；
2. 然后在需要使用模块内函数或变量的地方使用import从该模块文件中导入这些变量或函数；
ES6定义式导出方式
概念：定义式导出理解上就是一个文件一个模块，一个模块一个功能，不像命名式一样可以一个文件可以导出多个变量或函数(事实上命名式和定义式可以结合使用，看下面例子)。
定义方式：
单函数定义：
export default function () {
import myFunc from 'myFunc';
export default class () {
var myclass = new MyClass();
命名式 + 定义式相结合使用
命名式和定义式结合使用：
export default function () ;
export function test() ;
from 'module';
import module from 'module';
import default from 'module';
from 'module';
三种方式最终结果是一样的，根据不同需求和习惯选择。
ES6导入和导出
ES6提供的几种导入方式
import default from 'module';
import { name1, name2 } from 'module';
import defualt, { name1, name2 } from 'module';
import { name1 as rename1, name2 } from 'module';
import * as moduleName from 'module';
import 'module';
ES6提供的几种导出方式
export var v1 = 10;
export let v2 = 11;
export const v3 = 12;
export function f1() {}
export class MyClass {}
export default 123;
export default function (x) { return }
export default x =&
export default class {
constructor(x, y) {
export { v1, v2, v3 };
export { v1 as vv1, v2 as vv2, v3 };
export { v1, v2 } from 'otherModule';
export { v1 as vv1, v2 } from 'otherModule';
ES6模块元数据，通过this module访问当前模块数据的方式
import { oData } from this module;
console.log( oData );
import * as currModule from this module;
console.log( currModule.oData );
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：40074次
排名：千里之外
原创：41篇
评论：14条
(2)(3)(3)(8)(5)(2)(2)(5)(3)(11)2013年10月 Web 开发大版内专家分月排行榜第三
2013年9月 其他开发语言大版内专家分月排行榜第二2013年8月 其他开发语言大版内专家分月排行榜第二2013年7月 其他开发语言大版内专家分月排行榜第二2011年4月 PHP大版内专家分月排行榜第二
2013年10月 PHP大版内专家分月排行榜第三2013年5月 PHP大版内专家分月排行榜第三2013年4月 其他开发语言大版内专家分月排行榜第三2013年4月 PHP大版内专家分月排行榜第三2013年3月 其他开发语言大版内专家分月排行榜第三2011年5月 PHP大版内专家分月排行榜第三
本帖子已过去太久远了，不再提供回复功能。