第二章 大背景
javascript嵌入在一个还同时使用着HTML和CSS的环境中。
2002年,Stuart Langridge提出无侵入脚本编程(unobtrusive scripting)。它代表了向基于CSS的、兼容标准的Web站点的新理论中嵌入Javascript的首次认真的尝试。
它应该是可用的。即给网站带来明确的可用性好处。
它应该是可访问的。如果javascript失效,网页应该依然是可阅读和可理解的。
它应该是容易实现的。Web开发者只需要在页面中引入脚本本身和一个Javascript钩子,脚本就能运行。
它应该是分离的。只存在于自己的.js文件中,而不是散落在HTML中。
一个Web页面由如下三个层组成:HTML结构层、CSS表现层、Javascript行为层。
表现与结构的分离
所有的表现定义在一个单独的CSS文件中,HTML中不再出现<font>标签和用于表现的表格。一般通过脚本改变className来引用不同的
CSS元素。CSS (display:
none)用来表示文档中的某个元素隐藏,也可以通过脚本从文档中删除这个元素。至于采用哪种方式,PPK推荐采用后一种方式。特别是对于form表单的时候,采用第一种方式就会提交很多无用的信息。
行为与结构的分离
所有的javascript函数都被放在一个独立.js文件中,然后把它链入所需要它的HTML页面中,HTML移除所有的事件处理程序。
钩子(hook)用来生命“在这里准备部署行为”的ID,它是注册事件处理程序的一种方法。
javascript:伪协议是复杂而肮脏的(<a href="javascript:dosomeaction()">),应该放到脚步文件中。
行为和表现的分离
行为和表现的分离是复杂的,尚没有任何的标准。
当若干元素部署相同的效果时,CSS是有效的,而需要创建相似但不完全相同的效果时,javascript是最有效的方法。
可访问性规则
条理分明的HTML,如硬编码的链接必须有href。
产生对脚本用户有意义的内容,如:
一条发送ajax请求的链接可以完全用javascript生成,这样无脚本用户就不会看到href为#的a标签而产生不解;
用javascript来隐藏一段内容,而不是用css,否则无脚本用户将永远看不到那是什么;
判断是否脚本可用,然后跳转到一个无脚本页面时,要用location.replace而不是location.href,这样在后退时不会再返回到有脚本页面,事实上location.href产生了一条历史记录;
针对键盘用户,我们对触发事件的元素增加focus动作;
由于各浏览器都支持(但不完全支持)javascript,因此<noscript>标签就显得没有意义,最好完全不用。