前端模块化 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模块不是对象，它的对外接口是一种静态定义，在代码静态解析阶段会生成