《JavaScript精粹（修訂版）》——1.5 内容和行為的隔離（謹慎地編碼）

本節書摘來自異步社群《javascript精粹（修訂版）》一書中的第1章，第1.5節，作者：【英】edwards, j. , 【澳】adams, c.著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

将内容從行為中分離，意味着按照網頁的結構分離出不同的層次來。jeffrey zeldman曾經将web開發形容為“三條腿的闆凳”1，分别是内容（html）、表示（css）、行為（javascript），他不僅指出三者在功能上的不同，同時也表明他認為這三者應該被互相隔離開來。

好的隔離方式将使得網站更容易維護，也更容易被了解和使用，同時對于老的或者支援特性較少的浏覽器也能夠提供相應的通路方式。

方 法

以下是一種極端情況，正好與理想的行為和内容互相分離的方法南轅北轍，也可以直接在事件處理屬性中寫入内嵌的代碼。但這會把頁面搞得一團糟，應該極力避免：

可以把完成這些工作的代碼寫成一個函數：

定義一個函數來做這件事可以将大量的代碼集中到一個單獨的javascript檔案中：

檔案:separate-content-behaviors.js (excerpt)

不過更好的方法是完全不使用内嵌的事件處理，而使用dom（文檔對象模型）來将事件處理綁定到html文檔的元素中。dom是一種标準的程式設計接口，它使得像javascript這樣的語言可以直接通路html文檔的内容，這也消除了出現在html文檔中的javascript代碼。html代碼如下：

<code>&lt;div id="content"&gt;</code>

javascript代碼如下：

檔案: separate-content-behaviors.js

這種方法允許增加、删除或者修改事件處理，而無需編輯html，而且，因為文檔本身完全不依賴于這些腳本，是以那些不支援javascript的浏覽器将絲毫不受影響。這種方法同時也增加了複用性，如果需要，也可以将相同的函數綁定到其他元素上，同樣也不需要編輯html。

這種方法讓我們擁有了通過dom通路元素的能力，第5章将深入探讨dom。

隔離的優點

通過将内容和行為分隔開來，不僅使代碼具有更廣泛的适用性，同時這種分而治之的思考方式也将帶來好處。因為html和javascript完全分離，當我們檢視html代碼的時候，不會忘記這個頁面需要顯示的核心内容，而這些内容應當不依賴于任何腳本。

andy clark把這種方式叫做web标準甜點2，這是一種有趣的類比，這種比喻方式認為一個好的網站設計應該是這樣的：當看過去時，應該看到組成整個甜點的不同層次。這種方式的反面是水果蛋糕，您無法看到蛋糕的不同組成部分。您所能看到的就是搞不清什麼材料的一塊整個的蛋糕。

讨 論

當把事件處理和如下的元素綁定起來的時候，需要注意，隻有在那個元素實際存在的時候才能那麼做。如果把處理腳本放到頁面的head區，浏覽器會報告發生錯誤，然後拒絕執行代碼，因為content div在這個位置還沒有被浏覽器解讀顯示，而javascript卻已經先被處理了。

最直接的方法是把代碼放到load事件進行中。這種方式最保險，因為load事件隻有在整個頁面已經完全載入的時候才會被激發：

或者更清楚一點，多寫一點代碼：

不過使用load事件的問題是，在整個頁面中隻能使用一次；如果有兩個或者更多的腳本需要通過load事件來執行，那麼每個腳本都會改寫對load事件的處理。解決方法是對load事件采用更好的響應方式，1.8節将繼續探讨這個問題。