读解JavaScript_DOM编程艺术笔记（四）——最佳实例以及优化

1.在一个新窗口打开一个链接的内容
如果网页上的某个链接将弹出新窗口，最好在这个链接本身的文字中
JavaScript使用window对象的open()方法来创建新的浏览器窗口，该方法有三个可选的参数：
window.open(url,name,features)
name:新窗口名字，可在代码中通过这个名字与新窗口进行通信
features:各种属性，属性间用逗号分隔,整体使用引号,属性和属性值用等号赋值

open()方法是使用BOM的一个好案例，它的功能对文档内容也无任何影响（那是DOM的地盘）
window.open()的典型应用：

function popUp(winURL){
    window.open(winURL,”popup”,”width=320,height=480”)；
}

2.“javascript:” 伪协议(在HTML文档里通过”javascript:”伪协议调用JavaScript代码非常不好)
“真”协议用来在因特网上的计算机之间传输数据包，如HTTP协议(http://)、FTP协议(ftp://)等。
伪协议则是一种非标准化的协议，让我们通过一个链接来调用JavaScript函数

如用javascript:伪协议调用popUp()函数：

<a href=”javascript:popUp(‘http://www.example.com’);”>Example</a>

3.内嵌的事件处理函数
如：

<a href=”#”,onclick=”popUp(‘http://www.example.com’ );retrun false;”>Example</a>

和javascript:伪协议同样糟糕

4.谁关心这个
虽然现在浏览Web同时会禁用图像和JavaScript的用户已经非常少见了，但这个访问者非常重要。例如那个用户是一个搜索机器人，如果网页不能平稳退化，它们在搜索引擎上的排名就可能大受损害。
那么，对于popUp()函数，为其中的JavaScript代码预留出退路，比如：

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

如果想把一个事件添加到某个带有特定id属性的元素上
getElementById(id).event = action
如果设计多个元素，则可以用getElementsByTagName和getAttribute把事件添加到有特定属性的一组元素上。
具体步骤如下:
(1)把文档里的所有链接全放入一个数组里
(2)遍历数组
(3)如果某个链接的class属性等于popup，就表示这个链接在被点击时应该调用popUp()函数
实现上述的步骤JS代码：

var links = document.getElementsTagName(“a”);
    for(var i=0; i<links.length; i++){
        if(links[i].getAttribute(“class”)==”popup”){
            popUp(this.getAttribute(“href”));
            return false;
        }
}

当这个用户点击该链接时执行跳出新窗口

window.onload = prepareLinks;
function prepareLinks(){
    var links = document.getElementsTagName(“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;
                }
            }
        }
}

注意，popUp()方法的定义也要放在该JS代码上；

5.对象检测
假设如果有个函数调用了getElementById()方法，在调用该方法前先检查所使用的浏览器是否支持这个方法。
注意：使用对象检测时，方法后面的圆括号一定要删除，否则测试的是方法的结果

function myFunction(){
    if(!getElementById) return false;
    this function statements
}

6.性能考虑
（1）尽量少访问DOM和尽量减少标记
因为会增加遍历，增加查找时间
（2）合并和放置脚本
（3）压缩脚本
所谓压缩脚本，指的是把脚本文件中不必要的字节，如空格和注释，统统删除。有很多工具都可以替我们来做这件事。还有可以用更短的变量名
通常建立副本，精简版在文件名后添加min字样，xx.min.js
几个有代表性的代码压缩工具：
Douglas Crockford 的JSMin（http://www.crockford.com/javascript/jsmin.html）
雅虎的YUI Compressor(http://developer.yahoo.com/yui/compressor)
谷歌的Closure Compiler(http://closure-compiler.appspot.com/home)
7.加载问题
把使用DOM的函数绑定到加载事件上
window.onload = prepareGallery;
a)如果有几个加载项，只会加载最后一个，此时可把他们放进一个匿名函数
window.onload =function(){}
b)还有个弹性最佳的解决方案

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