模块化初探

1. 为什么要使用模块化？

随着互联网技术的发展，网页的JavaScript代码越来越庞大，越来越复杂，复杂的网页通常需要团队分工合作、进度管理等，开发者迫切需要能隔离、组织庞大的JavaScript代码的功能，也就是这里所说的模块化。
一个模块就是一个实现特定功能的文件，有了模块，我们就可以更方便地使用别人的代码，想要什么功能，就加载什么模块。同时还解决了命名冲突，变量污染等问题。
模块化开发规范在前端先驱们的探索中一步步形成。从最开始的函数封装 --->对象-->立即执行函数，到后来的CommonJS、AMD、CMD。

2. CommonJS、AMD、CMD

• CommonJS规范

CommonJS是服务器端模块的规范，Node.js采用了这个规范。Node.JS首先采用了js模块化的概念。它的主要内容：

1. 定义模块 根据CommonJS规范，一个单独的文件就是一个模块。每一个模块都是一个单独的作用域，也就是说，在该模块内部定义的变量，无法被其他模块读取，除非定义为global对象的属性

2. 模块输出： 模块只有一个出口，module.exports对象，我们需要把模块希望输出的内容放入该对象

3. 加载模块： 加载模块使用require方法，该方法读取一个文件并执行，返回文件内部的module.exports对象
   范例

    //模块定义 myModel.js
     var name = 'Byron';
     function printName(){
       console.log(name);
     }
     module.exports = {
       printName: printName,
     }
   
     //加载模块
     var nameModule = require('./myModel.js');
     nameModule.printName();
   

CommonJS的局限：由于require是同步的，模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。这在服务器端可以很好的执行，因为模块都放在本地硬盘，直接读取就行了。但CommonJS却不适合浏览器环境，比如：

       var math = require('math');
       math.add(2, 3);

后面的代码执行依赖于前面加载的模块math，浏览器加载是异步的，如果加载时间很长，后面的代码也无法执行，会一直卡在那里。为了解决这个问题，诞生了AMD和CMD规范。

• AMD

AMD 即Asynchronous Module Definition，中文名是异步模块定义的意思。语法：

1. 用define来定义模块。
   define(id?, dependencies?, factory);
   • id：可选参数，用来定义模块的标识，如果没有提供该参数，脚本文件名（去掉拓展名）
   • dependencies：是一个当前模块依赖的模块名称数组
   • factory：工厂方法，模块初始化要执行的函数或对象。如果为函数，它应该只被执行一次。如果是对象，此对象应该为模块的输出值
2. 用require来加载模块。
   require([dependencies], function(){});
   require()函数接受两个参数：
   • 第一个参数是一个数组，表示所依赖的模块
   • 第二个参数是一个回调函数，当前面指定的模块都加载成功后，它将被调用。加载的模块会以参数形式传入该函数，从而在回调函数内部就可以使用这些模块
     require()函数在加载依赖的函数的时候是异步加载的，这样浏览器不会失去响应，它指定的回调函数，只有前面的模块都加载成功后，才会运行，解决了依赖性的问题。

• CMD

CMD（[Common Module Definition] 模块定义规范。在 CMD 规范中，一个模块就是一个文件。代码的书写格式如下：
define(function(require, exports, module) {
// 模块代码
});
require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口；exports 是一个对象，用来向外提供模块接口；module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

AMD和CMD的区别：

1. AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
   CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

2. AMD:提前执行（异步加载：依赖先执行）+延迟执行。
   CMD:延迟执行（运行到需加载，根据顺序执行）。
   CMD 推崇依赖就近，AMD 推崇依赖前置。

    // CMD
    define(function(require, exports, module) {
    var a = require('./a')
    a.doSomething()
    // 此处略去 100 行
    var b = require('./b') // 依赖可以就近书写
    b.doSomething()
    // ... 
    })
   
    // AMD 默认推荐的是
    define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
    a.doSomething()
    // 此处略去 100 行
    b.doSomething()
    ...
    })