來愛用 Unobtrusive JavaScript 吧

讓 HTML 變乾淨吧！
最近寫了一堆 JavaScript，但是卻對自己寫出來的東西感到愈來愈噁心，很怕最後會變成「再也不想去看它」的 code，所以稍微研究了一下大家都怎麼寫 JavaScript 的，才發現自己真是落後這方面的訊息太多了，才沒發現 Unobtrusive JavaScript 這樣的程式設計模式（Programming Paradigm）。
簡單用個例子來說，我們常會在 HTML element 上加入 onclick、onchange 的 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 檔裡，才不會摻在一起作成撒尿牛丸！