javaScript Dom编程 第五章（最佳实践）笔记

本章内容

• 平稳退化：确保网页在没有JS的情况下也能正常工作。
• 分离JavaScript：把网页的结构和内容与JavaScript的动作行为分开。
• 向后兼容性：确保老版本浏览器不会因为JavaScript脚本死掉。
• 性能考虑：确保脚本执行性能最优。

与HTML相比，JavaScript语言更加严苛。若不符合语法规定，JS解释器将拒绝执行并报错。

只是很少一部分网页能够在JS被禁用时对网页行为做出妥善安排。很多时候，一旦浏览器不支持或者禁用了JavaScript解释功能，质量不好的脚本将会导致用户无法浏览相应网页。网页能否访问取决于如何应用JavaScript。

JavaScript与Flash类似：Flash强行在于制作短小精悍的矢量图形和视频片段，但其数量越来越多，体积越来越大，增加了网页的加载时间；JavaScript让网页易于访问的同时，也有降低网站可用性和可访问性的风险。

综上，使用JavaScript时应该关心两个因素：1.用户体验 2.若浏览器不支持JavaScript应该怎么办。

平稳退化(graceful degradation)

即访问者在浏览器不支持JavaScript的情况下仍然能够顺利浏览相应网站。实现平稳退化是为了搜索机器人更好的理解网页（搜索机器人往往禁用JS和图片），提升网页在搜索引擎上的排名。

例：弹窗
用户点击某个链接时弹出一个新窗口。这涉及网页的可访问性问题：用户使用的屏幕读取软件可能无法向用户说明弹出了窗口。
JavaScript使用window.open(url,name,features)创建新浏览器窗口。open方法对文档内容无影响，只与浏览环境（window对象）有关。但其使用方法将涉及到网页的可访问性问题。
调用函数的一个方法是使用伪协议（“javascript:”），即通过一个链接来调用JS函数。

<a href="javascript:popUp('url');">example</a>

较老的浏览器会去试图打开链接但失败，支持伪协议但禁用JS的浏览器会什么也不做。这种方法不好。
另一种方法是利用内嵌的事件处理函数

<a href="#" onclick="popUp('url');return false">example</a>

"#"未指向任何目标只为了创建空连接，工作全部由onclick实现，这种方法同样不能实现平稳退化。
解决：在链接里使href属性有效。

<a href="url" onclick="popUp('url');return false">example</a>

借鉴CSS

css优点：把样式转移到了外部文件。文档结构与样式的分离可以确保网页的平稳退化。
渐进增强：用额外的信息层包裹原始数据。类似于CSS，JavaScript和DOM提供的功能也应该构成一个额外的指令层。

分离JavaScript

JavaScript不要求事件必须在HTML文档中处理，我们可以在外部JavaScript文件里把一个事件添加搭配HTML文档的某个元素上：

element.event = action...

可以利用getElementById或getElementByClass确定获得事件的元素。

getElementById(id).event = action...

若涉及多个元素，可以利用getElementByTagName和getAttribute把事件添加到这组元素上：

1. 把文档里的链接放入一个数组
2. 遍历数组
3. 若class属性等于xxx,表示点击链接时将调用xxx函数。
4. 于是…
   问题：不能保证JavaScript文件和HTML文档哪个先结束加载，脚本加载时文档可能不完整，没有完整的DOM，getElementByTagName等方法不能正常工作。
   解决：
   让代码在HTML文档全部加载到浏览器后开始执行。
   HTML文档全部加载完毕时，window对象将触发onload事件，将函数添加到onload事件，DOM就可以正常工作了。

window.onload = prepareLinks;
function prepareLinks(){...}

向后兼容

一些浏览器无法理解DOM提供的方法和属性，即使用户浏览器支持JavaScript，某些脚本也可能无法正常工作。

对象检测

解决方法1：检测浏览器对JavaScript的支持程度（对象检测）。
把方法打包在if语句中，根据结果决定应该采取的行为。

if(method){
statements
}

缺点：增加一对花括号，降低了代码的易读性。
解决：

if(！method) return false;
...

浏览器嗅探技术

浏览器嗅探技术是指通过提取浏览器供应商提供的信息来解决向后兼容的问题。
此技术风险较大，因为种种原因浏览器会误报信息，而且必须测试所有可能出现的供应商和版本号组合，测试代码复杂冗长。

性能考虑

1. 尽量少访问DOM和尽量减少标记
   搜索整个DOM树影响性能。
   减少标记，过多不必要元素会增加DOM树的规模，进而增加了DOM树的遍历时间。
2. 合并和放置脚本
   合并脚本可以减少加载页面时发送的请求数量。
   把所有script标签放到文档末尾，/body标记之前。
3. 压缩脚本
   删除脚本文件中不必要的字节（如空格，注释）。
   保存两个版本：工作副本"xxx.js"（可以修改代码并添加注释）；精简副本"xxx.min.js"，用于放在站点上。
   压缩代码工具：JSMin，YUI Compressor，Closure Compiler