|
不唐突的JavaScript的七條準則
經(jīng)過多年的開發(fā)、教學和編寫不唐突的JavaScript， 我發(fā)現(xiàn)了下面的一些準則。我希望它們可以幫助你對“為什么這樣設(shè)計和執(zhí)行JavaScript比較好”有一點理解。這些規(guī)則曾經(jīng)幫助我更快地交付產(chǎn)品，并且產(chǎn)品的質(zhì)量更高，也更容易維護。
1.不要做任何假設(shè)
（JavaScript是一個不可靠的助手）
可能不唐突的JavaScript 的最重要的一個特性就是——你要停止任何假設(shè)：
- 不要假設(shè)JavaScript是可用的，你最好認為它很有可能是不可用的，而不是直接依賴于它。
- 在你經(jīng)過測試確認一些方法和屬性可以使用之前，不要假設(shè)瀏覽器支持它們。
- 不要假設(shè)HTML代碼如你想象的那樣正確，每次都要進行檢查，并且當其不可用的時候就什么也不要做。
- 讓JavaScript的功能獨立于輸入設(shè)備
- 要記住其他的腳本可能會影響你的JavaScript的功能，所以要保證你的腳本的作用域盡可能地安全。
在開始設(shè)計你的腳本之前，要考慮的第一件事情就是檢查一下你要為其編寫腳本的HTML代碼，看看有什么東西可以幫助你達到目的。
2.找出鉤子和節(jié)點關(guān)系（HTML是腳本的基石）
在開始編寫腳本之前，要先看一下你要為之編寫JavaScript的HTML。如果HTML是未經(jīng)組織的或者未知的，那么你幾乎不可能有一個好的腳本編寫方案——很可能就會出現(xiàn)下面的情況：要么是會用JavaScript創(chuàng)建太多標記，要么就是應用太依賴于JavaScript。
在HTML中有一些東西需要考慮，那就是鉤子和節(jié)點關(guān)系。
<1>.HTML 鉤子
HTML最初的和最重要的鉤子就是ID，而且ID可以通過最快的DOM方法——getElementById 訪問到。如果在一個有效的HTML文檔中所有的ID都是獨一無二的話（在IE中關(guān)于name 和 ID 有一個bug，不過有些好的類庫解決了這個問題），使用ID就是安全可靠的，并且易于測試。
其他一些鉤子就是是HTML元素和CSS類，HTML元素可以通過getElementsByTagName方法訪問，而在多數(shù)瀏覽器中都還不能通過原生的DOM方法來訪問CSS類。不過，有很多外部類庫提供了可以訪問CSS類名（類似于 getElementsByClassName） 的方法。
<2>.HTML 節(jié)點關(guān)系
關(guān)于HTML的另外比較有意思的一點就是標記之間的關(guān)系，思考下面的問題：
- 要怎樣才可以最容易地、通過最少的DOM遍歷來到達目標節(jié)點？
- 通過修改什么標記，可以盡可能多地訪問到需要修改的子節(jié)點？
- 一個給定的元素有什么屬性或信息可以用來到達另外一個元素？
遍歷DOM很耗資源而且速度很慢，這就是為什么要盡量使用瀏覽器中已經(jīng)在使用的技術(shù)來做這件事情。
3.把遍歷交給專家來做（CSS，更快地遍歷DOM）
有關(guān)DOM的腳本和使用方法或?qū)傩裕╣etElementsByTagName, nextSibling, previousSibling, parentNode以及其它）來遍歷DOM似乎迷惑了很多人，這點很有意思。而有趣的是，我們其實早已經(jīng)通過另外一種技術(shù)—— CSS ——做了這些事情。
CSS 是這樣一種技術(shù)，它使用CSS選擇器，通過遍歷DOM來訪問目標元素并改變它們的視覺屬性。一段復雜的使用DOM的JavaScript可以用一個CSS選擇器取代：
var n = document.getElementById('nav');
if(n){
var as = n.getElementsByTagName('a');
if(as.length > 0){
for(var i=0;as[i];i++){
as[i].style.color = ‘#369′;
as[i].style.textDecoration = ‘none’;
}
}
}
/* 下面的代碼與上面功能一樣 */
#nav a{
color:#369;
text-decoration:none;
}
這是一個可以好好利用的很強大的技巧。你可以通過動態(tài)為DOM中高層的元素添加class 或者更改元素ID來實現(xiàn)這一點。如果你使用DOM為文檔的body添加了一個CSS類，那么設(shè)計師就很可以容易地定義文檔的靜態(tài)版本和動態(tài)版本。
JavaScript:
var dynamicClass = 'js';
var b = document.body;
b.className = b.className ? b.className + ' js' : 'js';
CSS:
/* 靜態(tài)版本 */
#nav {
....
}
/* 動態(tài)版本 */
body.js #nav {
....
}
出處：藍色理想
責任編輯：bluehearts
上一頁 不唐突的JavaScript的七條準則 [1] 下一頁 不唐突的JavaScript的七條準則 [3]
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 2 頁 不唐突的JavaScript的七條準則 [2]
