JS DOM 编程艺术(第2版)读书笔记 第5章 最佳实践

第5章 最佳实践
平稳退化 和 渐进增强 让不支持或禁用了javascript浏览器也能顺利浏览网页。
一个简单例子：
function popUp(url){
window.open(url, "popUp", "width=320,height=480")
}
伪协议和onclick处理事件：也能完成打开弹出窗口的需求。但是在不支持JavaScript或禁用的JavaScript的浏览器，页面就无法正常打开。
<a href="javascript:popUp('http://www.qq.com/')">open1</a>
<a href="#" οnclick="popUp('http://www.qq.com');return false;">open2</a>
平稳退化的方法：即使在不支持JavaScript或禁用了JavaScript的浏览器，虽然不能弹出窗口打开，但还是能够正常打开想要的页面。
<a href="http://www.qq.com" οnclick="popUp(this.href);return false;">open3</a>
还是不够完美，没有做到样式文件，脚本文件和结构分离，继续往下看。
window.onload = function(){
// 检查对象和方法是否存在,如果方法不存在退出函数。

 1 window.onload = function(){
 2     // 检查对象和方法是否存在,如果方法不存在退出函数。
 3     if(!document.getELementsByTagName) return false;
 4     var links = document.getElementsByTagName("a");
 5     for(var i = 0, l = links.length; i < l; i++){
 6         if(links[i].getAttribute("class") == "popup"){
 7             links[i].onclick = function(){
 8                 popUp(this.getAttribute("href"));
 9                 return false;
10             }
11         }
12     }
13 }

性能优化，尽量少访问DOM；CSS和JS文件外联，CSS在head部分引入，JS在页面结构的最下面引入。合并多个CSS文件和多个JS文件，减少请求。压缩脚本。