模块化
yuhuo2021-08-05JavaScriptJavaScript基础
CommonJs 规范
实现方案：NodeJs
特点：
- 运行时同步加载，只适合服务端
- 输出值的拷贝
// 导出
// 修改 exports 对象属性值
exports.sum = sum;
module.exports.sum = sum;
// 定义新的 exports 对象
module.exports = {
sum: sum
}
// 导入
var math = require("math");
ES6 规范
实现方案：ES6 modules
特点：
- 编译时加载 / 运行时加载
- 依赖就近，提前执行
- 输出值的引用
<script type="module" src="main.js"></script>
// 导出写法1：export 后接变量定义
export let name = "张三";
export function say() {}
// 导出写法2：export 后接大括号列举变量（此大括号非对象）
let years = "18";
let run = function() {}
export {years as age, run}
// 导出写法3：export default 后接任意类型数据
let country = "中国";
export default country;
export default "中国";
export default {
country: "中国"
}
// 上述代码相当于导出了以下完整对象
{
name: "张三",
age: "18",
say: function() {},
run: function() {},
default: "中国",
}
// 直接导出另一个模块
export * from "./other.js"
export { something } from "./other.js"
// 编译时同步加载
// 导入 export 的数据
import {name, age as years, say} from './user.js';
// 导入 export default 的数据
import user from './user.js';
// 导入完整对象，结构如上述示例
import * as user from './user.js';
// 运行时异步加载
import("./user.js").then(function(user) {
// 导入完整对象
})
注意
- 同个模块内，export 可多次，export default 只能一次，两者可共存；
- export，import 须位于模块顶层作用域下的任意位置，import 会自动提升到顶部；
- import 是在编译时加载，不能使用动态代码，如嵌套在 if 内；
- import 导入的是常量，import() 导入的是变量；
- 导入的完整对象的属性都是只读属性；
AMD 规范
实现方案：RequireJs
特点：
- 运行时异步加载
- 依赖前置，提前执行
<script src="./require.js" data-main="./main"></script>
// main.js 入口
require.config({
paths:{
"a":'./moduleA',
"b":'./moduleB',
}
});
require(['a'],function(a){
console.log(a)
});
// moduleA.js 模块A
define(['b'],function(b){
console.log(b);
return "模块A";
});
// moduleB.js 模块B
define(function(){
return "模块B";
})
CMD 规范
实现方案：SeaJs
特点：
- 运行时异步加载
- 依赖就近，延迟执行
<script src="sea.js"></script>
<script>
seajs.config({
alias:{
"a":"./moduleA",
"b":"./moduleB",
},
});
seajs.use('main', function(main) {
console.log(main)
});
</script>
// main.js 入口
define(function(require, exports, module) {
let a = require("a");
console.log(a);
exports.name = "入口";
});
// moduleA.js 模块A
define(function(require, exports, module) {
// 异步加载模块
require.async(["b"], function(b) {
console.log(b);
});
module.exports = {
name: "模块A"
}
});
// moduleB.js 模块B
define(function(require, exports, module) {
exports.name = "模块B";
});