Unobtrusive JavaScript 1

相信一定很多人沒聽過標題的這兩個名詞吧,這是我最近在做教材時所要講的主題之一。

Unobtrusive JavaScript 2

Unobtrusive JavaScript其實是一種將JavaScript與HTML結構分離的概念,基本上就是把JavaScript寫在js檔裡面,HTML結構當然就是寫在htm檔裡面。

我想大家一定都犯過以上三種寫JavaScript的錯誤吧,第一種是最不好的寫法,這個我就不多敘述了。至於第二和第三種把onclick event寫在HTML裡面,在閱讀程式碼的時候實在是很不舒服,就跟把CSS直接寫在style屬性一樣的意思,而且也沒有符合Unobtrusive JavaScript的概念。

Unobtrusive JavaScript 3

最好的方法就是像上面這張投影片一樣,完全把JavaScript和HTML分離,利用window.onload之類的函式將要執行的動作放在裡面。這時候也帶來了一個好處,叫做Graceful Degradation。這個意思就是當你在使用某項功能時,由於你的機器太舊了不能完整的呈現這個功能,但是這並不影響你使用的結果,看投影片就知道意思了。

HTML和js的最終執行結果,都是會開啟一個叫做terms.html的網頁,但若是你的瀏覽器太舊或是關閉了JavaScript功能,雖然也是會開啟terms.html,可是就少了控制長寬和隱藏toolbar的功能。不過你覺得這些功能會影響你觀看terms.html嗎?如果是我的話,我倒覺得沒有這些功能還好一點咧 XDDD。這也就是Graceful Degradation的用意囉!

參考資料:
Unobtrusive JavaScript - Wikipedia, the free encyclopedia
Fault-tolerant system - Wikipedia, the free encyclopedia
arrow
arrow
    全站熱搜

    kewang 發表在 痞客邦 留言(0) 人氣()