CommonJS 規範
基於文件系統，不適用於瀏覽器
node 端
模塊文件
// m1.js
const mod = {
a: 1,
b: 3,
fn() {
console.log("hello");
},
};
module.exports = {
mod,
};
引入模塊
// m2.js
const { mod } = require("./m1.js");
mod.fn(); // hello
AMD 規範
requireJS 是 AMD 規範的一種實現，可用於瀏覽器
// 模塊文件 a.js
define(function () {
let a = 1;
let b = 2;
return { a, b };
});
/*
// 或者這樣寫
define(function (require, exports, module) {
let a = 1;
let b = 2;
module.exports = {
a,
b,
};
});
*/
// 主文件 b.js
// 這裏的第一個參數中，可以在數組裏面引入多個模塊，逗號分隔，第二個函數參數中每一個形參都跟引入的模塊一一對應
define(["./a.js"], function (a) {
console.log(a);
});
/*
// 或者這樣寫
define(function (require, exports, module) {
let a = require("./a");
console.log(a);
});
*/
<!-- 瀏覽器中引入主模塊 -->
<html>
<body>
<!-- 這裏的 require.js 是 AMD 規範的實現 -->
<script src="./require.js" data-main="./b.js"></script>
</body>
</html>
ESM
ES6 的模塊化方式
// a.js
let a = 1;
let b = 2;
function fn() {
console.log("a module :", a + b);
}
// 需要導出的數據列表
export { a, b, fn };
// b.js
import * as A from "./a.js";
console.log(A.a);
A.fn();
/*
// 當然也可以通過解構引入
import { a, b, fn } from "./a.js";
console.log(a);
fn();
*/
<html>
<body>
<!-- 瀏覽器中，type ='module' 是關鍵 -->
<script type="module" src="./b.js"></script>
</body>
</html>
動態導入模塊
// a.js 模塊
let a = 1;
let b = 2;
function fn() {
console.log("a module :", a + b);
}
export { a, b, fn };
// b.js 模塊
document.onclick = function () {
// 這裏 import 會返回一個 promise
import("./a.js").then((data) => {
data.fn();
});
// 當然也支持 async + await
// let m1 = await import("./a.js")
};
<!-- 當點擊頁面的時候纔會加載 b.js -->
<html>
<body>
<script type="module" src="./b.js"></script>
</body>
</html>