DOM脚本编程最佳实践

一.平稳退化
有时候网站的访问者可能使用的是不支持JavaScript的浏览器，还有可能对浏览器禁用了JavaScript，这时人们在访问你的网站时就会遇到各种问题，如果正确使用JavaScript脚本，就可以让访问者在不支持JavaScript的情况下仍能顺利访问你的网站。这就是所谓的平稳退化，也就是说，虽然某些功能无法使用，但最基本的操作能顺利完成。
示例：用户点击某个链接时弹出一个新窗口。
JavaScript使用window对象的open（）方法来创建新的浏览器窗口：

function popUp(winURL){    window.open(winURL,name,features);}

下面来讨论调用popUp函数的方法：
（1）使用“javascript：”伪协议

<a href="javascript:popUp('http://www.example.com/');">Example</a>

通过伪协议调用javascript的代码非常不好，因为它只在支持伪协议的浏览器中打开，较老的浏览器则会打开失败。禁用javascript的浏览器会什么也不做。
（2）使用内嵌的事件处理函数

<a href="#" onclick="popUp('http://www.example.com/'); return false;">Example</a>

这个做法与调用伪协议的做法同样糟糕，因为它们都不能平稳退化，如果用户禁用了浏览器的JavaScript功能，这样的链接将毫无用处。
（3）使用平稳退化版本

<a href="http://www.example.com/" onclick="popUp('http://www.example.com/'); return false;">Example</a>   //设置href属性就能平稳退化

更精简的版本：

<a href="http://www.example.com/" onclick="popUp(this.href); return false;">Example</a>

二.分离JavaScript
之前的JavaScript代码已经与HTML文档分的很开了，JavaScript代码已存入外部文件，问题出在内嵌的事件处理函数中，诸如onclick之类的属性，那么我们可以用CSS机制中的class或id属性将JavaScript代码调用行为与HTML文档分开：
如果事情涉及多个元素，我们可以用getElementsByTagName和getAttribute把事件添加到有着特定属性的一组元素上，具体步骤如下：
（1）把文档里所有链接全放入一个数组里。
（2）遍历数组。
（3）如果某个链接的css属性等于popup，就表示这个链接在被点击时应该调用popUp函数。
（4）把这个链接的href属性值传递给popUp函数。
（5）取消这个链接的默认行为，不让这个链接把访问者带离当前窗口。

<a href="http://www.example.com/" class="popup">Example</a>//将下列JavaScript代码以及popUp函数保存到外部JavaScript文件中window.onload=prepareLinks;function prepareLinks(){    var links=document.getElementsByTagName("a");    for (var i=0;i<links.length;i++){        if(links[i].getAttribute("class")=="popup"){            links[i].onclick=function(){                popUp(this.getAttribute("href"));                return false;            }         }    }}

三.向后兼容
不同浏览器对JavaScript的支持程度不一样，有时候网站的访问者可能未启用JavaScript功能或者比较古老的浏览器无法理解DOM提供的方法和属性，对这一问题的解决方案就是检测浏览器对JavaScript的支持程度。
（1）对象检测
用if语句检测是否支持某个特定的DOM方法，例如对上面的JavaScript代码检测getElementsByTagName函数。

window.onload=function(){    if(!document.getElementsByTagName) return false;    statements}

（2）浏览器嗅探技术
确保向后兼容性的另一种方法是浏览器嗅探技术，这种技术指通过提取浏览器供应商提供的信息来解决向后兼容问题，从理论上讲可以通过JavaScript代码检索关于浏览器品牌和版本的信息，这些信息可以改善JavaScript脚本代码的向后兼容性，但是风险非常大。所以其现在也逐渐被更强壮的对象检测技术所取代。

四.性能考虑
（1）尽量少访问DOM和尽量减少标记
如果是用DOM访问好几次同样的元素，可以将第一次搜索的结果保存在一个变量中，然后在后续多次使用，这样可以降低搜索DOM的次数。
（2）合并和放置脚本
包含脚本的最佳方式就是使用外部文件，但是如果有多个js文件，尽量将多个js文件合并到一个脚本文件中，这样就可以减少加载页面时发送的请求数量。而减少请求数量通常都是在性能优化时首先要考虑的。
（3）压缩脚本
写完了脚本，优化之后，还有一件事可以加快加载速度：压缩脚本文件。所谓压缩脚本，指的是把脚本文件中不必要的字节，如空格和注释，统统删除，从而达到“压缩”文件的目的。我们可以用代码压缩工具来做。多数情况下，我们应该有两个版本，一个是工作副本，可以修改代码并添加注释；另一个是精简副本，用于放在站点上，通常为了与非精简版本区分开，最好在精简副本的文件名中加上min字样。

推荐几个有代表性的代码压缩工具：
谷歌的Closure Compiler（http://closure-compiler.appspot.com/home）;
雅虎的YUI Compressor(http://develope.yahoo.com/yui/compressor);