本篇內(nèi)容主要講解“JavaScript代碼組織結(jié)構(gòu)良好的特點有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“JavaScript代碼組織結(jié)構(gòu)良好的特點有哪些”吧!
專注于為中小企業(yè)提供成都做網(wǎng)站、網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)澤州免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。
隨著JavaScript項目的成長，如果你不小心處理的話，他們往往會變得難以管理。我們發(fā)現(xiàn)自己常常陷入的一些問題： 當在創(chuàng)建新的頁面時發(fā)現(xiàn)，很難重用或測試之前寫的代碼。
當我們更深處地研究這些問題，我們發(fā)現(xiàn)根本原因是無效的依賴管理造成的。比如，腳本A依賴腳本B，并且腳本B又依賴腳本C，當C沒有被正確引入時，整個依賴鏈就無法正常工作了。
為了解決這個問題，我們已經(jīng)采取了異步模塊定義(AMD)的模式，并引入require.js到我們的技術(shù)堆棧。經(jīng)過對AMD的進一步探索，我們已經(jīng)基本確定，組織嚴密的JavaScript一般都呈現(xiàn)以下五個特點：
始終聲明我們的依賴
為第三方代碼庫添加shim(墊片) 定義跟調(diào)用應(yīng)該分離 依賴應(yīng)該異步加載 模塊不應(yīng)依賴全局變量
讓我們詳細討論一下。
始終聲明我們的依賴
我們最常碰到了的一個問題是，我們會經(jīng)常忽略那些會被確定加載的依賴項。舉例來說，如果我們創(chuàng)建了一個jQuery插件，一般認為沒有必要申報jQuery的依賴，因為它在大多數(shù)頁面都是默認裝載的。雖然這似乎適用于大多數(shù)的網(wǎng)頁，但當我們試圖進行單元測試或在一個全新的頁面加載時，它就變成一個問題。
始終聲明我們的依賴，我們就消除了JavaScript中90%的問題?？芍赜玫拇a變得更可靠，單元測試的數(shù)量增加了4倍也是一個因素。
為第三方代碼庫添加shim(墊片)
在管理JavaScript依賴時經(jīng)常碰到的一個有趣問題是，較舊的第三方庫可能無法和您的依賴關(guān)系管理系統(tǒng)配合工作。例如，你們內(nèi)部使用了jQuery的一個很酷的插件，但它對require.js一無所知。這會成為一個問題，因為第一個特點，我們來添加對這個插件的引用。
解決的辦法是通過依賴管理工具為這個插件制作一個墊片。在require.js中，這可以很容易地通過配置來完成：
var require = {
1.
"shim": {
2.
"lib/cool-plugin": {
3.
"deps": ["lib/jquery"]
4.
}
5.
}
6.
}
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.
});
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類可以安全地在許多腳本中重用。
依賴應(yīng)該異步加載
因為試圖同步加載腳本會導(dǎo)致瀏覽器鎖死，這是非常重要的，你的腳本和你的模塊應(yīng)該使用異步加載機制。
Require.js在默認情況下，所有異步加載你的模塊,只有所有的的依賴都加載完以后才會執(zhí)行你的模塊代碼的函數(shù)。
通過使用一個閉包，我們可以進一步利用“use strict”的好處。
模塊不應(yīng)依賴全局變量
為了進一步加強我們的JavaScript代碼庫，我們已經(jīng)(幾乎)完全消滅了全局變量(除了由require.js提供的全局變量，如require()和define())。全局變量是臭名昭著的潛在的進入模塊的“隱藏的依賴關(guān)系”，它會使代碼很難重用或測試。
Require.js也讓我們轉(zhuǎn)換第三方全局變量，require() - 通過墊補功能能模塊。在這個例子中，lib/calculator 創(chuàng)建一個全局的計算器對象，這個庫是被require化的。
var require = {
1.
"shim" : {
2.
"lib/calculator": {
3.
"export": "Calc"
4.
}
5.
}
6.
}
到此，相信大家對“JavaScript代碼組織結(jié)構(gòu)良好的特點有哪些”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學習！
重慶分公司
重慶分公司
