初學(xué)JavaScript，六個(gè)細(xì)節(jié)不可忽略

發(fā)布時(shí)間：2012年06月03日作者：萬碼學(xué)堂

JavaScript這門腳本語言看起來很簡單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累和學(xué)習(xí)的。本文列舉了JavaScript初學(xué)者應(yīng)該注意的六個(gè)細(xì)節(jié)，希望對(duì)大家有所啟示。

一、簡化代碼

JavaScript定義對(duì)象和數(shù)組非常簡單，我們想要?jiǎng)?chuàng)建一個(gè)對(duì)象，一般是這樣寫的：

var car = new Object();

car.colour = 'red';

car.wheels = 4;

car.hubcaps = 'spinning';

car.age = 4;

下面的寫法可以達(dá)到同樣的效果：

var car = {

colour:'red',

wheels:4,

hubcaps:'spinning',

age:4

}

后面的寫法要短得多，而且你不需要重復(fù)寫對(duì)象名稱。

另外對(duì)于數(shù)組同樣有簡潔的寫法，過去我們聲明數(shù)組是這樣寫的：

var moviesThatNeedBetterWriters = new Array(

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

);

更簡潔的寫法是：

var moviesThatNeedBetterWriters = [

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

];

對(duì)于數(shù)組，還有關(guān)聯(lián)數(shù)組這樣一個(gè)特別的東西。你會(huì)發(fā)現(xiàn)很多代碼是這樣定義對(duì)象的：

var car = new Array();

car['colour'] = 'red';

car['wheels'] = 4;

car['hubcaps'] = 'spinning';

car['age'] = 4;

這太瘋狂了，不要覺得困惑，“關(guān)聯(lián)數(shù)組”只是對(duì)象的一個(gè)別名而已。

另外一個(gè)簡化代碼的方法是使用三元運(yùn)算符，舉個(gè)例子：

var direction;

if(x < 200){

direction = 1;

} else {

direction = -1;

}

我們可以使用如下的代碼替換這種寫法：

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

二、事件委托

事件是JavaScript非常重要的一部分。我們想給一個(gè)列表中的鏈接綁定點(diǎn)擊事件，一般的做法是寫一個(gè)循環(huán)，給每個(gè)鏈接對(duì)象綁定事件，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);

分類導(dǎo)航

初學(xué)JavaScript，六個(gè)細(xì)節(jié)不可忽略

延伸閱讀

我想了解如何學(xué)習(xí)