JAVASCRIPT DOM编程艺术读书笔记

第五章最佳实践

平稳退化（graceful degradation)：如果正确使用了JavaScript脚本，可以让访问者在他们的浏览器不支持JavaScript的情况下仍能顺利地浏览你网站。虽然某些功能无法使用，但是最基本的操作仍能顺利完成

window.open(url,name,features);  打开一个新的窗口  这个函数是使用BOM的好案例
url 新窗口的链接
name 新窗口的名字 代码里边可以通过这个name和新窗口通信
features 新窗口的各种属性 比如尺寸 或者被启用或者禁用的各种浏览功能(工具条,菜单条,初始位置等)
function popUp(winURL) {
  window.open(winURL,"popup","width=320,height=480");
}

"javascript:"伪协议调用函数，支持伪协议的浏览器有效，老的浏览器可能失败，比如：

<a href = "javascript:popUp("http://www.example.com");">Example</a> 但是最好不要这么做，无法做到平稳退化！！！
<a href = "#" onclick = popUp("http://www.example.com"); return false;>Example</a> 同样无法做到平稳退化，如果用户禁用了javascript功能，这个链接将毫无用处。
我们可以修改下 <a href = "http://www.example.com" onclick = popUp("http://www.example.com"); return false;>Example</a>精简下变成<a href = "http://www.example.com" onclick = popUp(this.getAttribute("href")); return false;>Example</a>当前链接的href还可以进一步简写为this.href

渐进加强：用额外的信息层去包裹原始数据；使CSS代码负责提供关于“表示”的信息，JavaScript代码负责提供关于“行为”的信息。按这种原则出来的网页，都符合"平稳退化"原则

性能考虑 尽量少访问DOM和尽量减少标记, 不管什么时候只要是查询DOM中的某些元素，浏览器就会搜索整个DOM树，从中查找可能匹配的元素,比如:

if(document.getElementsByTagName("a").length > 0)
{ var links   = document.getElementsByTagName("a"); for(var i= 0; i < links.length; i++ )
   {

   }

}
搜索DOM了两次 可以改为以下写法
var links = document.getElementsByTagName("a");
if(links.length > 0) 
{
 　
　　for(var i= 0; i < links.length; i++ ) { } 
}
功能一样 但是搜索次数由两次变为了一次

压缩脚本：指的是把脚本文件中的不必要的字节，比如空格和注释，统统删除，从而达到“压缩”文件的目的；多数情况下应该有两个版本，一个是工作副本，可以修改代码并添加注释，另一个是精简副本，用于放在站点上，通常在精简副本的文件名上加上min字样。这样做可以加快加载速度。合并和放置脚本也可以加快加载速度
代表性的代码压缩工具：JSMin；YUI Compressor；Closure Compiler；

本章JS代码:

            window.onload = function () {　　　　　　　　　　　　　　　　//确保HTML文档全部加载完全后执行
　　　　　　　　　　if(!document.getElementsByTagName) return false;　　　　//注意，getElementsByTagName没有圆括号!!! 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].onclick = function () {　　　　　　　　//将一个事件(onclick)绑定到特定的元素上
                                popUp("http://www.example.com/"); return false;
                            }

                        }
                    }
                }

            } function popUp(winUrl) {
                 window.open(winUrl,"popUp","width = 320,height = 480");
             }