JavaScript模块化开发

1：发展历史

早期的 Javascript 是作为浏览器的脚本语言，使用 <script> 标签直接引入，没有所谓的模块化。也就是说如果我们需要一个 js 文件，我们就加一个 <script> 标签，把需要的 js 引入进来。这种方式的特点在于：简单粗暴。

但是当项目越来越大，依赖越来越多时可能就会出现问题，比如逻辑越来越混乱，页面也越复杂，然后可维护性就变差了，除此之外还存在全局变量暴露、文件的引入顺序的问题。比如说一个文件引入另一个文件，另一个文件又依赖另一个文件，那么这三个加载数据就会很重要，如果第一个没有加载完，那么接下来就会出错。

实际上，在 JavaScript 的发展历史上，第一个真正模块化的是 nodejs，nodejs 就是使用了我们其中的一个模块化标准的规范，它就是 common js。

有了这个模块化的概念后，便有了 node，node 的文件管理都是基于模块化的；我们可以从另一个角度来看，如果 JavaScript 想要进军服务端，在服务端没有模块化这是一个灾难，因此 common js 社区制定了一个 commonjs 规范，也就是模块化的规范；有了这个规范之后，node 就出现了。

JavaScript 引入模块化解决了哪些问题：

• 避免了全局污染
• 模块复用，提高了开发效率和协作
• 模块功能单一职能方便维护
• 解决了文件依赖顺序

模块化的标准（有三个）：

• CommonJs
• AMD – 异步模块
• CMD – 通用模块

2：CommonJs(CommonJS 社区贡献)

定义了哪些规范：

• 定义了模块标识规范，也就是说这个模块这个文件怎么命名

    var basic = 1;
    var increase = function(value){return value + basic;}
    module.exports.increase = increase;

• 定义了一个全局的 require，require 是引用模块，我们可以传入模块标识符来引入其他模块，解决了模块之间的相互引用。引入其他模块我们引入的是另外的模块导出的内容，或者叫做暴露的 API。定义 require 的同时，也定义了一个 exports 导出模块。

    var myModule = require('./myModule.js');
    console.log(myModule.increase(1));

• 模块嵌套，依次加载引用模块
• 通过 exports 暴露 API

Common.js 解决了模块依赖但是没有解决顺序。

3：AMD(Asynchronous Module Definition)

AMD 又叫做异步加载模块，它做的主要的事情是在加载模块的时候允许传入另外一个回调，在加载完之后，就会执行这个回调，只有在回调里面，我们就能保证需要加载的文件已经加载完成了。

AMD 使用 define 关键字定义模块，define 接收三个参数：id,dependencies,factory；第一个参数是 id，或者是模块的名字，第二个参数是模块的依赖，这个依赖是一个数组 [‘module1′,’module2’]，第三个参数是工厂，也就是模块的逻辑，我们的回调函数。

• 定义模块

    define(['increase', 'reduce'], function(increase, reduce) {return function(value) {return increase(value) + reduce(value);
        }
    });

• 引入模块

    require.config({
        baseUrl: "./js",
        paths: {"myModule": "myModule.js"}
    });
    require(['myModule'], (myModule) => console.log(myModule(1)));

AMD 解决了浏览器端异步的依赖问题。

4：CMD(Common Module Definition)

CMD 是由一个阿里巴巴的前端工程师提出的一个概念，开源出的一个代码叫 sea.js。
AMD 叫 require.js，CMD 叫 sea.js。CMD 解决了按需加载，它不像 AMD 一样在引入第一次时就全部加载完成。
CMD 有一个标准，一个文件只能有一个模块。

定义模块

define(function(require,exports,module) {var increase = require('increase');
    var reduce = require('./reduce');
    module.exports = function(value){return increase(value) + reduce(value);
    }
});

引入模块

seajs.use('./myModule',function(myModule){console.log(myModule(1));
})