一、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,
};
网友评论