　 JavaScript程式碼組織結構良好的5個特點，隨著JavaScript專案的成長，如果你不小心處理的話，他們往往會變得難以管理。我們發現自己常常陷入的一些問題：當在建立新的頁面時發現，很難重用或測試之前寫的程式碼。

　　當我們更深處地研究這些問題，我們發現根本原因是無效的依賴管理造成的。比如，指令碼 A依賴指令碼B，並且指令碼B又依賴指令碼C，當C沒有被正確引入時，整個依賴鏈就無法正常工作了。

　　為了解決這個問題，我們已經採取了非同步模組定義 (AMD)的模式，並引入require.js到我們的技術堆疊。經過對AMD的進一步探索，我們已經基本確定，組織嚴密的JavaScript一般都呈現以下五個特點：

　　始終宣告我們的依賴為第三方程式碼庫新增 shim(墊片) 定義跟呼叫應該分離依賴應該非同步載入模組不應依賴全域性變數

　　讓我們詳細討論一下。

　　始終宣告我們的依賴

　　我們最常碰到了的一個問題是，我們會經常忽略那些會被確定載入的依賴項。舉例來說，如果我們建立了一個 jQuery外掛，一般認為沒有必要申報jQuery的依賴，因為它在大多數頁面都是預設裝載的。雖然這似乎適用於大多數的網頁，但當我們試圖進行單元測試或在一個全新的頁面載入時，它就變成一個問題。

　　始終宣告我們的依賴，我們就消除了 JavaScript中90%的問題。可重用的程式碼變得更可靠，單元測試的數量增加了4倍也是一個因素。

　　為第三方程式碼庫新增 shim(墊片)

　　在管理 JavaScript依賴時經常碰到的一個有趣問題是，較舊的第三方庫可能無法和您的依賴關係管理系統配合工作。例如，你們內部使用了jQuery的一個很酷的外掛，但它對require.js一無所知。這會成為一個問題，因為第一個特點，我們來新增對這個外掛的引用。
　　解決的辦法是透過依賴管理工具為這個外掛製作一個墊片。在 require.js中，這可以很容易地透過配置來完成：

　　var require = {

1. 　　"shim": {

2. 　　"lib/cool-plugin": {

3. 　　"deps": ["lib/jquery"]

4. 　　}

5. 　　}

6. 　　}

　　有了這個簡單的配置，每一個載入 lib/cool-plugin.js 的指令碼都會自動載入jQuery。將有助於滿足所有相關性.

　　最終的結果是程式碼更容易測試和重用，因為你總是有一個 require()來呼叫所需的功能。

　　定義跟呼叫應該分離

　　這是限制 JavaScript程式碼的可重用性和可測試性的一個常見問題。問題表現在一個單一的檔案即定義了一個類/函式又呼叫了它。考慮下面的程式碼：

　　 ## js/User.js

1. 　　define(functino(require) {

2. 　　var User = function(name, greeter) {

3. 　　this.name = name;

4. 　　this.greeter = greeter;

5. 　　};

6. 　　User.prototype.sayHello = function() {

7. 　　this.greeter("Hello, " + this.name);

8. 　　};

9. 　　var user = new User('Alice', window.alert);

10. 　　user.sayHello();

11. 　　});

　　在這個例子中，一個單一的檔案即定義了 User類又呼叫它。這將很難重用這個程式碼，因為只要載入這個指令碼就會出現alert。同樣greeter這個非常難以測試。

　　解決的辦法是保持定義和執行的分離。這有助於確保可重用性和可測性：

　　## js/User.js

1. 　　define(functino(require) {

2. 　　var User = function(name, greeter) {

3. 　　this.name = name;

4. 　　this.greeter = greeter;

5. 　　};

6. 　　User.prototype.sayHello = function() {

7. 　　this.greeter("Hello, " + this.name);

8. 　　};

9. 　　return User;

10. 　　});

11. 　　## js/my-page.js

12. 　　define(functino(require) {

13. 　　var User = require('js/User');

14. 　　var user = new User('Alice', window.alert);

15. 　　user.sayHello();

16. 　　});

　　這種變化， User類可以安全地在許多指令碼中重用。

　　依賴應該非同步載入

　　因為試圖同步載入指令碼會導致瀏覽器鎖死，這是非常重要的，你的指令碼和你的模組應該使用非同步載入機制。 Require.js在預設情況下，所有非同步載入你的模組,只有所有的的依賴都載入完以後才會執行你的模組程式碼的函式。

　　透過使用一個閉包，我們可以進一步利用 “use strict”的好處。

　　模組不應依賴全域性變數

　　為了進一步加強我們的 JavaScript程式碼庫，我們已經(幾乎)完全消滅了全域性變數(除了由require.js提供的全域性變數，如require()和define())。全域性變數是臭名昭著的潛在的進入模組的“隱藏的依賴關係”，它會使程式碼很難重用或測試。

　　Require.js也讓我們轉換第三方全域性變數，require() - 透過墊補功能能模組。在這個例子中，lib/calculator 建立一個全域性的計算器物件，這個庫是被require化的。

　　var require = {

1. 　　"shim" : {

2. 　　"lib/calculator": {

3. 　　"export": "Calc"

4. 　　}

5. 　　}

6. 　　}

JavaScript程式碼組織結構良好的5個特點

相關文章