早該知道的7個JavaScript技巧

作者：外刊IT評論 2012-02-13 13:44:46

我寫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  
}

簡單多了，你不需要反復使用這個對象的名稱。

這樣 car 就定義好了，也許你會遇到 invalidUserInSession 的問題，這只有你在使用IE時會碰到，只要記住一點，不要右大括號前面寫分號，你就不會有麻煩。

另外一個十分方便的簡寫是針對數組的。

傳統的定義數組的方法是這樣：

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

簡寫版的是這樣：

var moviesThatNeedBetterWriters  
= [  
'Transformers','Transformers2','Avatar','Indiana  
Jones 4'  
];

對于數組，這里有個問題，其實沒有什么圖組功能。但你會經常發現有人這樣定義上面的car ，就像這樣

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;

當條件為true 時取問號后面的值，否則取冒號后面的值。

用 JSON 形式存儲數據

在我發現JSON之前，我使用各種瘋狂的方法把數據存貯在JavaScript固有的數據類型里面，例如：數組，字符串，中間夾雜著容易進行拆分的標志符號以及其它的令人討厭的東西。

Douglas Crockford 發明了JSON 之后，一切全變了。

使用JSON，你可以使用JavaScript自有功能把數據存貯成復雜的格式，而且不需要再做其它的額外轉換，直接可以訪問使用。

JSON 是 “JavaScript Object Notation” 的縮寫，它用到了上面提到的兩種簡寫方法。

于是，如果你想描述一個樂隊，你可能會像這樣寫：

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的返回值形式。

我們把這稱作 JSON-P ，很多的API都使用這種形式。

你可以調用一個數據提供源，在script代碼里直接返回 JSON-P 數據：

<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>

這是調用 Delicious 網站提供的 Web service 功能，獲得JSON格式的最近的無序書簽列表。

基本上，JSON是最輕便的描述復雜數據結構的方法，而且它能在瀏覽器里運行。

你甚至可以在PHP里用 json_decode() 函數來運行它。

JavaScript的自帶函數(Math, Array 和 String)

讓我感到驚奇的一個事情是，當我研究了JavaScript里的math和String函數后，發現它們能極大的簡化我的編程勞動。

使用它們，你可以省去復雜的循環處理和條件判斷。

例如，當我需要實現一個功能，找出數字數組里最大的一個數時，我過去是這樣寫出這個循環的，就像下面：

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);

我們不用循環也能實現：

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

需要注意的是，你不能對一個數字字符數組進行 sort() ，因為這種情況下它只會按照字母順序進行排序。

如果你想知道更多的用法，可以閱讀這篇不錯的關于sort() 的文章。

再有一個有意思的函數就是 Math.max()。

這個函數返回參數里的數字里最大的一個數字：

Math.max(12,123,3,2,433,4); // returns 433

因為這個函數能夠校驗數字，并返回其中最大的一個，所以你可以用它來測試瀏覽器對某個特性的支持情況：

var scrollTop=Math.max(  
doc.documentElement.scrollTop,  
doc.body.scrollTop  
);

這個是用來解決IE問題的。你可以獲得當前頁面的 scrollTop 值，但是根據頁面上 DOCTYPE的不同，上面這兩個屬性中只有一個會存放這個值，而另外一個屬性會是 undefined，所以你可以通過使用 Math.max() 得到這個數。

閱讀這篇文章你會得到更多的關于使用數學函數來簡化JavaScript的知識。

另外有一對非常有用的操作字符串的函數是 split() 和 join()。我想最有代表性的例子應該是，寫一個功能，用來給頁面元素附加CSS樣式。

是這樣的，當你給頁面元素附加一個CSS class時，要么它是這個元素的第一個CSS class，或者是它已經有了一些class

, 需要在已有的class后加上一個空格，然后追加上這個class。而當你要去掉這個class時，你也需要去掉這個class前面的空格(這個在過去非常重要，因為有些老的瀏覽器不認識后面跟著空格的class)。

于是，原始的寫法會是這樣：

function addclass(elm,newclass){  
 var c =elm.className;  
elm.className = (c === '') ? newclass : c+' '+newclass;  
}

你可以使用 split() 和 join() 函數自動完成這個任務：

function addclass(elm,newclass){  
 var classes =elm.className.split(' ');  
classes.push(newclass);  
 elm.className = classes.join(' ');  
}

這會確保所有的class都被空格分隔，而且你要追加的class正好放在最后。

事件委派

Web應用都是由事件驅動運轉的。我喜歡事件處理，尤其喜歡自己定義事件。

