媒介
JS模块化编程是前端小伙伴们必不可少的学问，下面妹子将于自认为比较清楚的体式格局枚举出来。
1 require
特性：
- 1.运转时加载
- 2.拷贝到本页面
- 3.悉数引入
1.1 CommonJS
Node.js就是用CommonJS头脑。
在CommonJS中，有一个全局性要领require()，用于加载模块。
1.1.1 用法
var math = require('math');
math.add(2, 3);var math = require('math');
const Math = new math(2, 3)
Math.add();1.1.2 模块写法
模块写法分exports和module.exports。
exports.add = (x,y) => x+y;module.exports = class math {
constructor(x,y) {
this.x = x;
this.y = y;
}
add() {
return x+y;
}
};1.2 AMD
require.js和cujo.js就是用AMD头脑。
AMD是”Asynchronous Module Definition”的缩写，意义就是”异步模块定义”。它采纳异步体式格局加载模块，模块的加载不影响它背面语句的运转。一切依靠这个模块的语句，都定义在一个回调函数中，比及加载完成以后，这个回调函数才会运转。
第二行math.add(2, 3)，在第一行require(‘math’)以后运转，因而必需等math.js加载完成。也就是说，假如加载时刻很长，全部运用就会停在那边等。
这对服务器端不是一个题目，由于一切的模块都存放在当地硬盘，能够同步加载完成，等待时刻就是硬盘的读取时刻。然则，关于浏览器，这倒是一个大题目，由于模块都放在服务器端，等待时刻取决于网速的快慢，能够要等很长时刻，浏览器处于”假死”状况。
因而，浏览器端的模块，不能采纳”同步加载”（synchronous），只能采纳”异步加载”（asynchronous）。这就是AMD范例降生的背景。
1.2.1 用法
//require([module], callback);
require(['math'], function (math) {
math.add(2, 3);
});1.2.1 模块写法
define(id?, dependencies?, factory)
- id:字符串，模块称号(可选)
- dependencies: 是我们要载入的依靠模块(可选)，运用相对路径。,注重是数组花样
- factory: 工场要领，返回一个模块函数
一个模块不依靠其他模块写法
// math.js
define(function (){
var add = function (x,y){
return x+y;
};
return {
add: add
};
});模块还依靠其他模块
define(['a','b'], function(a,b){
function foo(){
a.doSomething();// 依靠前置，提早实行
b.doSomething();
}
return {
foo : foo
};
});当require()函数加载上面这个模块的时刻，就会先加载Lib.js文件。
1.3 CMD
sea.js就是用CMD头脑。
CMD是”Common Module Definition”的缩写。类似于requirejs，然则seajs是依靠就近，耽误实行，requirejs是依靠前置，提早实行。
1.3.1 用法
seajs.config({
alias: {
'jquery': 'http://modules.seajs.org/jquery/1.7.2/jquery.js'
}
});
seajs.use(['./hello', 'jquery'], function(hello, $) {
$('#beautiful-sea').click(hello.sayHello);
});1.3.1 模块写法
define(function(require, exports, module) {
var $ = require('jquery');
exports.sayHello = function() {
$('#hello').toggle('slow');
};
var b = require("b");
b.doSomething(); // 依靠就近，耽误实行
});2 import
特性：
- 1.编译时加载
- 2.只援用定义
- 3.按需加载
可对照
require的特性，发明
import完胜
require,引荐用
import庖代
require
2.1.1 用法
import有两种模块导入体式格局：定名式导入（称号导入）和默许导入（定义式导入），以及 import()。
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";- name－从将要导入模块中收到的导出值的称号
- member, memberN－从导出模块，导入指定称号的多个成员
- defaultMember－从导出模块，导入默许导出成员
- alias, aliasN－别号，对指定导入成员举行的重定名
- module-name－要导入的模块。是一个文件名
- as－重定名导入成员称号（“标识符”）
- from－从已存在的模块、剧本文件等导入
import()
import()返回一个 Promise 对象。
// 报错
if (x === 2) {
import MyModual from './myModual';
}引擎处置惩罚import语句是在编译时，这时候不会去剖析或实行if语句，所以import语句放在if代码块当中毫无意义，因而会报句法毛病，而不是实行时毛病。没办法像require样依据前提动态加载。
因而提案引入import()函数，编译时剖析if语句,完成动态加载。
if(x === 2){
import('myModual').then((MyModual)=>{
new MyModual();
})
}2.2.1 模块写法
export有两种模块导出体式格局：定名式导出（称号导出）和默许导出（定义式导出），定名式导出每一个模块能够多个，而默许导出每一个模块仅一个。
export { name1, name2, …, nameN };
export { variable1 as name1, variable2 as name2, …, nameN };
export let name1, name2, …, nameN; // also var
export let name1 = …, name2 = …, …, nameN; // also var, const
export default expression;
export default function (…) { … } // also class, function*
export default function name1(…) { … } // also class, function*
export { name1 as default, … };
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;- name1… nameN－导出的“标识符”。导出后，能够经由过程这个“标识符”在另一个模块中运用* import援用
- default－设置模块的默许导出。设置后import不经由过程“标识符”而直接援用默许导入
- －继续模块并导出继续模块一切的要领和属性
- as－重定名导出“标识符”
- from－从已存在的模块、剧本文件…导出
参考资料
Happy coding .. :)
