前端模块化总结（commonJs,AMD,CMD,ES6 Module）

require(‘module‘); // 通过模块名加载，需要注意的使，在配置文件中要配置该模块的具体路径；
require(‘path‘); // 通过路径加载
// 使用exports添加属性的方式暴露
exports.xxx = xxx;  // 暴露xxx属性
// 或者使用给module.exports赋值的方法
module.exports = yyy; // require时得到的就是运行后yyy值的拷贝

exports.a = 2;
module.exports.b = 3;

console.log(module.exports); //{ a: 2, b: 3 }
console.log(exports); // { a: 2, b: 3 }
console.log(exports === module.exports); // true

exports.a = 2;
module.exports = {"b": 3};   // moudle.exports 被重新指向新的内存，它与exports的关联关系断开

console.log(module.exports);  // { b: 3 }
console.log(exports);  // { a: 2 }
console.log(exports === module.exports);  // false

exports = 2;   // exports重新赋值，切断了与module.exports的联系
module.exports.b= 3;

console.log(module.exports); // { b: 3 }
console.log(exports); // 2
console.log(exports === module.exports); // fasle

require.config({
    baseUrl:‘js/‘,
    paths:{  //  需要通过模块名来加载的模块，都定义到这里,支持网络资源，本地资源路径在baseUrl下
        ‘jquery‘:‘http://xxx.xxxx.com/jquery.js‘,
        ‘index‘:‘index/index.js‘,
    },
    shim:{
        ‘aaa‘:{  // 不符合标准的文件，可以在shim中来定义
            deps:[‘./a‘,‘./b‘],
            init:function(){
                return {
                          // 这里定义非标准文件的返回
                }
            }
        }
    }
});        

// define 的模块id是唯一的，为避免麻烦，一般可省略，require.js会自动生成一个唯一标识
define([‘jquery‘,‘index‘,‘./utils‘], function($,index,utils){
   // dosth...
     return { // 这里定义模块向外暴露的方法和属性，没有可以省略;
        ‘aaa‘: 1,
        ‘bbb‘: 1
     } 
})；

define({
    ‘aaa‘: 1,
    ‘bbb‘: 2,
    ‘ccc‘: 3
});

require(["moduleName","path","url"], function (module) {
    // dosth;    
});

define(function(require, exports, module ) {  // 这种定义模块的方式可以兼容commonJs规范，但实质上还是被转换为requireJs的规范来实现；
    var a = require(‘a‘), // 通过这种方式可以实现按需加载 
        b = require(‘b‘); 
    // 模块需要暴露的方法也可以通过 exports向外暴露
       exports.eee = 123;
});

// 等价于：
define([‘require‘], function(require){
    var a = require(‘a‘),  
        b = require(‘b‘);
})

// define 函数的标准使用方法。但是官方强烈推荐不传入 id 和 deps，模块加载器会自动获取这两个参数，id默认为模块所在文件的访问路径，
// deps数组模块加载器会从factory.toString() 中解析。同时，function的第一个参数，必须是require，这是seajs的使用规则；
define(‘hello‘,  [‘jquery‘],  function(require, exports, module) {
　　//dosth...
　　// 向外暴露模块的API有三种方式：
　　exports.aaa = sth;  // seajs中exports也是module.exports的引用；
　　module.exports = {} 
　　return {}
});

// factory 为对象，相当于定义一个json数据模块，加载该模块时得到的就是这组json数据；这个用法跟require是一致的
define({ "foo": "bar" });

//  factory为字符串时，相当于定义一个字符串模板
define(‘I am a template. My name is {{name}}.‘);　　

define(function(require, exports, module) {
  // 同步加载模块，通过这种方式加载的文件，会在静态分析阶段就被下载好；
    var a = require(‘./a‘);
    a.doSomething();
  // 异步加载一个模块，通过这种方式加载的文件，在用的时候才会下载；
    require.async(‘./b‘, function(b) {
        b.doSomething();
    });
  
  // 异步加载多个模块
    require.async([‘./c‘, ‘./d‘], function(c, d) {
       // do something
    });
  // 条件加载模块;PS:如果这里依然使用require来加载模块，那模块加载器会把两个模块都下载下来
    if (todayIsWeekend){
         require.async("play");
    }else{
         require.async("work");
    }
});

export default anything;  // 模块的默认输出，一个模块只能有一个默认输出; 
// 本质上，export default就是输出一个叫做default的变量或方法，然后系统允许你为它取任意名字。所以default后面不能跟变量声明语句。
import anyName  from  ‘path‘;

export var a = 1;  //这里要说明一点，export是对外的接口，所以它必须与模块内部的变量建立一一对应关系;
export function  foo(){};
//  也可以写成下面的形式：
var  a = 1;
function foo(){};
export {a, foo}

// 然而下面的这两种写法都是错误的，因为它没有提供对外的接口
export 1； 

var a = 1;
export a;

// 在import中，就要指出要加载的方法和属性的具体名字
import {a, foo} from ‘path‘;
// 通过 as关键字，可以给对外输出的方法重新命名。
function v1() { ... } 
function v2() { ... } 
export { 
　　v1 as streamV1, 
　　v2 as streamV2, 
　　v2 as streamLatestVersion // 同一个方法可以输出多次
};
// import 中也支持as关键字
import { streamV1 as newName } from ‘path‘;
// import也可以整体加载
import * as newName from ‘path‘;

// import也可以用来加载并执行一个js文件，并且没有任何输入。
import ‘path‘;   
import ‘path‘;  // 即使多次加载，该文件也只执行一次，

// 对于同一个模块中的多次加载，import也只执行一次,因为import语句是单例的（singleton）
import {foo} from ‘path‘;
import {bar} from ‘path‘;
//相当于
import {foo, bar} from ‘path‘;