天下第二博

Tian Xia The Second BO
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

Unobtrusive的Web开发

Posted on 2009-12-05 14:24  Nuke'Blog  阅读(175)  评论(0编辑  收藏  举报
这是一篇旧文,下是Jesse Skinner在06年10月发表的。虽然题目是关于Ajax的,但实际上前面很大篇幅再讲什么是Unobtrusive的Web开发,而且将得也很有意思。March下面把其中的要点摘录出来翻译,分享一下。
原文地址:Unobtrusive 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>标签中

为什么要Unobtrusive

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


我的看法
Unobtrusive应该是对Web Standards的进一步深化,也可以理解为Web Standards的一个方面。但是,这种开发方式目前仍然是一种比较理想化的方式,也许在个人,或者小团队的开发中可以贯彻的很好。但是到了大型项目中,严格的执行未必是一种高效的方式。尽管代码的易维护性显而易见,但是大部分项目的前端代码不一定有维护(或者大量维护)的需求,而项目要求的更多是能够在最短时间内完成。

然而,Unobtrusive绝对是一个具有指导性的Web前端开发方式,实现得越接近,无论是对用户,还是对开发者,甚至对计算机,都会更有好处。