它能使你的產品可擴展，而不用改動核心代碼。

有一個很大的問題(也可以說是功能強大的表現)，是關于頁面上事件的移除問題。你可以對某個元素安裝一個事件監聽器，事件監聽器就開始運轉工作。

但頁面上沒有任何指示說明這有個監聽器。因為這種不可表現的問題 (這尤其讓一些新手頭疼) ，以及像IE6這樣的”瀏覽器“在太多的使用事件監聽時會出現各種的內存問題，你不得不承認盡量少使用事件編程是個明智的做法。

于是事件委托就出現了。

當頁面上某個元素上的事件觸發時，而在 DOM 繼承關系上，這個元素的所有子元素也能接收到這個事件，這時你可以使用一個在父元素上的事件處理器來處理，而不是使用一堆的各個子元素上的事件監聽器來處理。

究竟是什么意思?這樣說吧，頁面上有很多超鏈接，你不想直接使用這些鏈接，想通過一個函數來調用這個鏈接，

HTML代碼是這樣的：

<h2>Great Web resources</h2>  
<ul id="resources">  
<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://yuiblog.com">YUI Blog</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>

常見的做法是通過循環這些鏈接，將每個鏈接上附加一個事件處理器：

// 典型的事件處理例子  
(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();  
 }  
 };  
})();

因為點擊事件就發生在這些頁面元素里，你要做的就是比較它們的 nodeName，找出應該回應這個事件的那個元素。

免責聲明：上面說的這兩個關于事件的例子，在所有瀏覽器里都能運行，除了IE6，在IE6上你需要使用一個事件模型，而不是簡單的W3C的標準實現。這也就是我們推薦使用一些工具包的原因。

這種方法的好處并不是僅限于把多個事件處理器縮減為一個。你想想，舉個例子，你需要動態的往這個鏈接表里追加更多的鏈接。使用事件委托后，你就不需要做其它修改了;否則的話，你需要重新循環這個鏈接表，重新給每個鏈接安裝事件處理器。

#p#

匿名函數和模塊化

在JavaScript里最令人懊惱的事情是變量沒有使用范圍。任何變量，函數，數組，對象，只要不在函數內部，都被認為是全局的，這就是說，這個頁面上的其它腳本也可以訪問它，而且可以覆蓋重寫它。

解決辦法是，把你的變量放在一個匿名函數內部，定義完之后立即調用它。

例如，下面的寫法將會產生三個全局變量和兩個全局函數：

var name = 'Chris';  
var age = '34';  
var status = 'single';  
function createMember(){  
 // [...]  
}  
function getMemberDetails(){  
 // [...]  
}

如果這個頁面上的其它腳本里也存在一個叫 status 的變量，麻煩就會出現。

如果我們把它們封裝在一個 myApplication 里，

這個問題就迎刃而解了：

var myApplication= function(){  
var name = 'Chris';  
var age = '34';  
var status = 'single';  
function createMember(){  
// [...]  
 }  
function getMemberDetails(){  
 // [...]  
 }  
}();

但是，這樣一來，在函數外面就沒有什么功能了。如果這是你需要的，那就可以了。你還可以省去函數的名稱：

(function(){  
var name = 'Chris';  
var age = '34';  
 var status = 'single';  
 function createMember(){  
// [...]  
 }  
 function getMemberDetails(){  
 // [...]  
 }  
})();

如果你想在函數外面也能使用里面的東西，那就要做些修改。

為了能訪問 createMember() 或 getMemberDetails(),

你需要把它們變成 myApplication的屬性，從而把它們暴露于外部的世界:

var myApplication = function(){  
 var name = 'Chris';  
 var age = '34';  
 var status = 'single';  
 return{  
 createMember:function(){  
// [...]  
 },  
 getMemberDetails:function(){  
 // [...]  
 }  
 }  
}();  
//myApplication.createMember() 和  
//myApplication.getMemberDetails() 就可以使用了。

這被稱作 module 模式或 singleton。

Douglas Crockford 多次談到過這些，Yahoo User Interface Library YUI 里對此有大量的使用。

但這樣一來讓我感到不便的是，我需要改變句式來使函數和變量能被外界訪問。更甚者，調用時我還需要加上myApplication 這個前綴。所以，我不喜歡這樣做，我更愿意簡單的把需要能被外界訪問的元素的指針導出來。這樣做后，反倒簡化了外界調用的寫法：

 var myApplication = function(){  
 var name = 'Chris';  
 var age = '34';  
 var status = 'single';  
 function createMember(){  
 // [...]  
 }  
 function getMemberDetails(){  
 // [...]  
 }  
 return{  
 create:createMember,  
 get:getMemberDetails  
 }  
}();  
//現在寫成 myApplication.get()和 myApplication.create() 就行了。

