第 1 頁 Unobtrusive的Web開發(fā) [1]
第 2 頁 原文：Unobtrusive Ajax。
今天才看見的一個(gè)Presentation，是Jesse Skinner在06年10月發(fā)表的。雖然題目是關(guān)于Ajax的，但實(shí)際上前面很大篇幅再講什么是Unobtrusive的Web開發(fā)，而且將得也很有意思。下面把其中的要點(diǎn)摘錄出來翻譯，分享一下。
對(duì)Web前端進(jìn)行分層
- Web前端的分層：
- 核心思想：結(jié)構(gòu)（HTML）、表現(xiàn)（CSS）和行為 （JavaScript）
- 物理上：.html、.css和.js文件
- 概念上：各層之間，相互獨(dú)立，互不影響
- 借用MVC的思想：
- Model - HTML
- View - CSS
- Controller - JavaScript
物理上的分層
- CSS只出現(xiàn)在.css文件中，JavaScript只出現(xiàn)在.js文件中
- 在HTML中不會(huì)出現(xiàn)
onload、onclick或者style屬性 - 不使用不贊成使用的HTML，比如
font標(biāo)簽和align屬性
概念上的分層
- 內(nèi)容和表單在純HTML中（沒有CSS和JavaScript）也能夠正常顯示和使用
- 表單和鏈接在沒有JavaScript時(shí)候也能正常工作
- 只在CSS中定義表現(xiàn)，而不是在HTML或JavaScript中
- 任何人可以通過任何客戶端訪問內(nèi)容，即便是沒有CSS、JavaScript，甚至沒有鼠標(biāo)
兩種分層有何不同
- 物理分層主要使開發(fā)者受益
- 概念分層主要讓使用者受益
Unobtrusive的前端
Unobtrusive的HTML
- 使用更多的HTML標(biāo)簽
- 只將
<table>用于表格式的數(shù)據(jù) - 避免使用無意義的
<div>和<span>
Unobtrusive的CSS
- All CSS is unobtrusive
- 盡量使用可重用的
class - 將CSS放在外部.css文件中，或者
<style>標(biāo)簽中 - 最好使用
<h1>，而不是<div class="header">
Unobtrusive的Flash對(duì)象
- 用JavaScript將HTML替換成Flash
- Bobby van der Sluis的腳本（bobbyvandersluis.com）
- 將Flash的內(nèi)容同樣放在HTML中
- 如果瀏覽器支持Flash，用戶將會(huì)欣賞性感的Flash版本
- 不要在HTML中加入混亂的Flash代碼
Unobtrusive的JavaScript
- 從純HTML入手
- JavaScript只用來為HTML添彩
- 不要擺架子，測(cè)試每一個(gè)細(xì)節(jié)
- 離了JavaScript，頁面仍然能夠正常工作
- 不要使用
onclick或javascript:void(0) - 將JavaScript放在外部.js文件中，或者
<script>標(biāo)簽中
