轉帖已經過譯者同意.^^ 如有興趣轉二手的朋友記得把原文地址跟翻譯地址也加入其中..
這是一篇舊文，下是Jesse Skinner在06年10月發表的。雖然題目是關於Ajax的，但實際上前面很大篇幅再講什麼是Unobtrusive的Web開發，而且將得也很有意思。March下面把其中的要點摘錄出來翻譯，分享一下。 原文地址：Unobtrusive Ajax 翻譯地址：Unobtrusive的Web開發
對Web前端進行分層
- Web前端的分層：
- 核心思想：結構（HTML）、表現（CSS）和行為 （JavaScript）
- 物理上：.html、.css和.js檔案
- 概念上：各層之間，相互獨立，互不影響
- 借用MVC的思想：
- Model - HTML
- View - CSS
- Controller - JavaScript
物理上的分層
- CSS只出現在.css檔案中，JavaScript只出現在.js檔案中
- 在HTML中不會出現onload、onclick或者style屬性
- 不使用不贊成使用的HTML，比如font標籤和align屬性
概念上的分層
- 內容和表單在純HTML中（沒有CSS和JavaScript）也能夠正常顯示和使用
- 表單和連結在沒有JavaScript時候也能正常工作
- 只在CSS中定義表現，而不是在HTML或JavaScript中
- 任何人可以通過任何用戶端訪問內容，即便是沒有CSS、JavaScript，甚至沒有滑鼠
兩種分層有何不同
- 物理分層主要使開發人員受益
- 概念分層主要讓使用者受益
Unobtrusive的前端 Unobtrusive的HTML
- 使用更多的HTML標籤
- 只將<table>用於表格式的資料
- 避免使用無意義的<div>和<span>
Unobtrusive的CSS
- All CSS is unobtrusive
- 盡量使用可重用的class
- 將CSS放在外部.css檔案中，或者<style>標籤中
- 最好使用<h1>，而不是<div class="header">
Unobtrusive的Flash對象
- 用JavaScript將HTML替換成Flash
- Bobby van der Sluis的指令碼（bobbyvandersluis.com）
- 將Flash的內容同樣放在HTML中
- 如果瀏覽器支援Flash，使用者將會欣賞性感的Flash版本
- 不要在HTML中加入混亂的Flash代碼
Unobtrusive的JavaScript
- 從純HTML入手
- JavaScript只用來為HTML添彩
- 不要擺架子，測試每一個細節
- 離了JavaScript，頁面仍然能夠正常工作
- 不要使用onclick或javascript:void(0)
- 將JavaScript放在外部.js檔案中，或者<script>標籤中
為什麼要Unobtrusive
- 首先，這不是必須的
- 大部分開發人員都沒有在用
- 一些比較值得一提的例子：
- Google Maps (maps.google.com)
- TWERQ (twerq.com)
- Marlboro (marlboro.com)
Unobtrusive開發的優勢
- 代碼更佳簡潔，並且易於維護
- 易讀和易懂意味著更容易修改
- 修改全部的樣式僅僅需要修改CSS檔案
- JavaScript能夠很容易的修改
- HTML的修改變得更加保險
- 能夠提高可訪問性（accessibility）
- 可訪問性意味著所有人都可以訪問你的內容
- 你不能揣測所有人
- 但你可以肯定的是所有瀏覽器都能夠處理HTML
- 大約10%的訪問者是不能夠使用JavaScript功能（www.w3schools.com/browsers/browsers_stats.asp）
- 有些人使用的是螢幕助讀程式，有些人無法使用滑鼠
- 有利於搜尋引擎最佳化
- 搜尋爬蟲無法解釋CSS和JavaScript
- 搜尋爬蟲只會順著<a>繼續爬行
- JavaScript和Flash中的內容無法被搜尋到
- 更多的內容，更結構化的HTML，使得頁面相關性更高
不過有時，不得不使用JavaScript
- 當然，離了JavaScript，JavaScript遊戲肯定無法運行
- 很多Web統計服務的指令碼依賴於JavaScript
- Google Ads需要JavaScript
- 對於Unobtrusive，只要盡量做到就好了
如何進行Unobtrusive的開發 不要去問別人，直接去做 從沒有JavaScript開始入手
- 使用帶有連結和表單的純HTML
- 使用CSS來實現hover和滾動效果
- 使用HTTP的功能（比如用”Location”頭來轉向）
重視連結
- 頁面上的所有連結，離了JavaScript都應該能夠正常工作
- 這也意味著不使用javascript:偽協議
- 甚至不要使用<a href="#">
- 如果有連結一定要使用JavaScript，那麼就用JavaScript來把連結添加到頁面中
為CSS和JavaScript提供hook
- 給一個頁面中唯一的元素加上ID
- 給重複使用的元素加上class
- 使用列表等其他有語義的結構
使用可靠的技術
- 從純HTML和CSS開始
- 動態為連結和表單添加進階互動功能
- 同時通過HTML和JSON/XML兩種方式提供內容
- 為有或沒有JavaScript的情況提供額外的CSS
- 為有JavaScript和無JavaScript的使用者提供不同的應用
我的看法 Unobtrusive應該是對Web Standards的進一步深化，也可以理解為Web Standards的一個方面。但是，這種開發方式目前仍然是一種比較理想化的方式，也許在個人，或者小團隊的開發中可以貫徹的很好。但是到了大型項目中，嚴格的執行未必是一種高效的方式。儘管代碼的易維護性顯而易見，但是大部分項目的前端代碼不一定有維護（或者大量維護）的需求，而項目要求的更多是能夠在最短時間內完成。
然而，Unobtrusive絕對是一個具有指導性的Web前端開發方式，實現得越接近，無論是對使用者，還是對開發人員，甚至對電腦，都會更有好處。
