領先一步
VMware 提供培訓和認證，助您加速進步。
瞭解更多JavaScript 模組化（拒絕浮華辭藻）
大約十年前，Adrian Colyer寫了一篇令人難忘的部落格文章，對面向切面程式設計（AOP）進行了最佳解釋：清晰簡潔的風格，準確的內容，沒有浮華的辭藻。如果你看過本系列早期的兩篇文章，你可能已經注意到我們在Sagan應用程式的客戶端模組中的一些架構選擇，包括使用JavaScript模組。
在這篇文章中，我想以Adrian文章的風格帶你瞭解JavaScript模組的基礎知識：清晰、簡單、準確、沒有浮華的辭藻！
為什麼JavaScript也需要模組化
如果你像我一樣有Java背景，一些JavaScript語言特性可能看起來有點奇怪
- 其強大的原型性質
- 沒有軟體元件單元：語言中沒有內建包或模組
- 瀏覽器應用程式和伺服器應用程式之間的程式設計風格差異
簡單的Web應用程式通常看起來像這樣
<html>
<head>
<!-- scripts are loaded **sequentially** -->
<script src="jquery.js"></script>
<script src="widget.js"></script>
<!-- all objects are in the global namespace,
no way to isolate the code completely! -->
<script>
window.$; // this is jquery
</script>
</head>
</html>
開發人員通常會嘗試重用功能塊並管理它們之間的依賴關係。在前面的情況下，這很難實現：你必須按正確的順序宣告指令碼並避免名稱衝突，而沒有任何關於依賴項的元資料。隨著應用程式的增長，這項任務會變成一場噩夢：想象一下，在沒有包或依賴管理基礎設施的情況下管理你的Java應用程式！
理解JavaScript創作格式：CommonJS 和 AMD
幸運的是，JS社群充分意識到模組化的需求，在過去幾年中，出現了幾種廣泛採用的解決這個問題的方法
AMD (Asynchronous Module Definition) 是其中之一
// defining a module that depends on "graphmodule",
// injected in the function definition as an argument
define(["graphmodule"],
function (graph) {
// this module exports a "draw" function
return function draw(data) {
return graph.piechart(data);
}
}
);
AMD格式常用於瀏覽器應用程式，因為
- 它允許變數在工廠函式內部作用域（而不是所有內容都在window全域性作用域中）
- 依賴項可能無法同步獲取，例如，它們需要透過非同步網路請求獲取
- 模組在回撥中定義，然後在所有依賴項載入後執行
CommonJS 是另一種創作格式，常用於伺服器端的Node.js應用程式，但也用於瀏覽器應用程式。
/**
* Our module's dependencies and API
**/
// we fetch the graph module as a dependency
var graph = require('graphmodule');
// we decorate the `exports` variable to export our function
exports.draw = drawFunc;
/**
* API implementation
**/
function drawFunc(data) {
return graph.piechart(data);
}
你可能發現了與AMD的一些區別
- 這種創作格式可以在瀏覽器和伺服器上使用！
- 因此，你可以在無頭瀏覽器和Node.js單元測試中測試你的模組！
- 模組定義不包含在
define中
下一步是什麼？
JavaScript的下一個版本（技術上稱為ECMAScript 6）將標準化JavaScript模組化，儘管使用的語法與我們上面看到的AMD或CommonJS格式略有不同。此外，EcmaScript 6將解決該領域的許多問題，但也將提供語法糖來定義類似OO的類。
無論你在哪裡使用JavaScript，無論是客戶端還是伺服器，都請考慮採用模組化方法——原因與我們在Java中採用模組化的原因完全相同。熟練掌握JS模組技術需要一點學習曲線，但結果非常值得。
如果你是JavaScript模組化的新手，我建議你檢視“編寫CommonJS模組”教程以及我們在Sagan中使用的模組載入器：curl。一旦你熟悉了，請檢視我們在Sagan應用程式中的模組定義。