Unobtrusive的Web开发(2)
作者:March 来源:三月的蚁穴 发布时间:2007-11-23 13:13:00
为什么要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的用户提供不同的应用
我的看法
Unobtrusive应该是对Web Standards的进一步深化,也可以理解为Web Standards的一个方面。但是,这种开发方式目前仍然是一种比较理想化的方式,也许在个人,或者小团队的开发中可以贯彻的很好。但是到了大型项目中,严格的执行未必是一种高效的方式。尽管代码的易维护性显而易见,但是大部分项目的前端代码不一定有维护(或者大量维护)的需求,而项目要求的更多是能够在最短时间内完成。
然而,Unobtrusive绝对是一个具有指导性的Web前端开发方式,实现得越接近,无论是对用户,还是对开发者,甚至对计算机,都会更有好处。
猜你喜欢
- 学习目的 学会SQL中的占位符用法 在鲸鱼这几天忙死了,好几天没写了,真对不起各位。这几天让XHTML闹得不开心,虽然以前也知道这个,但没太
- 出差到了中国雅虎,这里的风格和淘宝很不一样。和雅虎一比,淘宝的办公环境就是个菜市场,闹哄哄,到处是人,在走道里狂奔乱窜,在每个会议室争得面红
- 目前,各大搜索引擎如google、百度、雅虎已经对动态页面诸如asp,php有着不错的支持了,只要动态页面后面的参数不要太长,如控制在3个参
- 我设了两个SESSION:SESSION(A1),SESSION(A2),然后我现在想结束其中一个SESSION(如:ESEEION(A1)
- 数据库并行访问,也就是两个或两以上用户同时访问同一数据,这也是数据库引擎如何设计和实现适度反应所面临的最大问题。设计优良、性能卓越的数据库引
- 此文章主要向大家讲述的是SQL Server数据库的分布式数据库系统的实际目标,通俗的讲就是研制分布式数据库系统的目的、动机,其中主要包括的
- 惊现!表面下的隐藏信息——浅谈信息可视化1910年,病卧床上的魏格那(德国气象学家,以“大陆漂移学说”闻名),无意地注视着墙上的世界地图……
- 经常到这来抄抄改改代码,也贡献一个代码,主要是讨论研究用,没有封装可以进一步改进<!DOCTYPE html PUBLIC "
- 在数据库查询的时候,我们有时有这样的需求,就是要找出数据表里指定范围行内的数据记录,比如说要找出数据表里第10行到第20行的这10条数据,那
- 阅读上一篇教程:WEB2.0网页制作标准教程(7)CSS学习入门 CSS布局与传统表格(table)布局最大的区别在于:原来的定位都是采用表
- 出现这样的问题是当你浏览UTF-8编码的时候,服务器默认用UTF-8的引擎来输出html,当你用再浏览GB2312的页面时,它还是用UTF-
- 这篇论坛文章详细的讲解了使用SQL Server 2008管理非结构化数据的具体方法,更多内容请参考下文:microsoft SQL Ser
- 在 asp 应用中,经常用到 Session 对象来保存用户临时私有数据,而 asp 的 Session 对象是依赖于浏览器的 Cookie
- 前言:项目的成就感来源于大家~~必须先感谢一切该感谢的人!(旁白:写了很多次设计实录分享,这次是最百感交集的一次,话多这习惯还大家海涵~嘻嘻
- 简单方法实现网页自动适应任何分辨率任何窗口大小(只适用于IE)<!DOCTYPE html PUBLIC "-//W3C//
- 如何利用网页弹出各种形式的窗口,我想大家大多都是知道些的,但那种多种多样的弹出式窗口是怎么搞出来的,我们今天就来学习一下:推荐:网页弹出窗口
- CSS制作滑动折叠的文字效果,可以用于二级导航菜单的制作,不错的下拉菜单。<!DOCTYPE html PUBLIC "-/
- 写了个JavaScript版的DateAdd、DateDiff、IsDate函数,大家评评!需要说明的是,JavaScript中IsDate
- javascript 代码实现vbscript中的trim、left、right等函数兼容IE,FireFox。<style>b
- 如何让图片自动缩放以适合界面大小,拿出你的Editplus,打开c_function.asp文件,找到UBBCode函数,在第417行有如下