更上一層樓
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 (非同步模組定義) 是其中之一
// 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 格式通常用於瀏覽器應用程式，因為
- 它允許變數在工廠函式內部進行作用域劃分（而不是將所有內容放在視窗全域性作用域中）
- 依賴項可能無法同步可用，例如，需要透過非同步網路請求獲取它們
- 模組在回撥中定義，然後在所有依賴項載入後執行
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 應用程式中的模組定義。