來愛用 Unobtrusive JavaScript 吧

讓 HTML 變乾淨吧!

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

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

[code lang="xml"][/code]

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

[code lang="xml"][/code]

為這個文字輸入框加上一個 emailfield 的 id,然後再幫這個元件加上 observer(用到 prototype.js):

[code lang="javascript"]
var elem = $('emailfield');
Event.observe(elem, "change", validateEmail);
[/code]

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

  • test.js
    [code lang="javascript"]
    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();
    }
    }
    [/code]

  • test.html
    [code lang="xml"]


    ...


    ...


    ...

    ...


    [/code]
  • 如此一來,就可以 HTML 歸 HTML 檔,JavaScript 就歸到 js 檔裡,才不會摻在一起作成撒尿牛丸!

  • Derek dai

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

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

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

  • Zzz

    Hi,

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

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