title: 《DOM编程艺术》三、最佳实践
date: 2017-06-03 10:10:16
tags: DOM编程艺术
1、平稳退化和渐进增强
什么是平稳退化
不管你想通过javascript个改变哪个网页的行为，都必须三思而后行，首先要确认，为这个网页增加这种额外的行为是否有必要。
在所有的javascript特效当中，最臭名昭著的莫过于那些在人们打开网页时弹出的广告窗口，不幸的是有不少用户为此干脆彻底禁用了javascript，这是一个典型的滥用javascript的例子，从技术上讲弹窗解决了如何向用户发送信息，但在实践中，频繁弹出的广告窗口却让用户不胜其烦，令人欣慰的是这一问题已经收到了所有人的关注，那些不遵守用户至上原则的网站都在自取灭亡。
所以如果要使用javascript就要确认，这么做会对浏览体验产生怎样的影响，最重要的是，如果用户的浏览器不支持或禁用了javascript的情况下仍能顺利浏览你的网址，这就是平稳退化。虽然某些功能无法使用，但最基本的操作仍能顺利完成。
举个例子
以弹出窗口的例子来说明平稳退化的思想。这里并不是指在加载网页时弹出，而是点击后弹出，例如服务条款，邮费列表等等。
javascript使用window.open(url,name,features)来创建新的浏览器窗口。
参数1：新窗口里页面的url地址，省略这个参数就是一个空白网页。
参数2：新窗口的名字，代码可以通过这个名字与新窗口交互。
参数3：以逗号分隔的字符串，包括新窗口尺寸(工具条、菜单条、初始显示位置等等)。
function popUp(winURL){
window.open(winURL,"popup","width=320,height=480");
}
这个函数将打开一个320x480像素的新窗口"popup"。
使用popUp函数的一个办法是使用伪协议。
真协议用来在因特网上的计算机之间传输数据包，比如HTTP、FTP协议等，协议则是一种非标准化的协议。
<a href = "javascript:popUp('http://www.example.com/');return false;">Example</a>
通过"javascript:"为协议调用popUp()函数。
<a href = "#" onclick = "popUp('http://www.example.com/');return false;">Example</a>
这是内嵌式的事件处理函数，这个链接的href没什么用，所以用"#"，表示一个空连接，实际工作由onclick完成。
但是以上两种方法都很糟糕，因为它们都不能平稳退化。有以下两点原因。
用户如果禁用了javascript功能，这样的链接将毫无作用。
第二点是不利于搜索引擎排名，搜索机器人浏览web页的目的是把各种网页添加到搜索引擎的数据库，很少有机器人能理解javascript代码。
其实为javascript代码预留退路很简单，给href设置真实的URL地址。
<a href = "http://www.example.com/" onclick = "popUp('http://www.example.com/');return false;">Example</a>
这样即使javascript被禁用，这个链接也不是失效的，只是功能上打了点折扣，这是一个经典的平稳退化的例子。
渐进增强
所谓"渐进增强"就是用一些额外的信息层去包裹原始数据，按照"渐进增强"原则创建出来的网页几乎都符合"平稳退化"原则，在一个网页中，良好的内容就是一切，只有正确的使用标记语言才能对内容做出准确的描述，CSS指令构成了一个表示层使文档呈现出各种模式，但即使去掉这个表示层，文档的内容也依然可以访问。
2、分离javascript
就像css那样把style写到html文档中，虽然可以用，但是这种做法弊大于利，最好的方法是把样式信息存入一个外部文件。在文档的head部分用<link>标签调用这个文件，这样更容易阅读和理解，样式信息也更容易更改，不用去文档里逐一搜索和替换，这个结论同样适用于javascript。
现在我要把上面弹窗例子中的onclick事件分离出来。具体步骤如下：
把文档里的所有链接全放入一个数组里。
遍历数组。
如果某个链接的class属性等于popup，就表示这链接在被点击时应该调用popUp()函数
window.onload = function(){
if(!document.getElementsByTagName) return false;
var links = document.getElementsByTagName('a');
if(links.length > 0){
for(var i = 0;i < links.length;i++){
if(links[i].getAttribute('class') == 'popup'){
links[i].onlcick = function(){
popUp(this.getAttribute('href'));
return false;
}
}
}
}
}
以上代码把调用popUp()函数添加到有关的链接上，存入一个外部javascript文件中。
这里使用了window.onload事件，当onload事件触发时代表整个文档已经加载完毕，当然也包括DOM树，我要让HTML文档先加载这样才可以生成DOM树，起码要在DOM树生成后才可以加载javascript文件，否则获取不到文档中的各个元素，即使把javascript文件放到body的底部，也不能保证哪个先加载结束，浏览器可能一次加载多个文件，因为javascript加载时文档可能还没加载完成，所以DOM也没有加载完，很多功能会无法使用。
3、向后兼容性
上面的代码中，针对访问者可能未启用javascript功能的情况，需要进行对象检测，在这里用if语句检测访问者的浏览器是否支持document.getElementsByTagName方法。如果不支持，就不会再继续执行，直接return false;这是一种很常见的向后兼容的方法，适用于很多地方。
4、性能考虑
在上面案例的for循环开始前检测是否获取到了a元素，没有的话后面的代码也没必要执行，这里将所有a元素存入link变量。出入对性能考虑，我们应该检查查询DOM中某些元素的操作，搜索整个DOM树对性能并没有好处，总之把搜索结果保存在一个全局变量里，或者把一组元素直接以参数形式传递给函数，是最好的方法。
另外，js文件在HTML标签中的位置对页面初次加载时间也有很大影响，通常我习惯放在head中，但位于head中的脚本会导致浏览器无法并行加载其他文件。
根绝HTTP规范，浏览器每次从一个域名中最多可能同时下载两个文件，所以把script标签放到文档末尾，</body>之前可以让页面加载更快
