原文：unobtrusive ajax。

今天才看見的一個presentation，是jesse skinner在06年10月發表的。雖然題目是關于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>標簽中