前端模块化 CommonJS AMD CMD ES6
模块化开始现在已经很流行了，方便代码的管理，通常一个文件就是一个模块，有自己的作用域，只是向外暴露特定的变量或者函数
目前流行的js模块化规范就有 CommonJS AMD CMD ES6 模块系统，这个总结 是看别人的原始出处在 掘金APP 上；
一： CommonJS
Node.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module exports require global
用module.exprots定义当前模块对外输出的借口 用require加载模块
定义math.js文件
var basicNum = 0;
function add(a,b){
return a+b;
};
module.exports = {add:add,basicNum:basicNum}; //对象输出特定变量
//文件引入
var math = require('./math');
math.add(2,3);
//文件引入核心模块时候不需要带路径
var http = require('http');
http.createSevise(...).listen(3000);
CommonJS 用同步的方式加载模块，在服务器端模块文件都是在本地磁盘上，读取非常快，但是在浏览器端限于网络原因，更适合用异步加载
二： AMD和require.js
AMD规范采用异步方式加载模块，模块的加载不影响它后面的语句执行，所有依赖这个模块语句都定义在一个函数回调中，
等到加载完成之后，才开始执行回调函数，用require.config()指定引用路径 用define()定义模块 用require加载模块
首先我们需要引入require.js文件和一个入口文件main.js 在main.js中配置require.config()并规定项目中用到的基础模块
//在网页中引入require.js和main.js
<script src="js/require.js" data-main="js/main"></script>
//在main.js入口文件 首先定义config()指定各模块路径和引用名
require.config({
baseUrl: 'js/lib',
paths: {
'require': 'jquire.main' //实际路径为 js/lib/jquire.main.js
'underscore': 'underscore.main'
}
});
//执行基本操作
require(['jquire','underscore'],function($,...){
//some code here
});
引用模块时候，我们讲模块名放在[]中作为require()第一参数，如果我们定义的模块本身也依赖其他模块，那就需要将他们放在[]中作为define()第一参数，
如果我们定义的模块本身也依赖其他模块，那就需要将他们放在
//定义main.js模块
define(function(){
var basicNum = 0;
var add = function(x,y){
return x+y;
};
return {
add : add,
basicNum : basicNum
};
});
//定义一个依赖underscore.js模块
define(['underscore'],function(_){
var classify = function(list){
-.countBy(list,function(num){
return num > 20 ? 'old' : 'young';
});
}
return {
classify:classify
}
});
//引用模块,将模块放在[]内
require(['jquire','main'],function($,math){
var sum = math.add(2,3);
$("#sum").html(sum);
});
三：CMD和sea.js
require.js在声明依赖模块时会第一之间加载并执行模块内的代码；
define(['a','b','c'],function(a,b,c){
//等于在最前面声明并初始化要用到的所有模块
if(false){
//即便没有用到某个模块b，但b还是提前执行了
b.foo();
}
});
CMD是另一个js模块化方案，和AMD很相识，不同点在于：AMD推崇依赖前置，提前执行，CMD推崇依赖就近，延迟执行，在sea.js中推广中产生的
//CMD写法：
define(function(require,exports,module){
var a = require('./a'); //在需要时候声明
a.doSomething();
if(false){
var b = require('./b');
b.doSomething()
}
});
//sea.js
//定义模块main.js
define(function(require,exports,module){
var $ = require('jquire.js');
var add = function(a,b){
return a+b;
};
exports.add = add;
});
//加载模块
seajs.use(['main.js'],function(){
var sum = math.add(1+1);
});
四：ES6 Module
ES6在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在浏览器和服务器通用的模块解决方案，
其主要构成是：export和import，export命令用于规定模块的对外接口，import命令用于输入其他模块提供功能
//定义模块main.js
var basicNum = 0;
var add = function(a,b){
return a+b;
};
export({basicNum,add});
//引用模块
import {basicNum,add} from './main'
function test(ele){
ele.testCont = add(2+basicNum);
};
如果用export default{basicNum,add}; 不用使用大括号
//定义输出
export default{basicNum,add};
//引入
import math from './main';
function test(ele){
ele.testCont = math.add(99+math.basicNum);
}
ES6模块不是对象，import命令会被javascript引擎静态分析，在编译时引入模块代码，而不是在代码运行时候加载，所以无法实现条件加载
也是这个原因，使得静态分析成为可能
五：ES6模块与CommonJS模块的差异
1.CommonJS模块输出的是一个值得拷贝，ES6模块输出的值得引用
CommonJS模块输出是一个值得拷贝，也就是说一旦输出一个值，模块内部变化就影响不到这个值
ES6模块运行机制，JS引擎对脚本静态分析的时候，遇到模块加载命令import，就会生成一个只读引用，等到脚本真正执行时，再根据
这个只读引用到被加载的那个模块里面去取值， import加载的值也会跟着变，因此ES6模块是动态引用，并且不会缓存值
2.CommonJS模块是运行时加载，ES6模块是编译时输出接口
运行时加载:CommonJS模块就是对象，即在输入时是先加载整个对象，生成一个对象，然后再从这个对象上读取方法，这种称为：运行时加载
编译时加载：ES6模块不是对象，而是通过exprot命令显示指定输出的代码，import时采用静态命令形式，而不是加载整个模块 这种称为：编译时加载
CommonJS加载是一个对象 (module.exprots属性) 而ES6模块不是对象，它的对外接口是一种静态定义，在代码静态解析阶段会生成
