web前端模块化开发

定义与由来

定义

模块就是实现特定功能的相互独立的一组方法。

由来背景

随着网站逐渐的开发，嵌入网页的js代码越来越庞大，而网页也越来越像桌面程序，需要一个团队去分工协作，进行管理和测试等等。为了更好的管理网页的业务逻辑，也就产生了模块化编程的理念。

为了让开发者方便地加载各种模块，因此需要一套编写模块的规范，而且目前通行的JavaScript的模块规范有两种：CommonJS 和AMD。另外，在模块化开发问题上，一方面以AMD/CMD为代表的规范在过去几年时间及大地提升了前端生产力。另一方面，随着ES6，Web Components的临近，开发者们面临着承前启后的巨大挑战。。。。这也给前端小伙伴带来了新一轮知识学习挑战。。。。呵呵，深入学习吧，且行且珍惜

模块加载器的作用

模块加载器主要是为了解决两个问题：

1. 实现js的异步加载，避免网页失去响应；
2. 管理模块之间的依赖性，便于代码的维护和编写

模块化的核心价值

代码复用；提升维护性也即是：公共模块通常用于促进代码复用；业务模块通常用于提升可维护性
在前端项目中经常使用的如JQuery，underscore.js等库，其实可以看做是公共模块，他们对常用的、工具性的代码提供了抽象。

CommonJS规范

模块化开发对服务器端开发是必须的，nodejs的模块系统就是参照CommonJS规范实现的。因此，可以理解为CommonJS即为服务器端模块的规范。根据CommonJS的规范，一个单独的文件就是一个模块，加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。另外，CommonJS规范加载模块是同步的，只有加载完成，才能执行。由于Node.js主要用于服务器端编程，模块文件一般都已经存在本地硬盘，所以加载起来比较快，不用考虑非同步加载方式，所以CommonJS规范比较适合。但是，如果是浏览器环境，要从服务器端加载模块，这时就需要采用非同步模式，因此，浏览器段一般都是采用AMD/CMD规范。

commonJS期望用其API写出的应用可以具备跨宿主环境执行的能力，这样不仅可以利用js开发富客户端应用，而且还可以编写以下应用：

1. 服务器端js应用程序
2. 命令行工具
3. 桌面图形界面应用程序
4. 混合应用（Titanium 和 Adobe AIR等形式的应用）
   commonJS规范涵盖了模块、二进制、Buffer、字符集编码、I/O流、进程环境、文件系统、套接字、单元测试、Web服务器网关接口、包管理等

AMD规范

AMD即能在客户端环境，并且能兼容服务器端模块的一种模块规范。

AMD规范使用define定义模块，例子如下：

define(['package/lib'],funciton(lib){
    funciton foo (){
        lib.log("hehe");
    }
    return {
        foo : foo
    };
});

define的第一个参数表示依赖的模块数组，第二个为加载完依赖的模块数组后，模块执行函数

---

AMD模块加载定义，require方法

与CommonJS一样，AMD也采用require()语句加载模块，但是不同的是有两个参数：require([module],callback);

第一个参数[module]是一个数组，其成员就是要加载的模块；

第二个参数callback,则是加载成功后的回调函数。

require(['package/moduleA'],funciton(moduleA){
    moduleA.add(3,4);
});

moduleA.add()与moduleA模块加载不是同步的，十分适合浏览器的环境.引入AMD规范的js库实现目前主要有两个：require.js 和curl.js

requireJS 与SeaJS

(来自玉伯的blog：)

相同之处

两者都是模块加载器，倡导模块化开发理念，核心价值都是让JavaScript的模块化开发变得简单自然。

不同之处

1. **定位有差异，**RequireJS想成为浏览器段的模块加载器，同时也形成为Rhino/node等环境的模块加载器；SeaJS则专注于web浏览器端，同时通过Node扩展的方式可以很方便地跑在Node环境中。
2. 遵循的规范不同，RequireJS遵循AMD（异步模块定义）规范，seaJS遵循CMD（通用模块定义）规范。规范的不同，导致了两者API不同。SeaJS更贴近 CommonJS Modules/1.1 和Node Modules规范。
3. 推广理念有差异，RequireJS在尝试让第三方库修改自身支持RequireJS，目前只有少数社区采纳。SeaJS不强推，采用自主封装的范式来“海纳百川”，目前已有成熟的封装策略。
4. 对开发调试的支持有差异，SeaJS非常关注代码的开发调试，有nocache、debug等用于调试的插件。RequireJS无这方面的明显支持。
5. 插件机制不同，RequireJS采取的是在源码中预留接口的形式，插件类型比较单一。SeaJS采取的是通用事件机制，插件类型更丰富。