|
|
英文原文：http://icant.co.uk/articles/seven-rules-of-unobtrusive-Javascript/
1.不要做任何假設（JavaScript是一個不可靠的助手）
* 不要假設JavaScript是可用的，你最好認為它很有可能是不可用的，而不是直接依賴于它。
* 在你經(jīng)過測試確認一些方法和屬性可以使用之前，不要假設瀏覽器支持它們。
* 不要假設HTML代碼如你想象的那樣正確，每次都要進行檢查，并且當其不可用的時候就什么也不要做。
* 讓JavaScript的功能獨立于輸入設備
* 要記住其他的腳本可能會影響你的JavaScript的功能，所以要保證你的腳本的作用域盡可能地安全。
在開始設計你的腳本之前，要考慮的第一件事情就是檢查一下你要為其編寫腳本的HTML代碼，看看有什么東西可以幫助你達到目的。
2.找出鉤子和節(jié)點關系（HTML是腳本的基石）
在開始編寫腳本之前，要先看一下你要為之編寫JavaScript的HTML。如果HTML是未經(jīng)組織的或者未知的，那么你幾乎不可能有一個好的腳本編寫方案——很可能就會出現(xiàn)下面的情況：要么是會用JavaScript創(chuàng)建太多標記，要么就是應用太依賴于JavaScript。
在HTML中有一些東西需要考慮，那就是鉤子和節(jié)點關系。
<1>.HTML 鉤子
HTML最初的和最重要的鉤子就是ID，而且ID可以通過最快的DOM方法——getElementById訪問到。如果在一個有效的HTML文檔中所有的ID都是獨一無二的話（在IE中關于name 和 ID有一個bug，不過有些好的類庫解決了這個問題），使用ID就是安全可靠的，并且易于測試,而且如果直接用name來作為對象進行操作,在FF下是無效的,會報此對象未定義的錯誤。
其他一些鉤子就是是HTML元素和CSS類，HTML元素可以通過getElementsByTagName方法訪問，而在多數(shù)瀏覽器中都還不能通過原生的DOM方法來訪問CSS類。不過，有很多外部類庫提供了可以訪問CSS類名（類似于 getElementsByClassName） 的方法。
<2>.HTML 節(jié)點關系
關于HTML的另外比較有意思的一點就是標記之間的關系，思考下面的問題：
* 要怎樣才可以最容易地、通過最少的DOM遍歷來到達目標節(jié)點？
* 通過修改什么標記，可以盡可能多地訪問到需要修改的子節(jié)點？
* 一個給定的元素有什么屬性或信息可以用來到達另外一個元素？
遍歷DOM很耗資源而且速度很慢，這就是為什么要盡量使用瀏覽器中已經(jīng)在使用的技術來做這件事情。
3.把遍歷交給專家來做 （CSS，更快地遍歷DOM）
有關DOM的腳本和使用方法或?qū)傩裕╣etElementsByTagName, nextSibling, previousSibling,parentNode以及其它）來遍歷DOM似乎迷惑了很多人，這點很有意思。而有趣的是，我們其實早已經(jīng)通過另外一種技術—— 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的七條準則，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。
