前端模块化CommonJS&ES6

模块化的开发方式能够提升代码复用性，方便进行代码管理。一般一个文件就是一个模块，有本身的做用域，只对外暴露特定的变量和函数。目前比较流行的js模块化规范有commonJS、AMD、CMD以及ES6的模块系统。

1、CommonJS（同步加载模块）

容许模块经过require方法来同步加载所要依赖的其余模块，而后经过exports或者module.exports来导出须要暴露的接口。

使用方式：

//导入
require('module');
require('../app.js');
//导出
exports.getInfo=function(){};
module.exports=someValue;

CommonJS必须在node环境下才能使用，而浏览器是不支持CommonJS的，必须使用一些转换工具，将咱们服务器端的CommonJS语法转化为浏览器识别的语句。

 

2、AMD

Common为服务器端而生，采用同步加载的方式，所以不适用浏览器。

AMD规范则是异步加载模块，容许指定回调函数，等模块异步加载完成后便可调用回调函数。

AMD的核心思想是经过define来定义一个模块，而后使用require来加载模块。

使用方式：

//Math.js
define([], function(){
    return {
        'add': function(a, b) {
            return a + b;
        }
    }
})
//main.js
require.config({
    paths : {
        "math" : "Math"
    }
});
require(['math'], function (math) {
    console.log(math.add(2, 3));
});
console.log('done');
//done
//5

 

3、CMD

CMD跟AMD的主要区别在于:

（1）对于以来的模块，AMD是提早执行，提早加载依赖，CMD是延迟执行；

（2）AMD推崇依赖前置，而CMD推崇依赖就近，按需加载。

 

4、ES6

ES6自带模块化，能够使用import关键字引入模块，经过export关键字导出模块，但因为ES6目前没法在浏览器中执行，因此只能经过babel将不被支持的import编译成当前受到普遍支持的require。

 

ES6和CommonJS模块的差别

（1）CommonJS模块输出的是一个值的拷贝，ES6模块输出的是值得引用；

　　　CommonJS对于基本数据类型，属于复制，同时在另外一个模块能够对该模块输出的变量从新复制；

　　　　　　　　对于复杂数据类型，属于浅拷贝，因为两个模块引用的对象指向同一内存空间，所以对该模块的值作修改会影响另外一个模块；

　　　ES6模块中的值属于【动态只读引用】

1. 对于只读来讲，即不容许修改引入变量的值，import的变量是只读的，不管是基本数据类型仍是复杂数据类型。当模块遇到import命令时，就会生成一个只读引用。等到脚本真正执行时，再根据这个只读引用，到被加载的那个模块里面去取值。
2. 对于动态来讲，原始值发生变化，import加载的值也会发生变化。不管是基本数据类型仍是复杂数据类型。

（2）CommonJS模块是在运行时加载，而ES6模块是在编译时输出接口。由于CommonJS加载的是一个对象（module.exports属性），该对象只有在脚本运行完才会生成；而ES6模块不是一个对象，他的对外接口只是一种静态定义，在代码静态解析阶段就会生成。