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