« Mash Up the Mashup Tools
[下廚] 麻辣魚片 »
July 12th, 2007
來愛用 Unobtrusive JavaScript 吧

讓 HTML 變乾淨吧！

最近寫了一堆 JavaScript，但是卻對自己寫出來的東西感到愈來愈噁心，很怕最後會變成「再也不想去看它」的 code，所以稍微研究了一下大家都怎麼寫 JavaScript 的，才發現自己真是落後這方面的訊息太多了，才沒發現 Unobtrusive JavaScript 這樣的程式設計模式（Programming Paradigm）。

簡單用個例子來說，我們常會在 HTML element 上加入 onclick、onchange 的 handler，比方說一個要檢查一個文字輸入框內的文字，也許會這樣寫：

<input type="text" name="email" size="40" onchange="validateEmail(this)" />

然後再另外寫一個 validateEmail 的 JavaScript function，來作驗證。明明只是用來呈現頁面的 HTML 檔塞滿了 JavaScript，這樣寫多了實在很醜。所以 Unobtrusive JavaScript 教導我們，其實可以先改成這樣：

<input type="text" name="email" size="40" id="emailfield" />

為這個文字輸入框加上一個 emailfield 的 id，然後再幫這個元件加上 observer（用到 prototype.js）：

var elem = $('emailfield');
Event.observe(elem, "change", validateEmail);

同理，也可以利用 class 屬性，對一群物件來加上 observer。當然，這段 code 必須在 body 的 onload 事件之後。以下是一個參考的範例：

  • test.js 
    function validateEmail(elem) {
  // 驗證 email....
}

function init() {
  // 其它 init 的 code
  var elem = $('emailfield');
  Event.observe(elem, "change", validateEmail);
}

var oldOnload = window.onload;

if (typeof window.onload != 'function') {
  window.onload = init;
} else {
  window.onload = function() {
    oldOnload();
    init();
  }
}
  • test.html 
    <html>
<head>
  ...
  <script type="text/javascript" src="prototype.js"></script> <!-- 為了 Event -->
  <script type="text/javascript" src="test.js"></script>
  ...
</head>
<body>
  ...
  <input type="text" name="email" id="emailfield" size="40" />
  ...
</body>
</html>

    • 如此一來，就可以 HTML 歸 HTML 檔，JavaScript 就歸到 js 檔裡，才不會摻在一起作成撒尿牛丸！

文章分類: 程式設計, 資訊科學 標籤: , 本文引用網址
目前有 4 則留言
  1. Derek dai:
    2007/07/13 11:06 am

    才不會摻在一起作成撒尿牛丸！……..最後一句有跳Tone的幽默

  2. racklin:
    2007/07/13 10:19 pm

    如果是使用 jQuery 的話, 可以試試小弟的拙做 jQWebExt.
    它又可以再加強解決為純化 HTML 產生的另一個問題, 太多及太複雜的 Javascript 引用. 利用 jQWebExt, 每個 HTML 引用的 script 只有 jQWebExt, 再由 jQWebExt 中來 coding 或 require 其它 javascipt .
    http://racklin.blogspot.com/2007/05/jqwebext-021.html

  3. ericsk:
    2007/07/13 11:48 pm

    racklin:
    謝謝你的分享, 你真是個強者

  4. Zzz:
    2008/08/09 9:01 pm

    Hi,

    你的程式碼區塊設了固定的大小(如下)

    在瀏灠器使用比較大的字形時，會有一部份是看不到的.

我要留言
(必填)
(必填)