JavaScript模塊機制

JavaScript對于模塊機制的運用讓開發(fā)變得更加靈活和高效，使得代碼的可維護性更增高，就像一個誰都不會的慧眼。

在JavaScript中，模塊機制指的是將代碼在代碼文件中組成一定的邏輯，以隔離作用域，達到一定的模塊化目的。

CommonJS模塊規(guī)范

在CommonJS模塊規(guī)范上，一個腳本文件代表一個模塊，文件內(nèi)的頂級函數(shù)和變量都是私有的，需要輸出的定義在module.exports中，其它代碼通過require()函數(shù)進行調(diào)用。

// a.js
let name = "Tom";
function sayName() {
console.log(name);
}
module.exports = {
sayName,
};
// b.js
let a = require('./a.js');
a.sayName(); // 輸出 "Tom"

這里在a.js中定義了一個私有的，僅內(nèi)部使用的變量和函數(shù)，通過module.exports輸出了一個函數(shù)，可以被其它模塊調(diào)用。在b.js中，通過require()函數(shù)加載了a.js模塊，并調(diào)用了輸出的方法。

ES6模塊規(guī)范

在ES6模塊規(guī)范中，一個腳本文件也代表一個模塊，導出和導入使用export和import關(guān)鍵字，其它代碼可通過import進行調(diào)用。

// a.js
export default function sayHi(name) {
console.log("Hi, " + name);
}
// b.js
import sayHi from './a.js';
sayHi("Tom"); // 輸出 "Hi, Tom"

這里我們使用export default將函數(shù)sayHi輸出，可以在其它模塊中通過import進行導入并使用。

AMD模塊規(guī)范

在AMD模塊規(guī)范中，使用define函數(shù)定義模塊，依賴其它模塊使用require函數(shù)，這里需要將require和define函數(shù)引入。

// a.js
define(function () {
let name = 'Tom';
function sayName() {
console.log(name);
}
return {sayName};
});
// b.js
require(['./a.js'], function (a) {
a.sayName(); // 輸出 "Tom"
});

這里我們使用define函數(shù)定義了一個模塊，返回了一個含有sayName方法的對象。在b.js中使用了require函數(shù)進行依賴該模塊，并調(diào)用其中的方法。

CMD模塊規(guī)范

在CMD模塊規(guī)范中，使用define定義模塊，依賴其它模塊使用require函數(shù)，觸發(fā)函數(shù)定義中的回調(diào)函數(shù)，實現(xiàn)代碼的異步加載。

// a.js
define(function (require, exports, module) {
let name = "Tom";
function sayName() {
console.log(name);
}
module.exports = {sayName};
});
// b.js
require(['./a.js'], function (a) {
a.sayName(); // 輸出 "Tom"
});

這里我們使用module.exports輸出對象，使用require函數(shù)引用模塊，并調(diào)用其中sayName方法。

總結(jié)

以上便是JavaScript的幾種模塊規(guī)范，包括CommonJS、ES6、AMD、CMD，實現(xiàn)代碼模塊化，提高編程效率和代碼的可維護性。對于新的項目我們建議使用ES6規(guī)范。