Unobtrusive的Web开发

原文：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>标签中