您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“JavaScript代碼組織結(jié)構(gòu)良好的特點(diǎn)有哪些”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“JavaScript代碼組織結(jié)構(gòu)良好的特點(diǎn)有哪些”吧!
隨著JavaScript項(xiàng)目的成長(zhǎng),如果你不小心處理的話,他們往往會(huì)變得難以管理。我們發(fā)現(xiàn)自己常常陷入的一些問(wèn)題: 當(dāng)在創(chuàng)建新的頁(yè)面時(shí)發(fā)現(xiàn),很難重用或測(cè)試之前寫的代碼。
當(dāng)我們更深處地研究這些問(wèn)題,我們發(fā)現(xiàn)根本原因是無(wú)效的依賴管理造成的。比如,腳本A依賴腳本B,并且腳本B又依賴腳本C,當(dāng)C沒(méi)有被正確引入時(shí),整個(gè)依賴鏈就無(wú)法正常工作了。
為了解決這個(gè)問(wèn)題,我們已經(jīng)采取了異步模塊定義(AMD)的模式,并引入require.js到我們的技術(shù)堆棧。經(jīng)過(guò)對(duì)AMD的進(jìn)一步探索,我們已經(jīng)基本確定,組織嚴(yán)密的JavaScript一般都呈現(xiàn)以下五個(gè)特點(diǎn):
始終聲明我們的依賴
為第三方代碼庫(kù)添加shim(墊片) 定義跟調(diào)用應(yīng)該分離 依賴應(yīng)該異步加載 模塊不應(yīng)依賴全局變量
讓我們?cè)敿?xì)討論一下。
始終聲明我們的依賴
我們最常碰到了的一個(gè)問(wèn)題是,我們會(huì)經(jīng)常忽略那些會(huì)被確定加載的依賴項(xiàng)。舉例來(lái)說(shuō),如果我們創(chuàng)建了一個(gè)jQuery插件,一般認(rèn)為沒(méi)有必要申報(bào)jQuery的依賴,因?yàn)樗诖蠖鄶?shù)頁(yè)面都是默認(rèn)裝載的。雖然這似乎適用于大多數(shù)的網(wǎng)頁(yè),但當(dāng)我們?cè)噲D進(jìn)行單元測(cè)試或在一個(gè)全新的頁(yè)面加載時(shí),它就變成一個(gè)問(wèn)題。
始終聲明我們的依賴,我們就消除了JavaScript中90%的問(wèn)題??芍赜玫拇a變得更可靠,單元測(cè)試的數(shù)量增加了4倍也是一個(gè)因素。
為第三方代碼庫(kù)添加shim(墊片)
在管理JavaScript依賴時(shí)經(jīng)常碰到的一個(gè)有趣問(wèn)題是,較舊的第三方庫(kù)可能無(wú)法和您的依賴關(guān)系管理系統(tǒng)配合工作。例如,你們內(nèi)部使用了jQuery的一個(gè)很酷的插件,但它對(duì)require.js一無(wú)所知。這會(huì)成為一個(gè)問(wèn)題,因?yàn)榈谝粋€(gè)特點(diǎn),我們來(lái)添加對(duì)這個(gè)插件的引用。
解決的辦法是通過(guò)依賴管理工具為這個(gè)插件制作一個(gè)墊片。在require.js中,這可以很容易地通過(guò)配置來(lái)完成:
var require = {
1. <p><font size="3"> "shim": {</font></p>
2. <p><font size="3"> "lib/cool-plugin": {</font></p>
3. <p><font size="3"> "deps": ["lib/jquery"]</font></p>
4. <p><font size="3"> }</font></p>
5. <p><font size="3"> }</font></p>
6. <p><font size="3"> }</font></p>
有了這個(gè)簡(jiǎn)單的配置,每一個(gè)加載
lib/cool-plugin.js 的腳本都會(huì)自動(dòng)加載jQuery。將有助于滿足所有相關(guān)性.
最終的結(jié)果是代碼更容易測(cè)試和重用,因?yàn)槟憧偸怯幸粋€(gè)require()來(lái)調(diào)用所需的功能。
定義跟調(diào)用應(yīng)該分離
這是限制JavaScript代碼的可重用性和可測(cè)試性的一個(gè)常見(jiàn)問(wèn)題。問(wèn)題表現(xiàn)在一個(gè)單一的文件即定義了一個(gè)類/函數(shù)又調(diào)用了它??紤]下面的代碼:
## js/User.js
1. <p><font size="3"> define(functino(require) {</font></p>
2. <p><font size="3"> var User = function(name, greeter) {</font></p>
3. <p><font size="3"> this.name = name;</font></p>
4. <p><font size="3"> this.greeter = greeter;</font></p>
5. <p><font size="3"> };</font></p>
6. <p><font size="3"> User.prototype.sayHello = function() {</font></p>
7. <p><font size="3"> this.greeter("Hello, " + this.name);</font></p>
8. <p><font size="3"> };</font></p>
9. <p><font size="3"> var user = new User('Alice', window.alert);</font></p>
10. <p><font size="3"> user.sayHello();</font></p>
11. <p><font size="3"> });</font></p>
在這個(gè)例子中,一個(gè)單一的文件即定義了User類又調(diào)用它。這將很難重用這個(gè)代碼,因?yàn)橹灰虞d這個(gè)腳本就會(huì)出現(xiàn)alert。同樣greeter這個(gè)非常難以測(cè)試。
解決的辦法是保持定義和執(zhí)行的分離。這有助于確??芍赜眯院涂蓽y(cè)性:
## js/User.js
1. <p><font size="3"> define(functino(require) {</font></p>
2. <p><font size="3"> var User = function(name, greeter) {</font></p>
3. <p><font size="3"> this.name = name;</font></p>
4. <p><font size="3"> this.greeter = greeter;</font></p>
5. <p><font size="3"> };</font></p>
6. <p><font size="3"> User.prototype.sayHello = function() {</font></p>
7. <p><font size="3"> this.greeter("Hello, " + this.name);</font></p>
8. <p><font size="3"> };</font></p>
9. <p><font size="3"> return User;</font></p>
10. <p><font size="3"> });</font></p>
11. <p><font size="3"> ## js/my-page.js</font></p>
12. <p><font size="3"> define(functino(require) {</font></p>
13. <p><font size="3"> var User = require('js/User');</font></p>
14. <p><font size="3"> var user = new User('Alice', window.alert);</font></p>
15. <p><font size="3"> user.sayHello();</font></p>
16. <p><font size="3"> });</font></p>
這種變化,User類可以安全地在許多腳本中重用。
依賴應(yīng)該異步加載
因?yàn)樵噲D同步加載腳本會(huì)導(dǎo)致瀏覽器鎖死,這是非常重要的,你的腳本和你的模塊應(yīng)該使用異步加載機(jī)制。
Require.js在默認(rèn)情況下,所有異步加載你的模塊,只有所有的的依賴都加載完以后才會(huì)執(zhí)行你的模塊代碼的函數(shù)。
通過(guò)使用一個(gè)閉包,我們可以進(jìn)一步利用“use strict”的好處。
模塊不應(yīng)依賴全局變量
為了進(jìn)一步加強(qiáng)我們的JavaScript代碼庫(kù),我們已經(jīng)(幾乎)完全消滅了全局變量(除了由require.js提供的全局變量,如require()和define())。全局變量是臭名昭著的潛在的進(jìn)入模塊的“隱藏的依賴關(guān)系”,它會(huì)使代碼很難重用或測(cè)試。
Require.js也讓我們轉(zhuǎn)換第三方全局變量,require() - 通過(guò)墊補(bǔ)功能能模塊。在這個(gè)例子中,lib/calculator 創(chuàng)建一個(gè)全局的計(jì)算器對(duì)象,這個(gè)庫(kù)是被require化的。
var require = {
1. <p><font size="3"> "shim" : {</font></p>
2. <p><font size="3"> "lib/calculator": {</font></p>
3. <p><font size="3"> "export": "Calc"</font></p>
4. <p><font size="3"> }</font></p>
5. <p><font size="3"> }</font></p>
6. <p><font size="3"> }</font></p>
到此,相信大家對(duì)“JavaScript代碼組織結(jié)構(gòu)良好的特點(diǎn)有哪些”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。