我把這個稱作 “revealing

module pattern.”

可配置化

一旦我把所寫的JavaScript代碼發布到這個世界上，就有人想改動它，通常是人們想讓它完成一些它本身完成不了的任務—但通常也是我寫的程序不夠靈活，沒有提供用戶可自定義的功能。

解決辦法是給你的腳本增加一個配置項對象。

我曾經寫過一篇深入介紹JavaScript配置項對象的文章，下面是其中的要點：

在你的腳本了添加一個叫做 configuration 的對象。

這個對象里面，存放所有人們在使用這個腳本時經常要改動的東西：

CSS ID 和類名稱;

按鈕的名稱，標簽字等;

諸如”每頁顯示圖片數”的值， “圖像的顯示的尺寸”的值;

地點，位置，以及語言設置。

將這個對象作為一個公用屬性返回給用戶，這樣用戶可以修改覆蓋它。

通常情況下這是你編程過程中的最后一步要做的事情。我把這些集中表現在了一個例子里： “Five

things to do to a script before handing it over to the next developer.”

實際上，你也希望你的代碼能夠讓人們很方面的使用，并且根據他們各自的需要進行一些改動。

如果你實現了這個功能，你會少收到一些抱怨你的腳本的人發送給你的讓你困惑的郵件，這些信件會告訴你，有人修改了你的腳本，而且很好用。

與后臺交互

在這么多年的編程經歷中，我所領悟到的一個重要的事情就是，JavaScript是一個很優秀的開發界面交互的語言，但如果用來處理數字或訪問數據源，那就有點使不上勁了。

最初，我學習JavaScript，是用來替代Perl的，因為我很討厭非要把代碼拷貝到 cgi-bin 文件夾下才能使Perl運行。

后來，我明白了應該使用一種后臺工作的語言來處理主要的數據，而不能什么事情都讓JavaScript去做。更重要的是我們要考慮安全性和語言特征。

如果我訪問一個Web service, 我可以獲取到JSON-P 格式的數據，在客戶端瀏覽器里我把它做各種各樣的數據轉換，

但當我有了服務器時，我有了更多的方法來轉換數據，我可以在Server端生成JSON或HTML格式的數據返回給客戶端，以及緩存數據等操作。

如果你事先了解了并準備了這些，你會長期收益，省去了很多頭疼的時間。

編寫適用各種瀏覽器的程序是種浪費時間，使用工具包吧!

在我最初開始搞Web開發時，在訪問頁面時，究竟是使用 document.all 還是使用document.layers 的問題上痛苦的掙扎了很久。

我選擇了 document.layers，因為我喜歡任何層都是自己的document的思想 (而且我寫了太多的 document.write 來生成元素)。

層模式最終失敗了，于是我開始使用 document.all。

當Netscape 6 公布只支持 W3C DOM 模型時，我很高興，但其實用戶并不關心這些。

用戶只是看見這種瀏覽器不能顯示大多數瀏覽器都能正常顯示的東西—這是我們編碼的問題。

我們編寫了短視的代碼，只能運行在當前的環境下，而不幸的是，我們的運行環境卻在不停的改變。

我已經浪費了太多的時間來處理對各種瀏覽器各種版本兼容的問題。

善于處理這類問題提供了我一個好的工作機會。但現在我們不必在忍受這種痛苦了。

一些工具包，例如 YUI, jQuery 以及

Dojo 都能夠幫我們處理這類問題。

它們通過抽象各種接口實現來處理瀏覽器的各種問題，像版本不兼容，設計缺陷等，把我們從痛苦中解救出來。

除非你要測試某個Beta版的瀏覽器，千萬不要在自己的程序里添加修正瀏覽器的缺陷的代碼，

因為你很有可能當瀏覽器已經修改了這個問題時，你卻忘了刪除你的代碼。

另一方面，完全依賴于工具包也是個短視的行為。工具包可以幫你快速的開發，但如果你不深入理解JavaScript，你也會做錯事。

原文：http://www.aqee.net/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/

【編輯推薦】

你了解JavaScript中的function嗎?
JavaScript MVC框架backbone.js初探
你了解JavaScript中的function嗎?
JavaScript面向對象編程
10個強大的JavaScript表單驗證插件

責任編輯：陳貽新來源：外刊IT評論

JavaScript

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

早該知道的7個JavaScript技巧