JavaScript DOM高级程序设计1.3-常见陷阱--我要坚持到底！

• 区分大小写

• 单引号双引号

大多数开发人员选择用单引号，因为XTHML要求所有XHTML的属性都必须使用双引号

var html='<h2 class="a">A list!</h2>'
    +'<ol>'
    +'<li class="a">Foo</li>'
    +'<li class="a">Bar</li>'
    +'</ol>'

总是比

var html="<h2 class=\"a\">A list!</h2>"
    +"<ol>"
    +"<li class=\"a\">Foo</li>"
    +"<li class=\"a\">Bar</li>"
    +"</ol>"

但是对于行内（inline）单引号仍然必须转义：

var html = '<p class="a">Don\'t forget to escape single quotes!</p>';

• 换行

最佳方案就是使用连接操作符（+）并将每行用引号括起来：

var html='<h2 class="a">A list!</h2>'
    +'<ol>'
    +'<li class="a">Foo</li>'
    +'<li class="a">Bar</li>'
    +'</ol>'

• 可选的分号和花括号
• 重载（并非真正的重载）

相同名字的函数永远只能存在一个实例。如果编写如下的函数

function alert(message)
{
    ADS.$('messageBox').appendChild(document.createTextNode(message));
}

浏览器将不会执行往常的提示信息

• 匿名函数

看一下我们常规的注册函数

function clicked()
{
    alert('Linked to :'+this.href);
}
var anchor= ADS.$('someID');
ADS.addEvent(anchor,'click',clicked)

匿名函数：

var anchor=ADS.$('someId');
addEvent(anchor,'click',function(){
    alert('Linked to:' + this.href);
});

• 作用域解析和闭包

作用域：(通过var维护作用域链)

function myFunction()
{
    var myVar='inside';
}
//定义变量
var myVar='outside';
myFunction();
alert(myVar);//outside

如果去掉：

function myFunction()
{
     myVar='inside';
}
//定义变量
var myVar='outside';
myFunction();
alert(myVar);//inside

下面看一个例子：

ADS.addEvent(window, 'load', function(W3CEvent) {
    for (var i=1 ; i<=3 ; i++ ) {

        var anchor = document.getElementById('anchor' + i);

        ADS.addEvent(anchor,'click',function() {
            alert('My id is anchor' + i);
        });
    }
});

<ul>
    <li><a href="http://advanceddomscripting.com" id="anchor1">Anchor 1</a></li>

<li><a href="http://advanceddomscripting.com" id="anchor2">Anchor 2</a></li>

<li><a href="http://advanceddomscripting.com" id="anchor3">Anchor 3</a></li>

</ul>

目的：点击anchorx 便提示My id is anchorx，但是情况却不是这样。

原因：i的值时间上是在单机时间发生时，才从 作用域链中取得的，当单机时间发生时，initAnchors()已经执行完毕，因此i的值为4，所以每个alert()显示的都是同一个结果。原因：

处理办法：

function

registerListener(anchor,i) { ADS.addEvent(anchor, 'click', function() { alert('My id is anchor' + i); }); } function initAnchors() { for ( i=1 ; i<=5 ; i++ ) { var anchor = document.getElementById('anchor'+i); registerListener(anchor,i); } } ADS.addEvent(window, 'load', initAnchors);

• 迭代对象

通过hasOwnProperty()方法检查不涉及其他对象继承的属性和方法。智慧检查在特定对象自身中直接创建的属性

var all=document.body.getElementsByTagName('*'); for(i in all) { if (!all.hasOwnProperty(i)) { continue; } //对all[i]元素进行某些操作 }

• 函数的调用和引用(不带括号)

//赋一个函数返回值 var foo = exampleFunction(); //赋一个函数的引用 var foo = exampleFunction;