JS模块化

这是一个关于JS模块化的扫盲贴。

列举一下我们会遇到的一些概念：

AMD,CMD,CommonJs,同步加载，异步加载，module.exports,ES6模块，require,define

我们的任务就是消除这些盲点。

CommonJs是同步加载的，所以适用于服务端node。

const moment = require('moment');
new moment();

在一个项目中，模块加载一次后就会被缓存，所以完全不用担心一个模块被多个模块引用而导致重复加载模块。

CMD和AMD是浏览器端的规范，因为他们都是异步的。

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

对于依赖的模块，AMD 是提前执行，CMD 是延迟执行

CMD 推崇 as lazy as possible.
CMD 推崇依赖就近，AMD 推崇依赖前置。

CMD

导出

define(function(require, exports) {
  exports.each = function (arr) {
    // 实现代码
  };

  exports.log = function (str) {
    // 实现代码
  };
});

导入

define(function(require, exports) {
  var util = require('./util.js');

  exports.init = function() {
    // 实现代码
  };
});

AMD

定义入口文件

<script src="js/require.js" data-main="js/main"></script>

require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
　　　　// some code here
});

require.js假定这三个模块与main.js在同一个目录，文件名分别为jquery.js，underscore.js和backbone.js，然后自动加载。

使用require.config()方法，我们可以对模块的加载行为进行自定义。require.config()就写在主模块（main.js）的头部。参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。

require.config({
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"underscore": "underscore.min",
　　　　　　"backbone": "backbone.min"
　　　　}
　　});

模块导出

define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

模块导入

// main.js
　　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});

ES6在语法层面上实现了模块。使用的是 export和import关键字。上面的这些模块polyfill都将成为历史了。