前端er是否忽略了某些东西?——读《ppk谈JavaScript》

关于书

  “不知道ppk的网站QuirksMode,说明你可能还没有真正成为资深的JavaScript程序员。”

——Roger Johansson,瑞典资深Web专家。

  ppk是世界级前端技术专家,Web标准的布道者,在《ppk on JavaScript》中,他向读者介绍了JavaScript这门流行语言。

  这本书从第五章开始依次介绍了JavaScript Core,BOM,DOM,和Ajax(XMLHttpRequest)。整本书通读下来后,发现ppk重点关注原生API在各浏览器下的兼容性,但是限于篇幅,《JavaScript高级程序设计》这本书可能做的更加出色。然而与其它书籍不同的是,网站的可访问性被ppk作为重要论点写在了这本书中,这也是它另人印象深刻的原因所在。

重要论点:网站的可访问性

  可访问性是指你的网页对任何人、在任何环境下都是可以可持续访问的。特别是某些用户,他们被迫忍受着一些无法改变的状况,如弱视、浏览器不能(或不充分)支持JavaScript等。

  ppk在书的开端点题,强调网页的可访问性,在结尾甚至一度作出“Ajax炒作必将终结,JavaScript用途将被重新定义”的预言。 可谓是首尾呼应,论点突出啊!

  ppk在书中举了一些例子向我们介绍可访问性:

  1.链接必须有href(p33)。

<a href="#" onclick="showPopup(‘niceimage.jpg‘)">Nice Image!</a>

  当一个无脚本用户点击这个链接时,什么也不会发生,因此这个页面不具备可访问性。相反,

<a href="niceimage.jpg" id="nice">Nice Image!</a>
document.getElementById(‘nice‘).onclick=function(){
    showPopup(this.href);
}

  这样的编写形式不仅进行了行为与结构的分离,还保持了页面的可访问性。

  类似的,当一个超链接并非链接到一个资源,而是为了触发脚本时,很多人会这样写:

<a href="javascript:void(0)" onclick="doSomething();">Do Something</a>
或
<a href="javascript:doSomething()">Do Something</a>

  当一个禁用了脚本的用户点击这个链接时,什么事也不会发生。这个时候ppk建议我们使用DOM生成这种超链接,假如用户禁用了脚本,那么他根本不会看到这些链接,也不会带来"为什么我点击了却没反应"这种困惑了。

  总之,对超链接的href来说,要不就让它包含一个URL地址以便那些禁用脚本的用户可以继续访问,要不就由JavaScript来生成这个链接。

  2.用JavaScript隐藏内容(p34)

  以表单提交为例,借助选择性呈现的表单元素,可以提高页面的易用性。根据用户的前一个选择,来决定接下来呈现的表单元素,而不是将所有的元素一股脑地呈现出来。我们的一般思路是将这些选择性呈现的元素用CSS隐藏,然后用脚本监听用户行为,符合操作条件后改变样式,将隐藏元素显示出来。不难想象,一个禁用了脚本的用户将永远无法看到这些隐藏的表单元素。

  ppk建议使用JavaScript隐藏这些选择性呈现的元素,而非CSS。这样当脚本被禁用时,它们就不会隐藏,可访问性被完整地保持下来。

  3.可点击的元素(p36)

  依赖键盘的Tab操作,可以使页面元素切换焦点。浏览器默认的可获得键盘焦点的元素只有链接、表单域和按钮。以下拉菜单为例,它使用mouseover事件来触发下拉菜单,为了保持键盘用户的可访问性,还需要为其添加一个focus事件监听,然后,为了触发focus事件,键盘用户必须可以把焦点落到下拉菜单上。如果做不到这点,那么脚本仍然是不可访问的。ppk建议任何键盘友好的事件或脚本都应该被设置在链接、表单和按钮上。

  注:tabindex用来控制用户使用tab键导航时的顺序,使tabindex等于负值,例如tabindex="-1",可以使div等不能获焦的元素监听和触发onfous事件,但无法使用Tab键获取键盘焦点。使tabindex等于正值,div既可触发onfocus,也可使用tab键导航。

  “JavaScript的目标都围绕着酷炫的技术,而不是可用性”,这是在JavaScript历史中反复出现的情况。DHTML带来铺天盖地的弹窗广告、闪烁而不友好的动画,一度使JavaScript声名狼藉。如今Ajax的盛行再次掀起了人们对技术的追捧,人们往往围绕着如何实现Ajax,如何使用Ajax做一些酷炫的事情,而很少有人关注可用性和交互问题,即为什么要用Ajax?ppk相信,Ajax最终会像DHTML那样终结:人们会完全对它失去兴趣,而它将会原形毕露,只是少量的JavaScript和大量的空话。他希望JavaScript开发者们可以学到很酷的代码、花哨的库或框架背后的东西——使它们的行为都基于脚本运行环境。

