早該知道的7個(gè)JavaScript技巧
我寫JavaScript代碼已經(jīng)很久了，都記不起是什么年代開始的了。對于JavaScript這種語言近幾年所取得的成就，我感到非常的興奮;我很幸運(yùn)也是這些成就的獲益者。我寫了不少的文章，章節(jié)，還有一本專門討論它的書，然而，我現(xiàn)在依然能發(fā)現(xiàn)一些關(guān)于這種語言的新知識。下面的描述的就是過去讓我不由得發(fā)出“啊!”的感嘆的編程技巧，這些技巧你應(yīng)該現(xiàn)在就試試，而不是等著未來的某個(gè)時(shí)候偶然的發(fā)現(xiàn)它們。
簡潔寫法
JavaScript里我最喜歡的一種東西就是生成對象和數(shù)組的簡寫方法。
在過去，如果你想創(chuàng)建一個(gè)對象，你需要這樣：
- 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ù)使用這個(gè)對象的名稱。
這樣 car 就定義好了，也許你會遇到 invalidUserInSession 的問題，這只有你在使用IE時(shí)會碰到，只要記住一點(diǎn)，不要右大括號前面寫分號，你就不會有麻煩。
另外一個(gè)十分方便的簡寫是針對數(shù)組的。
傳統(tǒng)的定義數(shù)組的方法是這樣：
- var moviesThatNeedBetterWriters
- = new Array(
- 'Transformers','Transformers2','Avatar','Indiana
- Jones 4'
- );
簡寫版的是這樣：
- var moviesThatNeedBetterWriters
- = [
- 'Transformers','Transformers2','Avatar','Indiana
- Jones 4'
- ];
對于數(shù)組，這里有個(gè)問題，其實(shí)沒有什么圖組功能。但你會經(jīng)常發(fā)現(xiàn)有人這樣定義上面的car ，就像這樣
- var car = new Array();
- car['colour'] = 'red';
- car['wheels'] = 4;
- car['hubcaps'] = 'spinning';
- car['age'] = 4;
數(shù)組不是萬能的;這樣寫不對，會讓人困惑。圖組實(shí)際上是對象的功能，人們混淆了這兩個(gè)概念。
另外一個(gè)非?？岬暮唽懛椒ㄊ鞘褂门c三元條件符號。
你不必寫成下面的樣子…
- var direction;
- if(x < 200){
- direction = 1;
- } else {
- direction = -1;
- }
你可以使用三元條件符號簡化它：
- var direction
- = x < 200 ? 1 : -1;
當(dāng)條件為true 時(shí)取問號后面的值，否則取冒號后面的值。
用 JSON 形式存儲數(shù)據(jù)
在我發(fā)現(xiàn)JSON之前，我使用各種瘋狂的方法把數(shù)據(jù)存貯在JavaScript固有的數(shù)據(jù)類型里面，例如：數(shù)組，字符串，中間夾雜著容易進(jìn)行拆分的標(biāo)志符號以及其它的令人討厭的東西。
Douglas Crockford 發(fā)明了JSON 之后，一切全變了。
使用JSON，你可以使用JavaScript自有功能把數(shù)據(jù)存貯成復(fù)雜的格式，而且不需要再做其它的額外轉(zhuǎn)換，直接可以訪問使用。
JSON 是 “JavaScript Object Notation” 的縮寫，它用到了上面提到的兩種簡寫方法。
于是，如果你想描述一個(gè)樂隊(duì)，你可能會像這樣寫：
- 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，可以把它封裝在函數(shù)里，甚至作為一個(gè)API的返回值形式。
我們把這稱作 JSON-P ，很多的API都使用這種形式。
你可以調(diào)用一個(gè)數(shù)據(jù)提供源，在script代碼里直接返回 JSON-P 數(shù)據(jù)：
- <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 網(wǎng)站提供的 Web service 功能，獲得JSON格式的最近的無序書簽列表。
基本上，JSON是最輕便的描述復(fù)雜數(shù)據(jù)結(jié)構(gòu)的方法，而且它能在瀏覽器里運(yùn)行。
你甚至可以在PHP里用 json_decode() 函數(shù)來運(yùn)行它。
JavaScript的自帶函數(shù)(Math, Array 和 String)
讓我感到驚奇的一個(gè)事情是，當(dāng)我研究了JavaScript里的math和String函數(shù)后，發(fā)現(xiàn)它們能極大的簡化我的編程勞動(dòng)。
使用它們，你可以省去復(fù)雜的循環(huán)處理和條件判斷。
例如，當(dāng)我需要實(shí)現(xiàn)一個(gè)功能，找出數(shù)字?jǐn)?shù)組里最大的一個(gè)數(shù)時(shí)，我過去是這樣寫出這個(gè)循環(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)也能實(shí)現(xiàn)：
- var numbers =[3,342,23,22,124];
- numbers.sort(function(a,b){return b -a});
- alert(numbers[0]);
需要注意的是，你不能對一個(gè)數(shù)字字符數(shù)組進(jìn)行 sort() ，因?yàn)檫@種情況下它只會按照字母順序進(jìn)行排序。
如果你想知道更多的用法，可以閱讀 這篇不錯(cuò)的關(guān)于sort() 的文章。
再有一個(gè)有意思的函數(shù)就是 Math.max()。
這個(gè)函數(shù)返回參數(shù)里的數(shù)字里最大的一個(gè)數(shù)字：
- Math.max(12,123,3,2,433,4); // returns 433
因?yàn)檫@個(gè)函數(shù)能夠校驗(yàn)數(shù)字，并返回其中最大的一個(gè)，所以你可以用它來測試瀏覽器對某個(gè)特性的支持情況：
- var scrollTop=Math.max(
- doc.documentElement.scrollTop,
- doc.body.scrollTop
- );
這個(gè)是用來解決IE問題的。你可以獲得當(dāng)前頁面的 scrollTop 值，但是根據(jù)頁面上 DOCTYPE的不同，上面這兩個(gè)屬性中只有一個(gè)會存放這個(gè)值，而另外一個(gè)屬性會是 undefined，所以你可以通過使用 Math.max() 得到這個(gè)數(shù)。
閱讀這篇文章你會得到更多的關(guān)于使用數(shù)學(xué)函數(shù)來簡化JavaScript的知識。
另外有一對非常有用的操作字符串的函數(shù)是 split() 和 join()。我想最有代表性的例子應(yīng)該是，寫一個(gè)功能，用來給頁面元素附加CSS樣式。
是這樣的，當(dāng)你給頁面元素附加一個(gè)CSS class時(shí)，要么它是這個(gè)元素的第一個(gè)CSS class，或者是它已經(jīng)有了一些class
, 需要在已有的class后加上一個(gè)空格，然后追加上這個(gè)class。而當(dāng)你要去掉這個(gè)class時(shí)，你也需要去掉這個(gè)class前面的空格(這個(gè)在過去非常重要，因?yàn)橛行├系臑g覽器不認(rèn)識后面跟著空格的class)。
于是，原始的寫法會是這樣：
- function addclass(elm,newclass){
- var c =elm.className;
- elm.className = (c === '') ? newclass : c+' '+newclass;
- }
你可以使用 split() 和 join() 函數(shù)自動(dòng)完成這個(gè)任務(wù)：
- function addclass(elm,newclass){
- var classes =elm.className.split(' ');
- classes.push(newclass);
- elm.className = classes.join(' ');
- }
這會確保所有的class都被空格分隔，而且你要追加的class正好放在最后。
事件委派
Web應(yīng)用都是由事件驅(qū)動(dòng)運(yùn)轉(zhuǎn)的。我喜歡事件處理，尤其喜歡自己定義事件。
它能使你的產(chǎn)品可擴(kuò)展，而不用改動(dòng)核心代碼。
有一個(gè)很大的問題(也可以說是功能強(qiáng)大的表現(xiàn))，是關(guān)于頁面上事件的移除問題。你可以對某個(gè)元素安裝一個(gè)事件監(jiān)聽器，事件監(jiān)聽器就開始運(yùn)轉(zhuǎn)工作。
但頁面上沒有任何指示說明這有個(gè)監(jiān)聽器。因?yàn)檫@種不可表現(xiàn)的問題 (這尤其讓一些新手頭疼) ，以及像IE6這樣的”瀏覽器“在太多的使用事件監(jiān)聽時(shí)會出現(xiàn)各種的內(nèi)存問題，你不得不承認(rèn)盡量少使用事件編程是個(gè)明智的做法。
于是 事件委托 就出現(xiàn)了。
當(dāng)頁面上某個(gè)元素上的事件觸發(fā)時(shí)，而在 DOM 繼承關(guān)系上，這個(gè)元素的所有子元素也能接收到這個(gè)事件，這時(shí)你可以使用一個(gè)在父元素上的事件處理器來處理，而不是使用一堆的各個(gè)子元素上的事件監(jiān)聽器來處理。
究竟是什么意思?這樣說吧，頁面上有很多超鏈接，你不想直接使用這些鏈接，想通過一個(gè)函數(shù)來調(diào)用這個(gè)鏈接，
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>
常見的做法是通過循環(huán)這些鏈接，將每個(gè)鏈接上附加一個(gè)事件處理器：
- // 典型的事件處理例子
- (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();
- };
- })();
我們用一個(gè)事件處理器也能完成這項(xiàng)任務(wù)：
- (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();
- }
- };
- })();
因?yàn)辄c(diǎn)擊事件就發(fā)生在這些頁面元素里，你要做的就是比較它們的 nodeName，找出應(yīng)該回應(yīng)這個(gè)事件的那個(gè)元素。
免責(zé)聲明：上面說的這兩個(gè)關(guān)于事件的例子，在所有瀏覽器里都能運(yùn)行，除了IE6，在IE6上你需要使用一個(gè)事件模型，而不是簡單的W3C的標(biāo)準(zhǔn)實(shí)現(xiàn)。這也就是我們推薦使用一些工具包的原因。
這種方法的好處并不是僅限于把多個(gè)事件處理器縮減為一個(gè)。你想想，舉個(gè)例子，你需要?jiǎng)討B(tài)的往這個(gè)鏈接表里追加更多的鏈接。使用事件委托后，你就不需要做其它修改了;否則的話，你需要重新循環(huán)這個(gè)鏈接表，重新給每個(gè)鏈接安裝事件處理器。
#p#
匿名函數(shù)和模塊化
在JavaScript里最令人懊惱的事情是變量沒有使用范圍。任何變量，函數(shù)，數(shù)組，對象，只要不在函數(shù)內(nèi)部，都被認(rèn)為是全局的，這就是說，這個(gè)頁面上的其它腳本也可以訪問它，而且可以覆蓋重寫它。
解決辦法是，把你的變量放在一個(gè)匿名函數(shù)內(nèi)部，定義完之后立即調(diào)用它。
例如，下面的寫法將會產(chǎn)生三個(gè)全局變量和兩個(gè)全局函數(shù)：
- var name = 'Chris';
- var age = '34';
- var status = 'single';
- function createMember(){
- // [...]
- }
- function getMemberDetails(){
- // [...]
- }
如果這個(gè)頁面上的其它腳本里也存在一個(gè)叫 status 的變量，麻煩就會出現(xiàn)。
如果我們把它們封裝在一個(gè) myApplication 里，
這個(gè)問題就迎刃而解了：
- var myApplication= function(){
- var name = 'Chris';
- var age = '34';
- var status = 'single';
- function createMember(){
- // [...]
- }
- function getMemberDetails(){
- // [...]
- }
- }();
但是，這樣一來，在函數(shù)外面就沒有什么功能了。如果這是你需要的，那就可以了。你還可以省去函數(shù)的名稱：
- (function(){
- var name = 'Chris';
- var age = '34';
- var status = 'single';
- function createMember(){
- // [...]
- }
- function getMemberDetails(){
- // [...]
- }
- })();
如果你想在函數(shù)外面也能使用里面的東西，那就要做些修改。
為了能訪問 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 里對此有大量的使用。
但這樣一來讓我感到不便的是，我需要改變句式來使函數(shù)和變量能被外界訪問。更甚者，調(diào)用時(shí)我還需要加上myApplication 這個(gè)前綴。所以，我不喜歡這樣做，我更愿意簡單的把需要能被外界訪問的元素的指針導(dǎo)出來。這樣做后，反倒簡化了外界調(diào)用的寫法：
- var myApplication = function(){
- var name = 'Chris';
- var age = '34';
- var status = 'single';
- function createMember(){
- // [...]
- }
- function getMemberDetails(){
- // [...]
- }
- return{
- create:createMember,
- get:getMemberDetails
- }
- }();
- //現(xiàn)在寫成 myApplication.get()和 myApplication.create() 就行了。
我把這個(gè)稱作 “revealing
module pattern.”
可配置化
一旦我把所寫的JavaScript代碼發(fā)布到這個(gè)世界上，就有人想改動(dòng)它，通常是人們想讓它完成一些它本身完成不了的任務(wù)—但通常也是我寫的程序不夠靈活，沒有提供用戶可自定義的功能。
解決辦法是給你的腳本增加一個(gè)配置項(xiàng)對象。
我 曾經(jīng)寫過一篇深入介紹JavaScript配置項(xiàng)對象的文章，下面是其中的要點(diǎn)：
在你的腳本了添加一個(gè)叫做 configuration 的對象。
這個(gè)對象里面，存放所有人們在使用這個(gè)腳本時(shí)經(jīng)常要改動(dòng)的東西：
CSS ID 和類名稱;
按鈕的名稱，標(biāo)簽字等;
諸如”每頁顯示圖片數(shù)”的值， “圖像的顯示的尺寸”的值;
地點(diǎn)，位置，以及語言設(shè)置。
將這個(gè)對象作為一個(gè)公用屬性返回給用戶，這樣用戶可以修改覆蓋它。
通常情況下這是你編程過程中的最后一步要做的事情。我把這些集中表現(xiàn)在了一個(gè)例子里： “Five
things to do to a script before handing it over to the next developer.”
實(shí)際上，你也希望你的代碼能夠讓人們很方面的使用，并且根據(jù)他們各自的需要進(jìn)行一些改動(dòng)。
如果你實(shí)現(xiàn)了這個(gè)功能，你會少收到一些抱怨你的腳本的人發(fā)送給你的讓你困惑的郵件，這些信件會告訴你，有人修改了你的腳本，而且很好用。
與后臺交互
在這么多年的編程經(jīng)歷中，我所領(lǐng)悟到的一個(gè)重要的事情就是，JavaScript是一個(gè)很優(yōu)秀的開發(fā)界面交互的語言，但如果用來處理數(shù)字或訪問數(shù)據(jù)源，那就有點(diǎn)使不上勁了。
最初，我學(xué)習(xí)JavaScript，是用來替代Perl的，因?yàn)槲液苡憛挿且汛a拷貝到 cgi-bin 文件夾下才能使Perl運(yùn)行。
后來，我明白了應(yīng)該使用一種后臺工作的語言來處理主要的數(shù)據(jù)，而不能什么事情都讓JavaScript去做。更重要的是我們要考慮安全性和語言特征。
如果我訪問一個(gè)Web service, 我可以獲取到JSON-P 格式的數(shù)據(jù)，在客戶端瀏覽器里我把它做各種各樣的數(shù)據(jù)轉(zhuǎn)換，
但當(dāng)我有了服務(wù)器時(shí)，我有了更多的方法來轉(zhuǎn)換數(shù)據(jù)，我可以在Server端生成JSON或HTML格式的數(shù)據(jù)返回給客戶端，以及緩存數(shù)據(jù)等操作。
如果你事先了解了并準(zhǔn)備了這些，你會長期收益，省去了很多頭疼的時(shí)間。
編寫適用各種瀏覽器的程序是種浪費(fèi)時(shí)間，使用工具包吧!
在我最初開始搞Web開發(fā)時(shí)，在訪問頁面時(shí)，究竟是使用 document.all 還是使用document.layers 的問題上痛苦的掙扎了很久。
我選擇了 document.layers，因?yàn)槲蚁矚g任何層都是自己的document的思想 (而且我寫了太多的 document.write 來生成元素)。
層模式最終失敗了，于是我開始使用 document.all。
當(dāng)Netscape 6 公布只支持 W3C DOM 模型時(shí)，我很高興，但其實(shí)用戶并不關(guān)心這些。
用戶只是看見這種瀏覽器不能顯示大多數(shù)瀏覽器都能正常顯示的東西—這是我們編碼的問題。
我們編寫了短視的代碼，只能運(yùn)行在當(dāng)前的環(huán)境下，而不幸的是，我們的運(yùn)行環(huán)境卻在不停的改變。
我已經(jīng)浪費(fèi)了太多的時(shí)間來處理對各種瀏覽器各種版本兼容的問題。
善于處理這類問題提供了我一個(gè)好的工作機(jī)會。但現(xiàn)在我們不必在忍受這種痛苦了。
一些工具包，例如 YUI, jQuery 以及
Dojo 都能夠幫我們處理這類問題。
它們通過抽象各種接口實(shí)現(xiàn)來處理瀏覽器的各種問題，像版本不兼容，設(shè)計(jì)缺陷等，把我們從痛苦中解救出來。
除非你要測試某個(gè)Beta版的瀏覽器，千萬不要在自己的程序里添加修正瀏覽器的缺陷的代碼，
因?yàn)槟愫苡锌赡墚?dāng)瀏覽器已經(jīng)修改了這個(gè)問題時(shí)，你卻忘了刪除你的代碼。
另一方面，完全依賴于工具包也是個(gè)短視的行為。工具包可以幫你快速的開發(fā)，但如果你不深入理解JavaScript，你也會做錯(cuò)事。
原文：http://www.aqee.net/seven-javascript-things-i-wish-i-knew-much-earlier-in-my-career/
【編輯推薦】
