好程式設計師分享JavaScript程式碼組織結構良好的5個特點

阿新 • • 發佈：2019-04-20

好程式設計師分享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 = {

"shim": {
"lib/cool-plugin": {
"deps": ["lib/jquery"]
}
}
}

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

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

　　定義跟呼叫應該分離

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

## js/User.js

define(functino(require) {
var User = function(name, greeter) {
this.name = name;
this.greeter = greeter;
};
User.prototype.sayHello = function() {
this.greeter("Hello, " + this.name);
};
var user = new User('Alice', window.alert);
user.sayHello();
});

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

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

## js/User.js

define(functino(require) {
var User = function(name, greeter) {
this.name = name;
this.greeter = greeter;
};
User.prototype.sayHello = function() {
this.greeter("Hello, " + this.name);
};
return User;
});
## js/my-page.js
define(functino(require) {
var User = require('js/User');
var user = new User('Alice', window.alert);
user.sayHello();
});

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

　　依賴應該非同步載入

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

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

　　模組不應依賴全域性變數

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

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

var require = {

"shim" : {
"lib/calculator": {
"export": "Calc"
}
}
}<

好程式設計師分享JavaScript程式碼組織結構良好的5個特點

好程式設計師分享JavaScript程式碼組織結構良好的5個特點

好程式設計師分享使用JavaScript正則表示式如何去掉雙引號

好程式設計師分享Web前端開發就業前景如何？

好程式設計師分享Web前端知識之HTML

好程式設計師分享HTML5精品技術文章--前端崗位需求分析

好程式設計師分享該如何選擇background-image和img標籤

好程式設計師分享大資料三大必備技能

好程式設計師分享js實現簡單的板球遊戲

好程式設計師分享Python自動化運維開發實戰六、流程控制

好程式設計師分享Python自動化運維開發實戰五-運算子與表示式

好程式設計師分享Java開發常用規範技巧二

好程式設計師分享Linux重器vi編輯器

好程式設計師分享DDL之操作資料庫

好程式設計師分享placeholder屬性詳解

好程式設計師分享Web前端效能優化

每個程式設計師1小時內必須解決的5個程式設計問題之難題

好程式設計師技術分享淺談JavaScript中的閉包

好程式設計師web前端分享詳細瞭解JavaScript函式

好程式設計師教程分享Javascript設計模式

好程式設計師web前端分享HTML基本結構和基本語法

好程式設計師分享JavaScript程式碼組織結構良好的5個特點

相關推薦