初学JavaScript，六个细节不可忽略

发布时间：2012年06月03日作者：万码学堂

JavaScript这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累和学习的。本文列举了JavaScript初学者应该注意的六个细节，希望对大家有所启示。

一、简化代码

JavaScript定义对象和数组非常简单，我们想要创建一个对象，一般是这样写的：

var car = new Object();

car.colour = 'red';

car.wheels = 4;

car.hubcaps = 'spinning';

car.age = 4;

下面的写法可以达到同样的效果：

var car = {

colour:'red',

wheels:4,

hubcaps:'spinning',

age:4

}

后面的写法要短得多，而且你不需要重复写对象名称。

另外对于数组同样有简洁的写法，过去我们声明数组是这样写的：

var moviesThatNeedBetterWriters = new Array(

'Transformers','Transformers2','Avatar','Indiana Jones 4'

);

更简洁的写法是：

var moviesThatNeedBetterWriters = [

'Transformers','Transformers2','Avatar','Indiana Jones 4'

];

对于数组，还有关联数组这样一个特别的东西。你会发现很多代码是这样定义对象的：

var car = new Array();

car['colour'] = 'red';

car['wheels'] = 4;

car['hubcaps'] = 'spinning';

car['age'] = 4;

这太疯狂了，不要觉得困惑，“关联数组”只是对象的一个别名而已。

另外一个简化代码的方法是使用三元运算符，举个例子：

var direction;

if(x < 200){

direction = 1;

} else {

direction = -1;

}

我们可以使用如下的代码替换这种写法：

var direction = x < 200 ? 1 : -1;

二、事件委托

事件是JavaScript非常重要的一部分。我们想给一个列表中的链接绑定点击事件，一般的做法是写一个循环，给每个链接对象绑定事件，HTML代码如下：

<h2>Great Web resources</h2>

<li><a href="http://opera.com/wsc">Opera Web Standards Curriculum</a></li>

<li><a href="http://sitepoint.com">Sitepoint</a></li>

<li><a href="http://alistapart.com">A List Apart</a></li>

<li><a href="http://blameitonthevoices.com">Blame it on the voices</a></li>

<li><a href="http://oddlyspecific.com">Oddly specific</a></li>

</ul>

脚本如下：

// Classic event handling example

(function(){

var resources = document.getElementById('resources');

var links = resources.getElementsByTagName('a');

var all = links.length;

for(var i=0;i<all;i++){

// Attach a listener to each link

links[i].addEventListener('click',handler,false);

};

function handler(e){

var x = e.target; // Get the link that was clicked

alert(x);

分类导航

初学JavaScript，六个细节不可忽略

延伸阅读

我想了解如何学习