我的看法

  《ppk on JavaScript》这本书写于2006年,那是个Ajax浪潮大爆发的年代,对待一个充满诱惑力的技术,ppk仍然能够不失理智地去剖析其中可能存在的问题,他的钻研和质疑精神无疑是QuirksMode成功的重要原因。"JavaScript用来做什么?“已经没有人去回答了,前端帝国日渐壮大,服务器变为一个“数据源”,JSON和Node.js的诞生加剧了这种变化。前端可以实现的功能越来越多,它的作用作用越来越大,代码量也越来越大,如果不进行模块化,势必会加剧码农编程的痛苦, 于是各种MVC,MVVM框架,各种模块化规范开始盛行。

  我们是否如ppk所说,忽略了网页的可用性?天猫,一个电子商务网站,离开了JavaScript,将无法完成任何一笔订单。一些依赖JS库组装的网站甚至连页面结构都呈现不出来。

  但是,没办法。图片过多,结构过于复杂,DOM树过于庞大,一次加载完用户体验过于的差。当人们发现JavaScript和Ajax可以解决这些矛盾时,自然会拼命抓住这棵救命稻草。至于未来庞大的前端帝国是否会坍塌,JavaScript的用途是否会被重新定义,没人可以预料。然而,并不是说ppk的说法是错的,DOM和Ajax的的确确滥用充斥在互联网中,类似天猫,百度地图这种互联网应用理所当然可以依赖它们,但是像新闻类、门户类、公司主页等网站都盲目跟风,依赖于Ajax来呈现内容,这无疑应该引起深刻思考。

  不管怎么说,如今只会验证个表单,写个DOM操作的程序员已经满足不了时代的需求了,当全世界都在喝咖啡时,你还在考虑为什么大家都喝咖啡,而不是喝可乐,无疑有点可笑了,不过这个碎碎念留在饭后还是不错,万一真理真的掌握在少数人手中呢?比如,ppk。

  最后,附上书的照片一张。

  (完)

时间: 2024-08-06 16:06:24

前端er是否忽略了某些东西?——读《ppk谈JavaScript》的相关文章

CSS+DIV——前端er必备基础

B/S真是一个长见识的阶段,认识了很多前端必备的语言,随着时间的增加,本以为新闻发布系统中学到的那些我还不知道是什么的东西,会早已没了印象.但反而却更加深刻了,当时还不知道什么是CSS,就学会了写CSS.还不是什么是异步通信,就学会了用AjaX.当看到视频中的经典框架时,才发现,这不就是新闻发布系统中用到的CSS+DIV么!(⊙o⊙)哦,原来我早就会写了! 一.为什么是DIV+CSS 看到这个搭配,我就在想为什么是这样的组合?Span不可以么!直接用HTML不可以么!一个很明确的目的:为了让数据

浅谈javascript单体【读javascript设计模式第五章节单体有感】

单体,整个运行环境就独有一份,最简单的一种单体就是一个把所有属性和方法都集中在一起的对象,区别于一般的字面量对象,一般字面量对象是对一个物体的描述,集合该物体所具有的一些属性和方法,而单体则包含更多的些逻辑在里面,单体的好处有,划分命名空间,如果用来作为网页包装器,可以使得页面所有变量都封装在一个对象里,大幅度减小网页里的全局变量, 代码如: common.js (function(wz){ $.extend({ init:function(){ var self = this; this.bi

浅谈javascript继承【读javascript设计模式第四章节继承有感】

javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 function extend(subClass,supClass){ var fn = function(){}; fn.prototype = supClass.prototype; subClass.prototype = new fn(); subClass.prototype.constr

前端学习之路-CSS介绍,Html介绍,JavaScript介绍

CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 <p style="background-color: #FFF000"> p标签 </p> 在head中加入style标签 <head> <style type="text/css"> p { color: #FFF000

zz数字前端及FPGA设计相关书目泛读

以下内容为EETOP 会员:leasor 总结整理 ======================================================== 初学cpu设计(完全教程) -------------------------------------------------- 抛开逻辑架构, 来演绎内核开发, 只不过是照猫画虎, 能有多大的价值, 为什么总有人避重就轻, 先感谢译者的辛勤劳动, 但能不能修整一下框图绘制, 如果你不是pcb工具, fpga ide中都包含了绘制工

我与前端之间不得不说的三天两夜之javaScript

前端基础之JavaScript JavaScript概述 JavaScript的历史 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言) Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript 微软随后模仿

前端和后台对时间数值的增减操作(JavaScript和C#两种方法)

最近在做一个视频回放项目,记录下一点总结. 应用背景: 假设有一个门禁系统记录着门禁的人员进出刷卡信息,门禁装有视频录像设备,现在要根据人员的刷卡时间调出其刷卡时间点前后一段时间的录像.关于视频回放部分具体实现过程较复杂本文不涉及,提一下其中涉及到的对时间数值的增减操作. 目标: 以时间格式的字符串“2015-01-01 00:00:00”为例,返回该时间点前30秒和后30秒的时间格式的字符串. 前端和后台起始都可以实现,只是方法不同而已. 后台(C#)实现方法: 1 string str =

作为前端程序员,你需要掌握这6个javascript框架

常言道,条条大路通罗马,可是那一条适合我呢? 由于用于构建前端页面等现代技术的出现,JavaScript 在 web 前端开发

【前端】Util.js-ES6实现的常用100多个javaScript简短函数封装合集(持续更新中)

Util.js (持续更新中...) 项目地址: https://github.com/dragonir/Util.js 项目描述 Util.js 是对常用函数的封装,方便在实际项目中使用,主要内容包含:数组类.浏览器类.日期类.函数类.数学类.媒体类.节点类.对象类.字符串类.类型检测类.正则表达式类等内容. 使用方法 1. 引入Bable transpiler以保证支持ES6 <script type="javascript/text" src="./browser