JavaScript初學者應注意的七個細節詳細介紹_基礎知識

種語言都有它特別的地方，對於JavaScript來說，使用var就可以聲明任意類型的變量，這門腳本語言看起來很簡單，然而想要寫出優雅的程式碼​​卻是需要不斷累積經驗的。本文利列舉了JavaScript初學者應該注意的七個細節，與大家分享。
（1）簡化程式碼
--------------------------------- -----------------------------------------------
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
hubcaps:'spinning',
age:4
hubcaps:'spinning',

age:4
}

後面的寫法短得多，而且你不需要重複寫物件名稱。 另外對於陣列同樣有簡潔的寫法，過去我們聲明數組是這樣寫的：

複製程式碼

程式碼如下:

var moviesThatNeedBetterWriters = new Array(
'Transformers','Transformers2','Avatar','Indiana Jones 4'
);

簡潔的寫法是：

複製程式碼

程式碼如下:


var movThatNeed> '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 direction = 1;
} else { direction = -1; }
}

我們可以用以下的程式碼來取代這個寫法： 複製程式碼

程式碼如下:
var direction = x


（2）使用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":"drums,percussion" },

"role":"drums,percussion" }, "role":"drums,percussion" }, "role":"drums,percussion" }, "role":"drums,percussion" }, "role":"drums,percussion" }, 」 >{ "name":"John Frusciante", "role":"Lead Guitar" } ], "year":"2009" } 你可以使用在JavaScript中直接使用JSON，甚至作為API返回的一種格式，在許多的API中被應用，例如： 複製程式碼 程式碼如下:

<script> <BR>function delicious(o){ <BR>var out = '<ul>'; <BR>for(var i= 0;i<o.length;i ){ <BR>out = '<li><a href="' o[i].u '">' <BR>o[i].d ' '; <BR>} <BR>out = ''; <BR>document.getElementById('delicious').innerHTML = out; <BR>} <BR></script>

這裡呼叫delicious 的Web服務取得最新書籤，以JSON格式返回，然後將它們顯示成無序列表的形式。
從本質上講，JSON是用來描述複雜的資料最輕量級的方式，而且直接它運行在瀏覽器中。 你甚至可以在PHP中呼叫 json_decode（）函數來使用它。
（3）盡量使用JavaScript原生函數
------------------------------ --------------------------------------------------
要找一組數字中的最大數，我們可能會寫一個循環，例如：

複製程式碼 程式碼如下:

var numbers = [3,342,23,22,124];
var max = 0;
for(var i=0;iif(numbers[i] > max){
max = numbers[i];
}
}
alert(max);

其實，不用循環可以實現相同的功能：

複製程式碼 程式碼如下:

var numbers = [3,342, 23,22,124];
numbers.sort(function(a,b){return b - a});
alert(numbers[0]);

而最簡潔的寫法是：

複製程式碼 程式碼如下:

Math.max(12,1233, ,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;


而更優雅的寫法是：

複製代碼 代碼如下:

function addclass(elm,newclass){

var classes = elm.className.split(' ');
classes.push(newclass);
elm.className = classes.join(' ');
}

（4）事件委託
--------------- -------------------------------------------------- --------------- 事件是JavaScript非常重要的一環。我們想給一個列表中的連結綁定點擊事件，一般的做法是寫一個循環，給每個連結物件綁定事件，HTML程式碼如下：

複製代碼 代碼如下:

優秀的網路資源

• Opera Web 標準課程


• Sitepoint


• A List Apart


• YUI 部落格 li>
  
• 歸咎於聲音


• 奇怪的特定

腳本如下：

複製程式碼程式碼如下：

// 經典事件處理範例
(function(){
var resources = document.getElementById('resources');
var links = resources.getElementsByTagName('a');
var all = links.length;
for(var i=0;i// 為每個連結附加一個監聽器
links[i].addEventListener('click',handler,false) ;
};
function handler(e){
var x = e.target; //取得被點擊的連結
alert(x);
}
})();

更合理的寫法是只給列表的父物件綁定事件，程式碼如下：

複製程式碼 程式碼如下：

(function() {
var resources = document.getElementById('resources');
resources.addEventListener('click ',handler,false);
function handler(e){
var x = e.target ; // 取得連結
if(x.nodeName.toLowerCase() === 'a' ){
alert('事件委託：' x);
e.preventDefault()
}
})();

（5）函數匿名
------------------- ----------------------------------------------------------------- --------- --- 關於JavaScript最頭痛的一件事是，它的變數沒有特定的作用範圍。一般情況下，任何變量，函數，數組或物件都是全局性的，這意味著在同一頁上的其他腳本可以存取並覆蓋它們。解決匿名方法是將裝置封裝在一個函數中。例如，以下的定義將產生三個全域變數和兩個全域函數：

複製程式碼程式碼如下：

var name = 'Chris';

var 年齡= '34';
var status = '單身';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}


封裝後如下：

複製程式碼程式碼如下：

var myApplication = function( ){
var name = 'Chris';
var 年齡= '34';
var status = '單身';
return{
createMember:function(){
// [...]
},
getMemberDetails:function( ){
// [...]
}
}
}();
// myApplication.createMember() 和
// myApplication.getMemberDetails() 現在可以使用。

這稱為語法模式，是JavaScript設計模式的一種，這種模式在YUI中用得非常多，改進的寫法是：

複製程式碼程式碼如下：

var myApplication = function(){
var name = 'Chris';
var 年齡= '34';
var status = '單身';
function createMember(){
// [...]
}
function getMemberDetails(){
// [...]
}
return{
create:createMember,
get:getMemberDetails
}
}();
//myApplication.get() 和myApplication .create() 現在可以工作了。


（6）程式碼可設定
-------------------------------- ------------------------------------------------
你寫的程式碼如果想讓別人更容易進行使用或修改，則需要可配置，解決方案是在你寫的腳本中增加一個配置物件。重點如下：
1、在你的腳本中新增一個叫configuration的物件。
2、在設定物件中存放所有其它人可能想要去改變的東西，例如CSS的ID、class名稱、語言等等。
3、傳回這個對象，作為公共屬性以便其它人可以進行重寫。
（7）程式碼相容性
-------------------------------- ------------------------------------------------
相容性是初學者容易忽略的部分，通常學習Javascript的時候都是在某個固定的瀏覽器中進行測試，而這個瀏覽器很有可能就是IE，這是非常致命的，因為目前幾大主流瀏覽器中偏偏IE對標準的支援是最差的。最終使用者看到的結果也許就是，你寫的程式碼在某個瀏覽器無法正確運作。你應該把你的程式碼在主流的瀏覽器中都測試一下，這也許很花時間，但應該要這樣做。