关于前端模块化 CommonJS、AMD、CMD、ES6中模块加载

写在前面

ES6以前，Javascript并无模块体系。可是实际开发中，为了更高效的开发，咱们须要模块化编程开发，也就产生了几类模块化标准。

CommonJS（服务器端）

• 一个文件就是一个模块，每一个模块都是单独的做用域，除非定义为global对象的属性
• 输出模块module.exports对象
• 加载模块使用require方法
• 同步读取模块，适合nodejs，因为网络的缘由，并不适合浏览器端（异步加载）

异步加载模块（浏览器端）

面对的问题

• 多个文件的依赖关系，被依赖的文件须要在依赖他的文件以前加载到浏览器
• js加载时，浏览器会中止页面的渲染，加载的文件越多，页面失去相应的时间越长

AMD（异步模块定义）+ Require.js

其原理是异步加载模块，模块的加载不影响其后面语句的运行。全部以来这个模块的语句都会添加进一个回调函数中，等到模块加载完成，回调函数就会执行。

require([modlue], callback)读取模块

require.config配置别名，使用栗子：

//别名配置
requirejs.config({
    paths: {
        jquery: 'jquery.min' //能够省略.js
    }
});
//引入模块，用变量$表示jquery模块
requirejs(['jquery'], function ($) {
    $('body').css('background-color','red');
});
复制代码

define(id?, dependencies?, factory)定义模块

• id：模块名
• dependencies：当前模块依赖的模块
• factory：工厂方法，通常直接返回一个对象

define('math',['jquery'], function ($) {//引入jQuery模块
    return {
        add: function(x,y){
            return x + y;
        }
    };
});
复制代码

CMD（通用模块定义）+ SeaJS

CMD和AMD解决的问题同样，不过是模块定义方式、模块加载的时机不一样

seajs示例：

// 定义模块 myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
  exports.data = 1;
});

// 加载模块
seajs.use(['myModule.js'], function(my){
    var star= my.data;
    console.log(star);  //1
});
复制代码

CMD & AMD间的区别

• AMD依赖前置，在定义模块时就声明其所要依赖的模块
• CMD是按需加载依赖，在用到那个模块再去require
• AMD在使用前就准备好，CMD是用到了再去准备模块

ES6模块（服务器&浏览器端通用）

具体使用参考潜入理解ES６－模块化

• 静态加载，编译时肯定依赖关系
• 模块输出为值得引用，CommonJS是值得拷贝
• 自动运行于严格模式之下
• export关键字导出
• import关键字导入
• 同步、异步加载都可