一個(gè)網(wǎng)站的前端由三個(gè)層構成。由XHTML構建的結構層，它包括結構化和有語(yǔ)義的標簽，以及網(wǎng)站的內容?？梢栽谶@一層之上增加一個(gè)表現層（CSS）和一個(gè)行為層（JavaScript），它們使網(wǎng)站看起來(lái)更漂亮，對用戶(hù)更友好。這三層之間應該保持嚴格的分離。打個(gè)比方來(lái)說(shuō)，應該具有這樣的可能性：可以重寫(xiě)整個(gè)表現層而完全不需要觸動(dòng)到結構層和行為層。
除了這種嚴格的分離，表現層和行為層都需要得到來(lái)自結構層的指令。它們必須知道在哪里應用樣式，在什么時(shí)候初始化行為——換句話(huà)說(shuō)：它們需要觸發(fā)器。
CSS的觸發(fā)器大家都很了解。class和id屬性使你可以完全地控制網(wǎng)站的表現。然而，通過(guò)使用內聯(lián)的樣式屬性（譯者注：指寫(xiě)在XHTML標簽中的style="..."屬性），你也可以在不使用這些觸發(fā)器的情況下工作，但這種用法是應該被強烈反對的。當你想要重新定義網(wǎng)站表現的時(shí)候，就會(huì )被迫連XHTML結構層也一起改掉。它們的出現破壞了表現和結構之間的分離。
行為層也應該可以用同樣的方式工作。通過(guò)拋棄使用內聯(lián)的事件句柄（比如onmouseover="switchImages(‘fearful‘,6,false)"），我們可以把行為和結構分開(kāi)。和CSS一樣，我們應該使用觸發(fā)器去告訴腳本在哪里部署行為。
最簡(jiǎn)單的JavaScript觸發(fā)器是id屬性。
<div id="navigation"><ul><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">Link 3</a></li></ul></div>var x = document.getElementById(‘navigation‘);if (!x) return;var y = x.getElementsByTagName(‘a(chǎn)‘);for (var i=0;i<y.length;i++)y[i].onmouseover = addBehavior; 這樣一來(lái)，這段腳本就由是否出現id="navigation"來(lái)觸發(fā)了。如果沒(méi)有id="navigation"，那么什么也不會(huì )發(fā)生（if (!x) return)；如果它出現了，那么所有被它包圍的鏈接元素（指a標簽）都會(huì )得到一個(gè)mouseover行為。這種解決方案簡(jiǎn)潔、優(yōu)雅，在所有的瀏覽器中都能工作。如果這種方法已經(jīng)能夠滿(mǎn)足你的需求，那么你就不需要再讀下去了：）
不幸的是有些情況下你不能使用id作為觸發(fā)器：
id只能在文檔中出現一次，有時(shí)候你可能想把同樣的行為加到幾個(gè)（或一組）元素之上。 我們用表單腳本來(lái)作上面兩個(gè)問(wèn)題的例子。給XHTML加上表單校驗觸發(fā)器會(huì )很實(shí)用，比如指定“這個(gè)輸入域（譯者注：文字輸入框、密碼輸入框等）是必填的”。為了實(shí)現這樣的觸發(fā)器，我們很可能得到如下的腳本：
function validateForm(){var x = document.forms[0].elements;for (var i=0;i<x.length;i++){if ([這個(gè)輸入域是必填的] && !x[i].value)// notify user of error}} 我們需要創(chuàng )建怎樣的觸發(fā)器才能告訴這個(gè)腳本哪些輸入域是必填的呢？顯然用id是不行的：理想的解決方案應該可以對一大堆輸入域起作用。很自然的我們會(huì )想到是否可以用class來(lái)觸發(fā)行為：
<input name="name" class="required" />if (x[i].className == ‘required‘ && !x[i].value)//提示用戶(hù)輸入此域 然而嚴格地說(shuō)，class屬性是用于定義CSS觸發(fā)器的。把CSS和JavaScript的觸發(fā)器合起來(lái)定義并不是不可能，但這樣做很可能使代碼變得一片混亂：
<input name="name" class="largefield required" />if (x[i].className.indexOf(‘required‘) != -1 &&!x[i].value) 依我看來(lái)，class屬性應該只能用于CSS。class是XHTML表現層的主要觸發(fā)器，如果再讓它承載行為層的信息就會(huì )使問(wèn)題變得復雜化。用class屬性同時(shí)觸發(fā)兩個(gè)層是與行為和表現分離相抵觸的，但到底怎么做還是應該由你自己視情況而定。
此外，觸發(fā)器也可以變得更復雜一些，而不僅僅是一個(gè)聲明“在這里部署（行為）”的命令。有時(shí)候你可能想給觸發(fā)器加一個(gè)變量，這樣可以使行為層變得更加通用，可以對每一個(gè)XHTML元素個(gè)體的需求作出響應，而不是傻乎乎地執行一個(gè)標準的腳本。
拿一個(gè)表單打比方，這個(gè)表單包括一些字符串長(cháng)度有上限的文本輸入框。原先的maxlength屬性已經(jīng)不再在textarea元素上工作，所以我們必須寫(xiě)個(gè)腳本來(lái)做這件事。另外，并不是這個(gè)表單里所有的文本輸入框都有相同的字符串長(cháng)度上限，所以在某個(gè)地方把它們個(gè)自的上限長(cháng)度存起來(lái)就顯得很必要了。
我們希望有這樣一個(gè)東西：
var x = document.getElementsByTagName(‘textarea‘);for (var i=0;i<x.length;i++){if ([這個(gè)文本輸入框有長(cháng)度上限])x[i].onkeypress = checkLength;}function checkLength(){var max = [讀取長(cháng)度上限的值];if (this.value.length > max)// notify user of error}這段腳本需要兩個(gè)關(guān)鍵的信息：
在這里，用基于class的方式不再合適了。雖然從技術(shù)上講不是不能做到，但是所需的代碼會(huì )變得太復雜。打個(gè)比方，我們來(lái)給一個(gè)本身就帶有一個(gè)叫“large”的class的文本輸入框加上觸發(fā)器，以便告訴腳本它是必填的，而且長(cháng)度上限是300：
<textarea class="large required maxlength=300"></textarea>這樣做不光把表現層和行為層混合在了一起，而且用于讀出這個(gè)值的腳本也會(huì )變得比較怪異：
var max = this.className.substring(this.className.indexOf(‘maxlength‘)+10);if (this.value.length > max)// 提醒用戶(hù)出錯了。 很容易就注意到這段腳本只有當我們把maxlength=x放在最后一個(gè)的時(shí)候才能工作。如果我們想讓這個(gè)腳本可以處理不是放在最后一個(gè)的maxlength=x（這種情況是常有的，比如我們想再加一個(gè)傳值的觸發(fā)器），它會(huì )變得更加復雜。
這就是我們現在面臨的問(wèn)題。如何才能添加完美的JavaScript觸發(fā)器，讓我們可以方便地把一般聲明（“在這里部署行為”）和針對元素的值一起傳給腳本？
從技術(shù)上來(lái)說(shuō)，把這些信息一起加到class屬性上是可能的，但問(wèn)題是class是被設計出來(lái)做這件事的嗎？
我轉向另一種解決方案。再來(lái)看一下前面提到的textarea長(cháng)度限制的例子。我們需要兩部分信息：
用自然、有語(yǔ)義的方式來(lái)表達這些信息需要添加一個(gè)自定義屬性給textarea：
<textarea class="large" maxlength="300"></textarea> maxlength屬性通知腳本檢查用戶(hù)輸入，并通過(guò)屬性的值把長(cháng)度上限傳給腳本。同理，我們可以把“required”觸發(fā)器也改為一個(gè)自定義屬性。比如：required="true"，無(wú)論給它賦什么值都可以，因為它只是起一個(gè)通知的作用，無(wú)須附帶任何額外的信息。
<textarea class="large" maxlength="300" required="true"></textarea> 從技術(shù)上說(shuō)，這么做沒(méi)有任何問(wèn)題。W3C DOM的 getAttribute()方法可以從任何一個(gè)標簽中讀取任意屬性的值。只有7.54版以前的Opera不允許從標簽（如 <h2>）中讀取一個(gè)錯誤的屬性（如src）。幸運的是之后的版本對 getAttribute()提供了完全的支持。
下面就是我的解決方案：
function validateForm(){var x = document.forms[0].elements;for (var i=0;i<x.length;i++){if (x[i].getAttribute(‘required‘) && !x[i].value)// notify user of error}}var x = document.getElementsByTagName(‘textarea‘);for (var i=0;i<x.length;i++){if (x[i].getAttribute(‘maxlength‘))x[i].onkeypress = checkLength;}function checkLength(){var max = this.getAttribute(‘maxlength‘);if (this.value.length > max)// notify user of error}依我看來(lái)，這種方案很容易實(shí)現，而且與JavaScript觸發(fā)器應有的形式一致：一對“變量名／值”提供了觸發(fā)器的名字和腳本所需的值，它同時(shí)允許你針對每一個(gè)元素個(gè)體定義行為。最后，這種向XHTML添加觸發(fā)器的方式對于初學(xué)者來(lái)說(shuō)也是相當簡(jiǎn)單的。
但這里又出現了另一個(gè)問(wèn)題，用這種方案制作的頁(yè)面無(wú)法通過(guò)校驗。檢驗器認為required 和 maxlength非法的。檢驗器這樣做當然是完全正確的，XHTML當中壓根就沒(méi)有前一個(gè)屬性，后一個(gè)屬性也只屬于 <input>元素。
解決方案就是讓它們合法：定義一個(gè)自定義的文檔類(lèi)型定義（Document TYpe Definition，DTD），把XHTML作一個(gè)小小的擴展，使它包含我們定義的屬性。這個(gè)自定義的DTD定義了新增的屬性以前它們應該出現的正確位置，然后校驗器就會(huì )按我們自定義的XHTML口味來(lái)校驗文檔。如果DTD說(shuō)這些屬性是正確的，那它們就是正確的。
如果你不了解如何創(chuàng )建一個(gè)的DTD，請閱讀這篇J.David Eisenberg發(fā)表的《創(chuàng )建自定義的DTD》（譯者注：看大家的意見(jiàn)再決定是否翻譯^_^），在這篇文章中他會(huì )告訴你所有你想知道的。
依我看來(lái)，用自定義屬性來(lái)觸發(fā)行為層——配合使這些屬性合法的自定義的DTD ——可以幫助我們把行為層與結構層分離，同時(shí)保持簡(jiǎn)潔的代碼和高效的腳本。此外，一旦把這些屬性和腳本定義好，即使最菜的菜鳥(niǎo)也可以方便地把觸發(fā)器加入到XHTML文檔中。
Translated with the permission of A List Apart Magazine and the author.
在A List Apart雜志和原作者的授權下翻譯。
聯(lián)系客服
