关于前端模块化 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.jsdefine(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模块（服务器&浏览器端通用）

具体使用参考

静态加载，编译时确定依赖关系

模块输出为值得引用，CommonJS是值得拷贝

自动运行于严格模式之下

export关键字导出

import关键字导入

同步、异步加载均可