頁:
[1]
Unobtrusive JavaScript
來愛用 Unobtrusive JavaScript 吧
讓 HTML 變乾淨吧!
最近寫了一堆 JavaScript,但是卻對自己寫出來的東西感到愈來愈噁心,很怕最後會變成「再也不想去看它」的 code,所以稍微研究了一下大家都怎麼寫 JavaScript 的,才發現自己真是落後這方面的訊息太多了,才沒發現 Unobtrusive JavaScript 這樣的程式設計模式(Programming Paradigm)。
簡單用個例子來說,我們常會在 HTML element 上加入 onclick、onchange 的 handler,比方說一個要檢查一個文字輸入框內的文字,也許會這樣寫:
然後再另外寫一個 validateEmail 的 JavaScript function,來作驗證。明明只是用來呈現頁面的 HTML 檔塞滿了 JavaScript,這樣寫多了實在很醜。所以 Unobtrusive JavaScript 教導我們,其實可以先改成這樣:
為這個文字輸入框加上一個 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 歸 HTML 檔,JavaScript 就歸到 js 檔裡,才不會摻在一起作成撒尿牛丸!
...<div class='locked'><em>瀏覽完整內容,請先 <a href='member.php?mod=register'>註冊</a> 或 <a href='javascript:;' onclick="lsSubmit()">登入會員</a></em></div><div></div> 這些看起來是轉載的文章,依照規定,應該使用 [轉載] 分類
並需要附上 20 字以上心得
頁:
[1]