坏坏@net;Devote Attention To Programming and Internet;Now Staff For Gomye Interaction.

原文地址：Unobtrusive Ajax

对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的用户提供不同的应用