不唐突的JavaScript的七條準(zhǔn)則整理收集
所有的方法和屬性都可以通過(guò)使用“類(lèi)名+點(diǎn)操作符”的方式從外部和內(nèi)部訪問(wèn)到。
var myScript = {
nav:document.getElementById('nav'),
init:function(){
myScript.show();
if(myScript.nav.className === 'show'){
myScript.reset();
}
// do stuff
},
show:function(){
var c = myScript.nav.className;
// do stuff
},
reset:function(){
// do stuff
}
}
這種模式的缺點(diǎn)就是,你每次從一個(gè)方法中訪問(wèn)其它方法或?qū)傩远急仨氃谇懊婕由蠈?duì)象的名字,而且對(duì)象中的所有東西都是可以從外部訪問(wèn)的。如果你只是想要部分代碼可以被文檔中的其他腳本訪問(wèn),可以考慮下面的模塊(module)模式:
var myScript = function(){
//這些都是私有方法和屬性
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
//公有的方法和屬性被使用對(duì)象語(yǔ)法包裝在return 語(yǔ)句里面
return {
public:function(){
},
foo:'bar'
}
}();
你可以使用和前面的代碼同樣的方式訪問(wèn)返回的公有的屬性和方法,在本示例中可以這么訪問(wèn):myScript.public() 和 myScript.foo 。但是這里還有一點(diǎn)讓人覺(jué)得不舒服:當(dāng)你想要從外部或者從內(nèi)部的一個(gè)私有方法中訪問(wèn)公有方法的時(shí)候,還是要寫(xiě)一個(gè)冗長(zhǎng)的名字(對(duì)象的名字可以非常長(zhǎng))。為了避免這一點(diǎn),你需要將它們定義為私有的并且在return語(yǔ)句中只返回一個(gè)別名:
var myScript = function(){
// 這些都是私有方法和屬性
var nav = document.getElementById('nav');
function init(){
// do stuff
}
function show(){
// do stuff
// do stuff
}
function reset(){
// do stuff
}
var foo = 'bar';
function public(){
}
return {
public:public,
foo:foo
}
}();
這就保證了代碼風(fēng)格一致性,并且你可以使用短一點(diǎn)的別名來(lái)訪問(wèn)其中的方法或?qū)傩浴?
如果你不想對(duì)外部暴露任何的方法或?qū)傩?,你可以將所有的代碼封裝到一個(gè)匿名方法中,并在它的定義結(jié)束后立刻執(zhí)行它:
(function(){
// these are all private methods and properties
var nav = document.getElementById('nav');
function init(){
// do stuff
show(); // 這里不需要類(lèi)名前綴
}
function show(){
// do stuff
}
function reset(){
// do stuff
}
})();
對(duì)于那些只執(zhí)行一次并且對(duì)其它函數(shù)沒(méi)有依賴的代碼模塊來(lái)說(shuō),這種模式非常好。
通過(guò)遵循上面的那些規(guī)則,你的代碼更好地為用戶工作,也可以使你的代碼在機(jī)器上更好地運(yùn)行并與其他開(kāi)發(fā)者的代碼和睦相處。不過(guò),還有一個(gè)群體需要考慮到。
7.為接手的開(kāi)發(fā)者考慮
(使維護(hù)更加容易)
使你的腳本真正地unobtrusive的最后一步是在編寫(xiě)完代碼之后仔細(xì)檢查一遍,并且要照顧到一旦腳本上線之后要接手你的代碼的開(kāi)發(fā)者??紤]下面的問(wèn)題:
* 所有的變量和函數(shù)名字是否合理并且易于理解?
* 代碼是否經(jīng)過(guò)了合理的組織?從頭到尾都很流暢嗎?
* 所有的依賴都顯而易見(jiàn)嗎?
* 在那些可能引起混淆的地方都添加了注釋嗎?
最重要的一點(diǎn)是:要認(rèn)識(shí)到文檔中的HTML和CSS代碼相對(duì)于JavaScript來(lái)說(shuō)更有可能被改變(因?yàn)樗鼈冐?fù)責(zé)視覺(jué)效果)。所以不要在腳本代碼中包含任何可以讓終端用戶看到的class和ID,而是要將它們分離出來(lái)放到一個(gè)保存配置信息的對(duì)象中。
myscript = function(){
var config = {
navigationID:'nav',
visibleClass:'show'
};
var nav = document.getElementById(config.navigationID);
function init(){
show();
if(nav.className === config.visibleClass){
reset();
};
// do stuff
};
function show(){
var c = nav.className;
// do stuff
};
function reset(){
// do stuff
};
}();
這樣維護(hù)者就知道去哪里修改這些屬性,而不需要改動(dòng)其他代碼。
相關(guān)文章
echarts實(shí)現(xiàn)晶體球面投影的實(shí)例教程
這篇文章主要給大家介紹了關(guān)于echarts實(shí)現(xiàn)晶體球面投影的相關(guān)資料,文中介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10javascript中節(jié)點(diǎn)的最近的相關(guān)節(jié)點(diǎn)訪問(wèn)方法
parentNode——父節(jié)點(diǎn);firstChild——第一個(gè)子節(jié)點(diǎn);lastChild——最后一個(gè)子節(jié)點(diǎn);previousSibling——緊挨著的前面的兄弟節(jié)點(diǎn);這樣就可以作短途旅行,訪問(wèn)當(dāng)前節(jié)點(diǎn)的某些相關(guān)節(jié)點(diǎn),感興趣的你可以參考下哈2013-03-03淺析JavaScript定時(shí)器setTimeout的時(shí)延問(wèn)題
這篇文章主要為大家詳細(xì)介紹了JavaScript中定時(shí)器setTimeout有最小時(shí)延的相關(guān)知識(shí),文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-11-11javascript數(shù)組常見(jiàn)操作方法實(shí)例總結(jié)【連接、添加、刪除、去重、排序等】
這篇文章主要介紹了javascript數(shù)組常見(jiàn)操作方法,結(jié)合實(shí)例形式總結(jié)分析了javascript數(shù)組的連接、添加、刪除、去重、排序等操作,代碼注釋附帶較為詳細(xì)的說(shuō)明,需要的朋友可以參考下2019-06-06原生JS實(shí)現(xiàn)圖片懶加載之頁(yè)面性能優(yōu)化
在項(xiàng)目開(kāi)發(fā)中,我們往往會(huì)遇到一個(gè)頁(yè)面需要加載很多圖片的情況。這篇文章主要介紹了頁(yè)面性能優(yōu)化原生JS實(shí)現(xiàn)圖片懶加載 ,需要的朋友可以參考下2019-04-04基于Javascript實(shí)現(xiàn)文件實(shí)時(shí)加載進(jìn)度的方法
不知道大家有沒(méi)有發(fā)現(xiàn)在現(xiàn)在的移動(dòng)頁(yè)面上,有很多情況需要加載大量的資源。但是移動(dòng)端的訪問(wèn)速度和pc還是有很大的差距,有些時(shí)候需要一些取巧的方式來(lái)提升用戶體驗(yàn),而實(shí)時(shí)顯示加載進(jìn)度就是其中一種。這篇文章就給大家分享了Javascript實(shí)現(xiàn)文件實(shí)時(shí)加載進(jìn)度的方法。2016-10-10JavaScript實(shí)現(xiàn)隨機(jī)數(shù)生成器(去重)
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)隨機(jī)數(shù)生成器,生成不重復(fù)的隨機(jī)數(shù),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10js使用split函數(shù)按照多個(gè)字符對(duì)字符串進(jìn)行分割的方法
這篇文章主要介紹了js使用split函數(shù)按照多個(gè)字符對(duì)字符串進(jìn)行分割的方法,實(shí)例分析了split函數(shù)的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03