前言
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(); // 依赖就近，延迟执行
});
1.4 UMD
UMD像个万精油，同时包含CommonJS,AMD,CMD和挂载在windows下。
1.4.1 用法
CommonJS,AMD,CMD写法都通用。
1.4.1 模块写法
(function(root, factory) {
if (typeof module === 'object' && typeof module.exports === 'object') {
console.log('是commonjs模块规范，nodejs环境')
module.exports = factory();
} else if (typeof define === 'function' && define.amd) {
console.log('是AMD模块规范，如require.js')
define(factory())
} else if (typeof define === 'function' && define.cmd) {
console.log('是CMD模块规范，如sea.js')
define(function(require, exports, module) {
module.exports = factory()
})
} else {
console.log('没有模块环境，直接挂载在全局对象上')
root.umdModule = factory();
}
}(this, function() {
return {
name: '我是一个umd模块'
}
}))
2 import
特点：
- 1.编译时加载
- 2.只引用定义(类似浅拷贝)
- 3.按需加载
可对比
require的特点，发现import完胜require,推荐用import取代require
2.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－从已经存在的模块、脚本文件等导入
2.2 导入模块顺序
调用时，先找当前模块目录下的node_moudles文件夹
再去找该文件夹下的package.json文件
在文件中找main,main属性就记录了当前模块的入口
如果找不到package.json或者main，则node会自动找该目录下的index.js
如果以上操作都不成立，则进入上一级目录的node_moudles文件夹寻找
如果还没有,再进入上一级,直到根目录，然后报错
2.3 import()
import()返回一个 Promise 对象。
// 报错
if (x === 2) {
import MyModal from './myModal';
}
引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。没办法像require样根据条件动态加载。
于是提案引入import()函数，编译时分析if语句,完成动态加载。
if(x === 2){
import('MyModal').then((MyModual)=>{
new MyModal();
})
}
实用案例：动态加载vconsole,方便查看控制台报错
/**
* vconsole
* 在链接中加vconsole=1，则会出现VConsole
*/
if (location.href.indexOf('vconsole') !== -1) {
import('vconsole').then(({ default: VConsole }) => {
new VConsole();
});
}
webpack根据ES2015 loader 规范实现了用于动态加载的import()方法。在代码中所有被import()的模块，都将打成分别打出单独的包，放在chunk存储的目录下。当链接中加vconsole=1，浏览器运行到这一行代码时，就会自动请求这个chunk包，实现异步加载。
2.4 模块写法 ES Module
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 .. :)
