【JavaScript DOM编程艺术】- 最佳实践

平稳退化

平稳退化(graceful degradation)，就是说，虽然禁止JS后某些功能无法使用，但最基本的操作仍能顺利完成。

1. 禁止使用”javascript:”伪协议。
2. 禁止”href = #”。

谁关心这个？
搜索机器人，也就是爬虫。目前只有极少数的搜索机器人能够理解JavaScript代码。

向CSS学习

• 结构与样式分离
• 渐进增强，即用一些额外的信息层去包裹原始数据。

---

分离JavaScript

使用一个挂钩，像CSS中的class和id属性一样。将元素节点的事件处理函数整合到JS外部文件中。

var gallery = document.getElementById("imageGallery");
var links = gallery.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
    links[i].onclick = function() {
        showPic(this);
        return false;
    }
}

还有一个待解决的问题是，如何让这段代码工作起来。
因为网页在渲染的过程中，读取过程并不明确。所以类似于这种需要网页加载完成后再执行的代码，我们需要把它封装成一个函数，然后赋给window.onload

window.onload = prepareGallery;

但是这样如果有多个函数需要执行则需要一个新的函数。

function addLoadEvent(func){
    var oldonload = window.onload;
    if(typeof window.onload != 'function'){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }
}

---

向后兼容性

• 对象检测
  即，检查浏览器对JavaScript的支持程度。
  检测条件一般为“如果你不理解这个方法，请离开”
  例如：

if(!document.getElementsByTagName)return false;

---

性能考虑

• 尽量少访问DOM和尽量减少标记
  不管什么时候，只要是查询DOM中的某些元素，浏览器都会搜索整个DOM树，从中查找可能匹配的元素。

• 合并和放置脚本
  把所有< script >标签都放到文档的末尾，< /body >标记之前，就可以让页面变得更快。
  具体原理戳这里

• 压缩脚本
  通过代码压缩工具将代码压缩成精简副本，一般在文件名中加上min字样。
  JSMin