漸進增強 Progressive Enhancement

我在大學是念非資訊科系,工作時常常是團隊的技術先行者,沒有高手可以問,所以我會的技術全部都是自學的。自學方式是自己看書,照書上的範例練習,遇到不會的就上網搜尋。按照範例學習有個缺點,不易學到基本概念。用這篇要介紹的概念寫網頁很久了,不過我是最近看書才知道,這個概念就叫做「漸進增強」。

早期網站的開發方法,是一開始使用最先進的技術來建構網站的完整功能,然後針對舊的瀏覽器測試和修復,這種策略稱為「優雅降級(Graceful Degradation)」。後來很多人發現他有很多地方不足,不斷的被質疑,包括可維護性低、對移動網頁的支援性不足等。

在2003年的SXSW會議(一個關於電影、音樂和交互的會議)中,Steve Champeon和Nick Finck做了一個名為 「面向未來的全方位Web設計」的演講。因此揭示了這種Web開發新方法的藍圖。Steve給它取名為:「漸進增強 (Progressive Enhancement)」。

「漸進增強」和「優雅降級」是相反的開發策略,是一開始只建構網站的最少特點,然後不斷針對各瀏覽器的特性追加功能。

就前端開發來說,它可以將HTML、CSS、Javascript三者分離開來,成為三層次,讓架構更具有易訪問性、程式碼可讀性和可維護性也會提升。Dave Stewart用M&M巧克力來比喻這個架構,內核的花生仁是結構層,以內容為主,其外層的巧克力外衣是表現層,最外層的糖果硬殼是行為層:
  • 結構層(HTML):用HTML來組織網站內容,這裡全部都是有意義的網站內容,不用考慮到頁面設計的問題
  • 表現層(CSS):使用CSS來編排網頁的表現樣式,並頁面設計風格
  • 行為層(JavaScript):使用Javascript實現更流暢的用戶體驗(將JavaScript分離出來的設計概念稱為Unobtrusive JavaScript)
Source: http://alistapart.com/article/understandingprogressiveenhancement

使用前端開發的漸進增加模型需要注意的地方:
  • JavaScript和CSS不要寫在HTML裡面,要用外部檔案方式呼叫,這樣才能瀏覽器被單獨緩存,不會每次存取網頁時都要重新下載
  • CSS要在HTML head裡面被呼叫
  • JavaScript要在HTML最後被呼叫,這樣網頁渲染結束後才會執行JavaScript的操作
  • 效能考量,可以用CSS做得到的效果,不要用JavaScript去實現
  • 需確保在瀏覽器關閉Javascript時,網站內容仍然能夠正常被瀏覽
在前端開發使用漸進增加模型,可以讓網站具有清晰且堅實的架構,加上容易理解,具可維護性的程式碼,讓開發工作更加輕鬆。

延伸閱讀:

相關文章

如何將電腦畫面經由 Chromecast 投放到電視螢幕上

Chrome 的檔案續傳功能

Mac與Android裝置傳輸檔案的方法

使用 Vysor 在電腦上控制 Android 裝置