《ppk on Javascript》书中谈到Javascript的目的,Javascript其实是为web增加特别的一层可用性,我的理解Javascript的在web中的角色是增加web的易用性,让用户更好的体验web产品,开发者在设计产品时,就应该考虑到不同用户的复杂情况,例如禁用脚本的用户、盲人、手持设备用户等等。
创建可持续访问性的web,也可以如上理解,具体在开发中的细节如下:
- a链接一定有href地址,页面分离事件注册器,决绝行内时间注册(例如<a href="#" onclick="func();">)
- 有选择性的使用Javascript和CSS隐藏页面内容1
- 不用Javascript做页面跳转,否则用户使用浏览器的后腿按钮将无限制跳转,最终只能强迫用户推出页面,这样的体验真的很糟糕,我想至少我收够了这样的方式;
- 务必考虑脚本兼容主流的浏览器,招商银行的网银和之前淘宝的支付宝不支持Firefox就是例子,用户抱怨很囧
另外,记录一下以前开发中的小技巧:
当我们希望点击一个a链接,然后用一个DIV的popup容器来呈现内容而不刷新页面时,使用AJAX如果做到持续的可访问性呢?首先,来思考一下无脚本的情况下,这个a链接的地址一定是能够访问的,访问的页面应该是完整的页面(有head和foot),而不是HTML片段。然后,再思考一下有脚本情况下,我们给a链接注册一个事件func,事件func完成一个AJAX请求,把a链接的href地址通过异步获取到当前页面,并且创建一个DIV作为popup容器,那么这个popup容器内被请求的HTML不应该显示head和foot部分(HTML片段)。那么,现在的问题是,如果判断当a链接分别在有脚本、无脚本的的情况下,显示或者不显示页面的head、foot部分呢?如下:
当脚本可用时,我们在func里给a链接加上一个参数"popup":
<a href="http://www.site.com/site.php">Click</a>//页面静态地址 <a href="http://www.site.com/site.php?popup=1">Click</a>//JS给a href添加“&popup=1”
那么现在当为AJAX请求页面时,a href带有一个popup=1的参数,当无脚本时,a href无popup=1的参数,这个参数有什么用呢?popup=1这个参数可以交给服务器脚本,服务器脚本判断当页面上有popup这个值时,就不编译head和foot的HTML,没有这个popup这个值,服务器脚本就编译head和foot的值。
以上这种方法,美味书签用到很多,有兴趣的可以登录体验一下美味书签的一些操作(删除、编辑),操作方法就是禁用脚本,或者对美味书签的删除、编辑按钮用新窗口打开。
有选择性的选择JS或者CSS隐藏内容,分情况例如:JS驱动的下拉菜单,禁用脚本用户是无法浏览到被隐藏的菜单,那么菜单的隐藏内容应该用JS隐藏,当无脚本的情况下,JS隐藏菜单的功能自然也无法工作,那么禁用脚本的用户自然也可以浏览到本该隐藏的菜单列表