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>标签中