首頁 > 開發者 > JavaScript
不知道能不能將JavaScript和HTML的分離也歸結為“你必將商務邏輯由顯示中分離（thou shalt separate business logic from display）”[1] 的問題。但有HTML和CSS的分離在前面對照，它們的分離是如此地優雅，對於理想主義的小coder實在具有莫大的吸引力。
從現實的角度，也可以舉出很多方面來論證JavaScript和HTML分離的好處：網頁設計人員和JavaScript程式員可以分工合作，儘可能降低溝通成本；當某些瀏覽器禁用JavaScript的時候不至於引起錯誤，提高網站的可訪問性。
JavaScript和HTML分離的理想情況有兩種：
1. JavaScript中無HTML
無法做到。DOM生來就是給JavaScript操作HTML的。JavaScript的兩大功能：一是操作HTML，通過各種手段改變HTML頁面外觀；二是邏輯運算，隨著富用戶端的發展，JavaScript在這方面的運用也越來越多、越來越“正規”，甚至有如《JavaScript設計模式》[2]這樣的書出來。
2. HTML中無JavaScript
這兒就從“為什麼開發人員會把JavaScript代碼放到HTML中去。 ”這個問題的角度進行分析。
最常見的。為HTML的節點添加事件 。比如給一個按鈕添加事件：當點擊的時候彈出對話方塊。
（1）JavaScript和HTML緊密結合的做法：（本文所有的代碼在Firefox3.6測過）
test.html
<!DOCTYPE HTML>
<HTML>
<HEAD></HEAD>
<BODY>
<input type="button" value="click me" onclick="alert('This is a button.');"/>
</BODY>
</HTML>
（2）將散亂的JavaScript抽象到函數中的做法：
test.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript">
function showMessage(){
alert('This is a button.');
}
</script>
</HEAD>
<BODY>
<input type="button" value="click me" onclick="showMessage();"/>
</BODY>
</HTML>
（3）JavaScript函數showMessage()似乎沒必要待在.html檔案中，扔到.js中去吧：
a.js
function showMessage(){
alert('This is a button.');
}
test.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="/site_media/js/my/a.js" ></script>
</HEAD>
<BODY>
<input type="button" value="click me" onclick="showMessage();"/>
</BODY>
</HTML>
對比（1）的情況，（3）已經簡潔很多。但想象一下，對於應用型的網站，這種需要加事件的HTML節點少則幾十，多則上百，其維護和更新無論是對網頁設計人員還是JavaScript開發人員都是一個沉重的負擔。那如何才能將各節點上的onclick事件也“隱藏”起來。
來看看這些onclick的原理。當瀏覽器解析test.html的時候，遇到input按鈕節點中有onclick的聲明，則在對應的DOM樹上加入此事件。因此當頁面載入完畢後，一旦點擊此按鈕，對應的事件就可以被觸發而彈出對話方塊。
一旦我們去除input上的onclick，
（4）首先，要在另外一個地方聲明input的onclick事件，即a.js中的attachEvents()函數。
a.js
function attachEvents(){
document.getElementById("input1").onclick = showMessage;
}
function showMessage(){
alert('This is a button.');
}
但是，要怎麼在HTML載入的時候觸發attachEvents()呢，要知道，瀏覽器是不會主動執行.js中的JavaScript代碼的。JavaScript代碼需要放在HTML中，這樣瀏覽器解析HTML時會執行包含的JavaScript代碼。
可是我們並不想把attachEvents()函數放回到test.html中去，那就必須用到某些HTML與JavaScript的“關聯”手段，而且這種關聯必須在HTML中完成。
這種關聯也是“為什麼開發人員會把JavaScript代碼放到HTML中去。”問題的一種原因。也就是在頁面生命週期中的某些時刻觸發特定的JavaScript語句/函數 。用的最多的就是在頁面載入完畢時對相關資源進行初始化，也就是window.onload。上面的例子，我們打算將attachEvents()函數放到HTML載入完成後執行，即：
test.html
<!DOCTYPE HTML>
<HTML>
<HEAD>
<script type="text/javascript" src="/site_media/js/my/a.js" ></script>
</HEAD>
<BODY>
<input id="input1" type="button" value="click me"/>
<script type="text/javascript">
window.onload = attachEvents;
</script>
</BODY>
</HTML>
注意，這兒JavaScript對input節點的操作是通過屬性id來進行的。因此不需要在節點上顯式地加入onclick屬性和相應的JavaScript代碼。這樣，無論有多少節點需要加事件，都可以只修改a.js中的attachEvents()函數而不用管HTML頁面。
另外，JavaScript對HTML節點的訪問除了id之外還有其他方式。但對於事件關聯，用的最多的還是id。因此網頁設計人員在寫HTML時，對有可能關聯事件的節點添加id屬性也是一個很好的習慣。
結論
理論上來說，除了<head>中包含.js檔案的引用，以及在合適的地方添加類似window.onload的關聯手段觸發JavaScript代碼的執行之外，其他形式的JavaScript混入HTML應該都可以避免。
當然，實際情況會比本文例子中的情況複雜得多，但上面的結論也可以作為參考，讓JavaScript和HTML的分離更加理想。
參考文獻
[1] Parr, T.J., Enforcing Strict Model-view Separation in Template Engines. WWW ’04: Proceedings of the 13th international conference onWorldWideWeb, New York, NY, USA, ACM Press (2004) 224–233, http://www.cs.usfca.edu/~parrt/papers/mvc.templates.pdf
[2] JavaScript設計模式, http://book.douban.com/subject/3329540/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
