模块化
- 独立的作用域与依赖关系处理;
- 降低程序复杂性;
- 提高代码的重用;
- 利于团队协作开发与后期的维护和扩展。
基于 JavaScript 的模块系统分类
- CommonJS(适用于服务端)
- AMD/CMD
- UMD
- ESM(EcmaScript Module)
CommonJS
- 在早起前端对于模块化并没有什么规范,反而是偏向服务端的应用有更强烈的需求,CommonJS 规范就是一套偏向服务端的模块化规范,NodeJS 就采用了这个规范。
- 一个文件就是模块,拥有独立的作用域。
导出内部数据
- 通过
module.exports
或exports
对象导出模块内部数据
// a.js
let a = 1;
let b = 2;
module.exports = {
x: a,
y: b
}
// or
exports.x = a;
exports.y = b;
导入外部模块数据
通过 require
函数导入外部模块数据
// b.js
let a = require('./a');
a.x;
a.y;
AMD/CMD
- 因为 CommonJS 规范一些特性(基于文件系统,同步加载),它并不适用于浏览器端,所以另外定义了适用于浏览器端的规范。
https://github.com/amdjs/amdjs-api/wiki/AMD
- 浏览器并没有具体实现该规范的代码,可以通过一些第三方库来解决。
https://requirejs.org/
requireJS
<script data-main="scripts/main" src="https://cdn.bootcss.com/require.js/2.3.6/require.min.js"></script>
- 独立模块作用域
- 通过一个
define
方法来定义一个模块,并通过该方法的第二个回调函数参数来产生独立作用域
javascript // scripts/Cart.js define(function() { // 模块内部代码 })
导出模块内部数据 - 通过
return
导出模块内部数据
// scripts/Cart.js
define(function() {
return class Cart {
add(item) {
console.log(`添加商品:${item}`)
}
}
})
导入外部模块数据
- 通过前置依赖列表导入外部模块数据
// scripts/main.js
// 定义一个模块,并导入 ./Cart 模块
define(['./Cart'], function(Cart) {
let cart = new Cart()
cart.add({name: 'iphoneXX', price: 1000000})
})
require.js
也支持 CommonJS
风格的语法**
导出模块内部数据
// scripts/Cart.js
define(['require', 'exports', 'module'], function(require, exports, module) {
class Cart {
add(item) {
console.log(`添加商品:${item}`)
}
}
exports.Cart = Cart;
})
// 忽略不需要的依赖导入
define(['exports'], function(exports) {
class Cart {
add(item) {
console.log(`添加商品:${item}`)
}
}
exports.Cart = Cart;
})
// 如果是依赖的导入为:require, exports, module,也可以省略依赖导入声明
define(function(require, exports, module) {
class Cart {
add(item) {
console.log(`添加商品:${item}`)
}
}
exports.Cart = Cart;
})
导入外部模块数据
// scripts/main.js
define(['./Cart'], function(Cart) {
let cart = new Cart()
cart.add({name: 'iphoneXX', price: 1000000})
})
UMD
UMD
并不属于一套模块规范,它主要用来处理CommonJS
、AMD
、CMD
的差异兼容,是模块代码能在前面不同的模块环境下都能正常运行。
(function (root, factory) {
if (typeof module === "object" && typeof module.exports === "object") {
// Node, CommonJS-like
module.exports = factory(require('jquery'));
}
else if (typeof define === "function" && define.amd) {
// AMD 模块环境下
define(['jquery'], factory);
}
}(this, function ($) { // $ 要导入的外部依赖模块
$('div')
// ...
function b(){}
function c(){}
// 模块导出数据
return {
b: b,
c: c
}
}));
- 例如
// M是同构函数 mod是被同构的函数
function M(mod) {
if (typeof module === "object" && typeof module.exports === "object") {
// 满足当前条件,当前就是运行在commonjs模块环境下
module.exports = mod();
} else if (typeof define === "function" && define.amd) {
// 满足当前条件,当前是是amd环境
define(mod);
} else {
window.libs = mod();
}
}
M(function () {
function fn1() {
console.log('fn1');
}
return {
fn1
}
})
(function(mod){
if (typeof module === "object" && typeof module.exports === "object") {
// 满足当前条件,当前就是运行在commonjs模块环境下
module.exports = mod();
} else if (typeof define === "function" && define.amd) {
// 满足当前条件,当前是是amd环境
define(mod);
} else {
window.libs = mod();
}
})(function () {
function fn1() {
console.log('fn1');
}
return {
fn1
}
})
define(['./src/libs.js'],function(libs){
libs.fn1();
})
ESM
- 从
ECMAScript2015/ECMAScript6
开始,JavaScript
原生引入了模块概念,而且现在主流浏览器也都有了很好的支持。 - 一个文件就是模块,拥有独立的作用域,且导出的模块都自动处于
严格模式
下,即:'use strict'
。
导出模块内部数据
- 使用
export
语句导出模块内部数据
// 导出单个特性
export let name1, name2, …, nameN;
export let name1 = …, name2 = …, …, nameN;
export function FunctionName(){...}
export class ClassName {...}
// 导出列表
export { name1, name2, …, nameN };
// 重命名导出
export { variable1 as name1, variable2 as name2, …, nameN };
// 默认导出
export default expression;
export default function (…) { … }
export default function name1(…) { … }
export { name1 as default, … };
// 模块重定向导出
export * from …;
export { name1, name2, …, nameN } from …;
export { import1 as name1, import2 as name2, …, nameN } from …;
export { default } from …;
导入外部模块数据
- 导入分为两种模式
- 静态导入
- 动态导入
静态导入
- 在浏览器中,
import
语句只能在声明了type="module"
的 script 的标签中使用。
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { foo , bar } from "module-name/path/to/specific/un-exported/file";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
- 静态导入方式不支持延迟加载,
import
必须在模块的最开始
document.onclick = function () {
// import 必须放置在当前模块最开始加载
// import m1 from './m1.js'
// console.log(m1);
}
动态导入
- 类似函数的动态
import()
,它不需要依赖type="module"
的 script 标签。 - 关键字
import
可以像调用函数一样来动态的导入模块。以这种方式调用,将返回一个promise
。
import('./m.js')
.then(m => {
//...
});
// 也支持 await
let m = await import('./m.js');
- 通过
import()
方法导入返回的数据会被包装在一个对象中,即使是default
也是如此。