每種語言都有它特別的地方對於JavaScript來說使用var就可以聲明任意類型的變量這門腳本語言看起來很簡單然而想要寫出優雅的代碼卻是需要不斷積累經驗的本文利列舉了JavaScript初學者應該注意的七個細節與大家分享
（）簡化代碼
JavaScript定義對象和數組非常簡單我們想要創建一個對象一般是這樣寫的
var car = new Object();
carcolour = red;
carwheels = ;
carhubcaps = spinning;
carage = ;
下面的寫法可以達到同樣的效果
var car = {
colour:red
wheels:
hubcaps:spinning
age:
}
後面的寫法要短得多而且你不需要重復寫對象名稱
另外對於數組同樣有簡潔的寫法過去我們聲明數組是這樣寫的
var moviesThatNeedBetterWriters = new Array(
TransformersTransformersAvatarIndiana Jones
);
更簡潔的寫法是
var moviesThatNeedBetterWriters = [
TransformersTransformersAvatarIndiana Jones
];
對於數組還有關聯數組這樣一個特別的東西 你會發現很多代碼是這樣定義對象的
var car = new Array();
car[colour] = red;
car[wheels] = ;
car[hubcaps] = spinning;
car[age] = ;
這太瘋狂了不要覺得困惑“關聯數組”只是對象的一個別名而已
另外一個簡化代碼的方法是使用三元運算符舉個例子
var direction;
if(x < ){
direction = ;
} else {
direction = ;
}
我們可以使用如下的代碼替換這種寫法
var direction = x < ? : ;
（）使用JSON作為數據格式
偉大的Douglas Crockford發明了JSON數據格式來存儲數據你可以使用原生的javascript方法來存儲復雜的數據而不需要進行任何額外的轉換例如
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":"drumspercussion"
}
{
"name":"John Frusciante"
"role":"Lead Guitar"
}
]
"year":""
}
你可以使用在JavaScript中直接使用JSON甚至作為API返回的一種格式在許多的API中被應用例如
<div id="delicious"></div><script>
function delicious(o){
var out = <ul>;
for(var i=;i<olength;i++){
out += <li><a href=" + o[i]u + "> +
o[i]d + </a></li>;
}
out += </ul>;
documentgetElementById(delicious)innerHTML = out;
}
</script>
<script src="
這裡調用delicious 的Web服務獲取最新書簽以JSON格式返回然後將它們顯示成無序列表的形式
從本質上講JSON是用於描述復雜的數據最輕量級的方式而且直接它運行在浏覽器中 你甚至可以在PHP中調用 json_decode（）函數來使用它
（）盡量使用JavaScript原生函數
要找一組數字中的最大數我們可能會寫一個循環例如
var numbers = [];
var max = ;
for(var i=;i<numberslength;i++){
if(numbers[i] > max){
max = numbers[i];
}
}
alert(max);
其實不用循環可以實現同樣的功能
var numbers = [];
numberssort(function(ab){returnb a});
alert(numbers[]);
而最簡潔的寫法是
Mathmax(); // returns
你甚至可以使用Mathmax來檢測浏覽器支持哪個屬性
var scrollTop= Mathmax(
docdocumentElementscrollTop
docbodyscrollTop
);
如果你想給一個元素增加class樣式可能原始的寫法是這樣的
function addclass(elmnewclass){
var c = elmclassName;
elmclassName = (c === ) ? newclass : c+ +newclass;
而更優雅的寫法是
function addclass(elmnewclass){
var classes = elmclassNamesplit( );
classespush(newclass);
elmclassName = classesjoin( );
}
（）事件委托
事件是JavaScript非常重要的一部分我們想給一個列表中的鏈接綁定點擊事件一般的做法是寫一個循環給每個鏈接對象綁定事件HTML代碼如下
<h>Great Web resources</h>
<ul id="resources">
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
</ul>
腳本如下
// Classic event handling example
(function(){
var resources = documentgetElementById(resources);
var links = resourcesgetElementsByTagName(a);
var all = linkslength;
for(var i=;i<all;i++){
// Attach a listener to each link
links[i]addEventListener(clickhandlerfalse);
};
function handler(e){
var x = etarget; // Get the link that was clicked
alert(x);
epreventDefault();
};
})();
更合理的寫法是只給列表的父對象綁定事件代碼如下
(function(){
var resources = documentgetElementById(resources);
resourcesaddEventListener(clickhandlerfalse);
function handler(e){
var x = etarget; // get the link tha
if(xnodeNametoLowerCase() === a){
alert(Event delegation: + x);
epreventDefault();
}
};
})();
（）匿名函數
關於JavaScript的最頭疼的事情之一是它的變量沒有特定的作用范圍 一般情況下任何變量函數數組或對象都是全局性這意味著在同一頁上的其他腳本可以訪問並覆蓋它們解決方法是把變量封裝在一個匿名函數中 例如下面的定義將產生三個全局變量和和兩個全局函數
var name = Chris;
var age = ;
var status = single;
function createMember(){
// []
}
function getMemberDetails(){
// []
}
封裝後如下
var myApplication = function(){
var name = Chris;
var age = ;
var status = single;
return{
createMember:function(){
// []
}
getMemberDetails:function(){
// []
}
}
}();
// myApplicationcreateMember() and
// myApplicationgetMemberDetails() now works
這被稱為單體模式是JavaScript設計模式的一種這種模式在YUI中用得非常多改進的寫法是
var myApplication = function(){
var name = Chris;
var age = ;
var status = single;
function createMember(){
// []
}
function getMemberDetails(){
// []
}
return{
create:createMember
get:getMemberDetails
}
}();
//myApplicationget() and myApplicationcreate() now work
（）代碼可配置
你寫的代碼如果想讓別人更容易進行使用或者修改則需要可配置解決方案是在你寫的腳本中增加一個配置對象要點如下
在你的腳本中新增一個叫configuration的對象
在配置對象中存放所有其它人可能想要去改變的東西例如CSS的IDclass名稱語言等等
返回這個對象作為公共屬性以便其它人可以進行重寫
（）代碼兼容性
兼容性是初學者容易忽略的部分通常學習Javascript的時候都是在某個固定的浏覽器中進行測試而這個浏覽器很有可能就是IE這是非常致命的因為目前幾大主流浏覽器中偏偏IE對標准的支持是最差的最終用戶看到的結果也許就是你寫的代碼在某個浏覽器無法正確運行你應該把你的代碼在主流的浏覽器中都測試一下這也許很費時間但是應該這樣做
From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20371.html
