英文原文：The seven rules of Unobtrusive JavaScript
原文地址：http://icant.co.uk/articles/seven-rules-of-unobtrusive-javascript/
原文
寫在前面：前一段時間 kejun 給我們培訓JavaScript的時候，在幻燈片上推薦了很多特別經典的文章，其中就有這一篇。讀過之後感覺很不錯，不過我看文章往往理解不深入，恰好這篇文章我沒有發現中文版本，所以就萌生了把這個東西翻譯過來的想法，這樣既可以分享，又可以加深自己的理解。本文的作者Chris Heilmann是 Yahoo! 英國的一位工程師（據kejun說是“教父”級的人物 ），本文的翻譯也是征得了他本人的同意的。
這裡多說一句，以前我也翻譯過不少東西，不過那時候我更多是為了翻譯而翻譯，很多技術文章都沒領悟，所以到現在還是個菜鳥。以後我還會繼續翻譯一些文章，不過應該只會翻譯那些需要仔細體會的經典文章。有時間還是要多寫代碼，實踐才是王道。
術語的翻譯：關於“Unobtrusive JavaScript”一詞，我現在也沒想到一個特別貼切的譯法。在網上搜了一下，發現有翻譯成“低調JavaScript”的，也有翻譯成“非侵入式JavaScript”的，台灣那邊有的翻譯成“不亂入JavaScript”……經過多方考證，我決定采用“不唐突的JavaScript”這種譯法（雖然這個還是不太合我心意），具體請看 這篇文章 。其實“Unobtrusive JavaScript”包含了很多意思，也很難用一個詞來概括，有興趣的可以看一下維基百科上面對“Unobtrusive JavaScript”的解釋。另外，我覺得翻譯就是要把作者的意思表達出來，而不一定非要逐字逐句翻譯，所以文章中我為了方便讀者理解，刪減了一些，增加了一些，不過這些都是在不傷害原文意思的基礎上進行的。
要說明的還有一點，那就是我翻譯水平很業余，所以譯文中難免有纰漏，還請多多指正。
不唐突的JavaScript的七條准則
經過多年的開發、教學和編寫不唐突的JavaScript， 我發現了下面的一些准則。我希望它們可以幫助你對“為什麼這樣設計和執行JavaScript比較好”有一點理解。這些規則曾經幫助我更快地交付產品，並且產品的質量更高，也更容易維護。
1.不要做任何假設
（JavaScript是一個不可靠的助手）
可能不唐突的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就是安全可靠的，並且易於測試。
其他一些鉤子就是是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選擇器取代：
var n = document.getElementById('nav');
if(n){
var as = n.getElementsByTagName('a');
if(as.length > 0){
f