每種語言都有它特別的地方，對于JavaScript來說，使用var就可以聲明任意類型的變量，這門腳本語言看起來很簡單，然而想要寫出優(yōu)雅的代碼卻是需要不斷積累經(jīng)驗的。本文利列舉了JavaScript初學(xué)者應(yīng)該注意的七個細節(jié)，與大家分享。（1）簡化代碼JavaScript定義對象和數(shù)組非常簡單，我們想要創(chuàng)建一個對象，一般是這樣寫的：? 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 ????}? ?后面的寫法要短得多，而且你不需要重復(fù)寫對象名稱。另外對于數(shù)組同樣有簡潔的寫法，過去我們聲明數(shù)組是這樣寫的：? ?var?moviesThatNeedBetterWriters?=?new?Array( ??????'Transformers','Transformers2','Avatar','Indiana?Jones?4' ????);更簡潔的寫法是：? ?var?moviesThatNeedBetterWriters?=?[ ??????'Transformers','Transformers2','Avatar','Indiana?Jones?4' ????];對于數(shù)組，還有關(guān)聯(lián)數(shù)組這樣一個特別的東西。?你會發(fā)現(xiàn)很多代碼是這樣定義對象的：? ?var?car?=?new?Array(); ????car['colour']?=?'red'; ????car['wheels']?=?4; ????car['hubcaps']?=?'spinning'; ????car['age']?=?4;? ?這太瘋狂了，不要覺得困惑，“關(guān)聯(lián)數(shù)組”只是對象的一個別名而已。另外一個簡化代碼的方法是使用三元運算符，舉個例子：? ?var?direction; ????if(x?<?200){ ??????direction?=?1; ????}?else?{ ??????direction?=?-1; ????}我們可以使用如下的代碼替換這種寫法：1? ?var?direction?=?x?<?200???1?:?-1;? ?（2）使用JSON作為數(shù)據(jù)格式偉大的Douglas Crockford發(fā)明了JSON數(shù)據(jù)格式來存儲數(shù)據(jù)，你可以使用原生的javascript方法來存儲復(fù)雜的數(shù)據(jù)而不需要進行任何額外的轉(zhuǎn)換，例如：? ??var?band?=?{ ?????"name":"The?Red?Hot?Chili?Peppers", ?????"members":[ ?????{ ???????"name":"Anthony?Kiedis", ??????????"role":"lead?vocals" ????????}, ????????{ ??????????"name":"Michael?'Flea'?Balzary", ??????????"role":"bass?guitar,?trumpet,?backing?vocals" ????????}, ??????{ ??????????"name":"Chad?Smith", ??????????"role":"drums,percussion" ???????}, ????????{ ??????????"name":"John?Frusciante", ??????????"role":"Lead?Guitar" ????????} ??????], ??????"year":"2009" ????}你可以使用在JavaScript中直接使用JSON，甚至作為API返回的一種格式，在許多的API中被應(yīng)用，例如：? ?<div?id="delicious"></div><script> ???function?delicious(o){ ?????var?out?=?'<ul>'; ??????for(var?i=0;i<o.length;i++){ ????????out?+=?'<li><a?href="'?+?o[i].u?+?'">'?+ ???????????????o[i].d?+?'</a></li>'; ??????} ??????out?+=?'</ul>'; ??????document.getElementById('delicious').innerHTML?=?out; ????} ????</script> ????<script?src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>? ?這里調(diào)用delicious 的Web服務(wù)獲取最新書簽，以JSON格式返回，然后將它們顯示成無序列表的形式。從本質(zhì)上講，JSON是用于描述復(fù)雜的數(shù)據(jù)最輕量級的方式，而且直接它運行在瀏覽器中。?你甚至可以在PHP中調(diào)用 json_decode（）函數(shù)來使用它。（3）盡量使用JavaScript原生函數(shù)?要找一組數(shù)字中的最大數(shù)，我們可能會寫一個循環(huán)，例如：? ?var?numbers?=?[3,342,23,22,124]; ?var?max?=?0; ???for(var?i=0;i<numbers.length;i++){ ??????if(numbers[i]?>?max){ ???????max?=?numbers[i]; ??????} ????} ???alert(max);? ?其實，不用循環(huán)可以實現(xiàn)同樣的功能：? ?var?numbers?=?[3,342,23,22,124]; ???numbers.sort(function(a,b){return?b?-?a}); ??alert(numbers[0]);? ?而最簡潔的寫法是：?Math.max(12,123,3,2,433,4);?//?returns?433? ?你甚至可以使用Math.max來檢測瀏覽器支持哪個屬性：?? var?scrollTop=?Math.max( ??doc.documentElement.scrollTop, ????doc.body.scrollTop ???);? ?如果你想給一個元素增加class樣式，可能原始的寫法是這樣的：? ?function?addclass(elm,newclass){ ?var?c?=?elm.className; ?elm.className?=?(c?===?'')???newclass?:?c+'?'+newclass;而更優(yōu)雅的寫法是：?function?addclass(elm,newclass){ ?var?classes?=?elm.className.split('?'); ?classes.push(newclass); ?elm.className?=?classes.join('?'); ?}? ?（4）事件委托事件是JavaScript非常重要的一部分。我們想給一個列表中的鏈接綁定點擊事件，一般的做法是寫一個循環(huán)，給每個鏈接對象綁定事件，HTML代碼如下：? ?h2>Great?Web?resources</h2> ?<ul?id="resources"> ?<li><a?>Opera?Web?Standards?Curriculum</a></li> ?<li><a?>Sitepoint</a></li> ?<li><a?>A?List?Apart</a></li> ?<li><a?>YUI?Blog</a></li> ?<li><a?>Blame?it?on?the?voices</a></li> ?<li><a?>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); ?e.preventDefault(); ?}; ?})();? ?更合理的寫法是只給列表的父對象綁定事件，代碼如下：(function(){ ?var?resources?=?document.getElementById('resources'); ?resources.addEventListener('click',handler,false); ?function?handler(e){ ?var?x?=?e.target;?//?get?the?link?tha ?if(x.nodeName.toLowerCase()?===?'a'){ ?alert('Event?delegation:'?+?x); ?e.preventDefault(); ?} ?}; ?})();? ?（5）匿名函數(shù)關(guān)于JavaScript的最頭疼的事情之一是，它的變量沒有特定的作用范圍。?一般情況下，任何變量，函數(shù)，數(shù)組或?qū)ο蠖际侨中?，這意味著在同 一頁上的其他腳本可以訪問并覆蓋它們。解決方法是把變量封裝在一個匿名函數(shù)中。?例如，下面的定義將產(chǎn)生三個全局變量和和兩個全局函數(shù)：? ?var?name?=?'Chris'; ?var?age?=?'34'; ?var?status?=?'single'; ?function?createMember(){ ?//?[...] ?} ?function?getMemberDetails(){ ?//?[...] ?}封裝后如下：??? var?myApplication?=?function(){ ?var?name?=?'Chris'; ?var?age?=?'34'; ?var?status?=?'single'; ?return{ ?createMember:function(){ ?//?[...] ?}, ?getMemberDetails:function(){ ?//?[...] ?} ?} ?}(); ?//?myApplication.createMember()?and ?//?myApplication.getMemberDetails()?now?works.這被稱為單體模式，是JavaScript設(shè)計模式的一種，這種模式在YUI中用得非常多，改進的寫法是：?? var?myApplication?=?function(){ ?var?name?=?'Chris'; ?var?age?=?'34'; ?var?status?=?'single'; ?function?createMember(){ ?//?[...] ?} ?function?getMemberDetails(){ ?//?[...] ?} ?return{ ?create:createMember, ?get:getMemberDetails ?} ?}(); ?//myApplication.get()?and?myApplication.create()?now?work.（6）代碼可配置你寫的代碼如果想讓別人更容易進行使用或者修改，則需要可配置，解決方案是在你寫的腳本中增加一個配置對象。要點如下：1、在你的腳本中新增一個叫configuration的對象。2、在配置對象中存放所有其它人可能想要去改變的東西，例如CSS的ID、class名稱、語言等等。3、返回這個對象，作為公共屬性以便其它人可以進行重寫。（7）代碼兼容性兼容性是初學(xué)者容易忽略的部分，通常學(xué)習(xí)Javascript的時候都是在某 個固定的瀏覽器中進行測試，而這個瀏覽器很有可能就是IE，這是非常致命的，因為目前幾大主流瀏覽器中偏偏IE對標(biāo)準(zhǔn)的支持是最差的。最終用戶看到的結(jié)果 也許就是，你寫的代碼在某個瀏覽器無法正確運行。你應(yīng)該把你的代碼在主流的瀏覽器中都測試一下，這也許很費時間，但是應(yīng)該這樣做。