英文原文：http://icant.co.uk/articles/seven-rules-of-unobtrusive-Javascript/

1.不要做任何假設（JavaScript是一個不可靠的助手）

    * 不要假設JavaScript是可用的，你最好認為它很有可能是不可用的，而不是直接依賴于它。
    * 在你經過測試確認一些方法和屬性可以使用之前，不要假設瀏覽器支持它們。
    * 不要假設HTML代碼如你想象的那樣正確，每次都要進行檢查，并且當其不可用的時候就什么也不要做。
    * 讓JavaScript的功能獨立于輸入設備
    * 要記住其他的腳本可能會影響你的JavaScript的功能，所以要保證你的腳本的作用域盡可能地安全。

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

2.找出鉤子和節點關系（HTML是腳本的基石）

在開始編寫腳本之前，要先看一下你要為之編寫JavaScript的HTML。如果HTML是未經組織的或者未知的，那么你幾乎不可能有一個好的腳本編寫方案——很可能就會出現下面的情況：要么是會用JavaScript創建太多標記，要么就是應用太依賴于JavaScript。

在HTML中有一些東西需要考慮，那就是鉤子和節點關系。

<1>.HTML 鉤子

HTML最初的和最重要的鉤子就是ID，而且ID可以通過最快的DOM方法——getElementById訪問到。如果在一個有效的HTML文檔中所有的ID都是獨一無二的話（在IE中關于name 和 ID有一個bug，不過有些好的類庫解決了這個問題），使用ID就是安全可靠的，并且易于測試,而且如果直接用name來作為對象進行操作,在FF下是無效的,會報此對象未定義的錯誤。

其他一些鉤子就是是HTML元素和CSS類，HTML元素可以通過getElementsByTagName方法訪問，而在多數瀏覽器中都還不能通過原生的DOM方法來訪問CSS類。不過，有很多外部類庫提供了可以訪問CSS類名（類似于 getElementsByClassName） 的方法。

<2>.HTML 節點關系

關于HTML的另外比較有意思的一點就是標記之間的關系，思考下面的問題：

    * 要怎樣才可以最容易地、通過最少的DOM遍歷來到達目標節點？
    * 通過修改什么標記，可以盡可能多地訪問到需要修改的子節點？
    * 一個給定的元素有什么屬性或信息可以用來到達另外一個元素？

遍歷DOM很耗資源而且速度很慢，這就是為什么要盡量使用瀏覽器中已經在使用的技術來做這件事情。

3.把遍歷交給專家來做 （CSS，更快地遍歷DOM）

有關DOM的腳本和使用方法或屬性（getElementsByTagName, nextSibling, previousSibling,parentNode以及其它）來遍歷DOM似乎迷惑了很多人，這點很有意思。而有趣的是，我們其實早已經通過另外一種技術—— CSS——做了這些事情。

CSS 是這樣一種技術，它使用CSS選擇器，通過遍歷DOM來訪問目標元素并改變它們的視覺屬性。一段復雜的使用DOM的JavaScript可以用一個CSS選擇器取代：
JS代碼

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

        

        
        
      
        
it知識庫：不唐突的JavaScript的七條準則，轉載需保留來源！
        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。