最流行的四种JS模块化规范

一、commomJS

特点：

​ 1.获取依赖模块用同步加载方式，适合服务器端，在浏览器使用会出现浏览器假死的情况

​ 原因：在服务器端，所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。

​ 2.模块可以多次加载（多次使用require加载），但是只会在第一次加载时运行一次，然后运行结果就被缓存了，以后再加载，就直接读取缓存结果。

使用

/*定义模块*/
//example.js
var n = 1;
function sayHello( name ){
    var name = name || "Tom";
    return "Hello~"+name
}
function addFn(val){
    var val = val.x+val.y;
    return val
}
/*使用module.exports的方法*/
module.exports ={
    n:n,
    sayHello:sayHello,
    addFn:addFn
}
/*
    使用exports的方法
    exports.n=n;
    exports.sayHello=sayHello
    exports.addFn=addFn

/*
    两种输出方式是等价的
*/

/*使用模块*/
//main.js
var example = require('./example.js');/*同步执行*/
var addNum = {
    "x":10,
    "y":5
}
console.log( example )//查看example输出的对外模块接口；
console.log( example.n )//1;
console.log( example.sayHello("Jack") )// "Hello~ Jack";
console.log( example.addFn(addNum) ) //15;

二、AMD

特点：

​ 1.获取依赖模块用异步加载方式，适合浏览器端

使用：

/*定义模块*/
/*
    define(id?, dependencies?, factory)
    id:字符串，模块名称(可选)
    dependencies: 是我们要载入的依赖模块(可选)，使用相对路径。,注意是数组格式
    factory: 工厂方法，返回一个模块函数
*/
//example.js
/*在定义模块时，也使用了其他依赖模块*/
define(['Lib'], function(Lib){
　　　　function foo(){
　　　　　　Lib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

/*使用模块*/
/*
require( dependencies, factory)
    dependencies: 是我们要载入的依赖模块(可选)，使用相对路径。,注意是数组格式
    factory: 在这里使用模块完成业务
*/
/*
    将依赖的模块全部加载执行以后执行回调
*/
require(['./a', './b'], function (m1,m2) {
　m1.add(2, 3);
  m2.add(2, 3);
});

三、CMD

特点：

​ 1.延迟加载执行

使用：

define(function(require, exports, module) {
  // 模块代码
    var a = require('./a');
  //require 是一个方法，接受 模块标识 作为唯一参数，用来获取其他模块提供的接口。
  
    //异步加载一个模块，在加载完成时，执行回调
    require.async('./b', function(b) {
        b.doSomething();
    });
    
    //异步加载多个模块，在加载完成时，执行回调
    require.async(['./c', './d'], function(c, d) {
        c.doSomething();
        d.doSomething();
    });
    
    
    //模块输出
     return {
        foo: 'bar',
        doSomething: function() {}
     };
    
    // 对外提供 foo 属性
    exports.foo = 'bar';

    // 对外提供 doSomething 方法
    exports.doSomething = function() {};
    
    // 错误用法！！!
      exports = {
        foo: 'bar',
        doSomething: function() {}
      };
    // 正确写法
      module.exports = {
        foo: 'bar',
        doSomething: function() {}
      };
/*
    exports 仅仅是 module.exports 的一个引用。在 factory 内部给 exports 重新赋值时，并不会改变 module.exports 的值。因此给 exports 赋值是无效的，不能用来更改模块接口。
*/
});

四、ES6 Module

特点：

​ export指令导出接口，以import引入模块

​ import的语法跟require不同，而且import必须放在文件的最开始，且前面不允许有其他逻 辑代码，这和其他所有编程语言风格一致。

使用：

export var m = 1;
// 等价于
var m = 1;
export { m }

export const student = {
  name: 'Megan',
  age: 18
}
// 等价于
const obj = {
  id: 1,
  value: 'lalala'
};
export { obj };

export function sun(a, b) {
  return a + b;
}
// 等价于
function sum(a, b){
  return a + b;
}
export { sum };
import { sum } from xxxx

export default function() {}
 
// 等效于：
function a() {};
export {a as default};

import  xxx  from xxxx //可以省去花括号{}。
// 等效于，或者说就是下面这种写法的简写，是同一个意思
import { default as xxx } from xxxx;

//一个文件即模块中只能存在一个export default语句，导出一个当前模块的默认对外接口
export default var i = 0;
//使用默认式
import variable from './exportDemo';
//同时使用命名式和默认式
import variable, { sum, boy } from './exportDemo';

//导入一个模块，但不进行任何绑定：
import "my-module";

//在同一个模块可以同时使用两种导出方式
export function sun(a, b) {
  return a + b;
}
export default {
  install,
  DottedTitle,
};