快捷導(dǎo)航

不唐突的JavaScript的七條準(zhǔn)則整理收集第2/2頁

更新時(shí)間：2008年10月26日 13:18:05 作者：

在開始設(shè)計(jì)你的腳本之前，要考慮的第一件事情就是檢查一下你要為其編寫腳本的HTML代碼，看看有什么東西可以幫助你達(dá)到目的。

所有的方法和屬性都可以通過使用“類名+點(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）模式：

復(fù)制代碼代碼如下:

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è)別名：

復(fù)制代碼代碼如下:

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í)行它：

復(fù)制代碼代碼如下:

(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ì)象中。

復(fù)制代碼代碼如下:

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 
}; 
}(); 