JavaScript 七大實用技巧:輕松編程
當前位置:點晴教程→知識管理交流
→『 技術文檔交流 』
我寫JavaScript代碼已經很久了,都記不起是什么年代開始的了。對于JavaScript這種語言近幾年所取得的成就,我感到非常的興奮;我很幸運也是這些成就的獲益者。我寫了不少的文章,章節(jié),還有一本專門討論它的書,然而,我現(xiàn)在依然能發(fā)現(xiàn)一些關于這種語言的新知識。下面的描述的就是過去讓我不由得發(fā)出“啊!”的感嘆的編程技巧,這些技巧你應該現(xiàn)在就試試,而不是等著未來的某個時候偶然的發(fā)現(xiàn)它們。 簡潔寫法 JavaScript里我最喜歡的一種東西就是生成對象和數(shù)組的簡寫方法。 在過去,如果你想創(chuàng)建一個對象,你需要這樣: 1 var car = new Object();2 car.colour = "red"; 3 car.wheels = 4; 4 car.hubcaps = "spinning"; 5 car.age = 4;下面的寫法能夠達到同樣的效果: 1 var car = {2 colour:"red", 3 wheels:4, 4 hubcaps:"spinning", 5 age:4 6 }簡單多了,你不需要反復使用這個對象的名稱。 這樣 car 就定義好了,也許你會遇到 invalidUserInSession 的問題,這只有你在使用IE時會碰到,只要記住一點,不要右大括號前面寫分號,你就不會有麻煩。 另外一個十分方便的簡寫是針對數(shù)組的。 傳統(tǒng)的定義數(shù)組的方法是這樣: 1 var moviesThatNeedBetterWriters = new Array(2 "Transformers","Transformers2","Avatar","Indiana Jones 4" 3 );簡寫版的是這樣: 1 var moviesThatNeedBetterWriters = [2 "Transformers","Transformers2","Avatar","Indiana Jones 4" 3 ];對于數(shù)組,這里有個問題,其實沒有什么圖組功能。但你會經常發(fā)現(xiàn)有人這樣定義上面的 car ,就像這樣 1 var car = new Array();2 car["colour"] = "red"; 3 car["wheels"] = 4; 4 car["hubcaps"] = "spinning"; 5 car["age"] = 4;數(shù)組不是萬能的;這樣寫不對,會讓人困惑。圖組實際上是對象的功能,人們混淆了這兩個概念。 另外一個非??岬暮唽懛椒ㄊ鞘褂门c三元條件符號。 你不必寫成下面的樣子… 1 var direction;3 direction = 1; 4 } else { 5 direction = -1; 6 }你可以使用三元條件符號簡化它: 1 var direction = x 200 ? 1 : -1;當條件為true 時取問號后面的值,否則取冒號后面的值。 用 JSON 形式存儲數(shù)據 在我發(fā)現(xiàn)JSON之前,我使用各種瘋狂的方法把數(shù)據存貯在JavaScript固有的數(shù)據類型里面,例如:數(shù)組,字符串,中間夾雜著容易進行拆分的標志符號以及其它的令人討厭的東西。 Douglas Crockford 發(fā)明了JSON 之后,一切全變了。 使用JSON,你可以使用JavaScript自有功能把數(shù)據存貯成復雜的格式,而且不需要再做其它的額外轉換,直接可以訪問使用。 JSON 是 “JavaScript Object Notation” 的縮寫,它用到了上面提到的兩種簡寫方法。 于是,如果你想描述一個樂隊,你可能會像這樣寫: 01 var band = { 02 "name":"The Red Hot Chili Peppers", 03 "members":[ 04 { 05 "name":"Anthony Kiedis", 06 "role":"lead vocals" 07 }, 08 { 09 "name":"Michael "Flea" Balzary", 10 "role":"bass guitar, trumpet, backing vocals" 11 }, 12 { 13 "name":"Chad Smith", 14 "role":"drums,percussion" 15 }, 16 { 17 "name":"John Frusciante", 18 "role":"Lead Guitar" 19 } 20 ], 21 "year":"2009" 22 }你可以在JavaScript里直接使用JSON,可以把它封裝在函數(shù)里,甚至作為一個API的返回值形式。 我們把這稱作 JSON-P ,很多的API都使用這種形式。 你可以調用一個數(shù)據提供源,在script代碼里直接返回 JSON-P 數(shù)據: 01 12 這是調用 Delicious 網站提供的 Web service 功能,獲得JSON格式的最近的無序書簽列表。 基本上,JSON是最輕便的描述復雜數(shù)據結構的方法,而且它能在瀏覽器里運行。 你甚至可以在PHP里用 json_decode() 函數(shù)來運行它。 JavaScript的自帶函數(shù)(Math, Array 和 String) 讓我感到驚奇的一個事情是,當我研究了JavaScript里的math和String函數(shù)后,發(fā)現(xiàn)它們能極大的簡化我的編程勞動。 使用它們,你可以省去復雜的循環(huán)處理和條件判斷。 例如,當我需要實現(xiàn)一個功能,找出數(shù)字數(shù)組里最大的一個數(shù)時,我過去是這樣寫出這個循環(huán)的,就像下面: 1 var numbers = [3,342,23,22,124]; 2 var max = 0; 3 for(var i=0;i > max){ 5 max = numbers[i]; 6 } 7 } 8 alert(max);我們不用循環(huán)也能實現(xiàn): 1 var numbers = [3,342,23,22,124]; 2 numbers.sort(function(a,b){return b - a}); 3 alert(numbers[0]);需要注意的是,你不能對一個數(shù)字字符數(shù)組進行 sort() ,因為這種情況下它只會按照字母順序進行排序。 如果你想知道更多的用法,可以閱讀 這篇不錯的關于 sort() 的文章。 再有一個有意思的函數(shù)就是 Math.max()。 這個函數(shù)返回參數(shù)里的數(shù)字里最大的一個數(shù)字: 1 Math.max(12,123,3,2,433,4); // returns 433 因為這個函數(shù)能夠校驗數(shù)字,并返回其中最大的一個,所以你可以用它來測試瀏覽器對某個特性的支持情況: 1 var scrollTop=Math.max( 2 doc.documentElement.scrollTop, 3 doc.body.scrollTop 4 );這個是用來解決IE問題的。你可以獲得當前頁面的 scrollTop 值,但是根據頁面上 DOCTYPE 的不同,上面這兩個屬性中只有一個會存放這個值,而另外一個屬性會是 undefined,所以你可以通過使用 Math.max() 得到這個數(shù)。 閱讀這篇文章你會得到更多的關于使用數(shù)學函數(shù)來簡化JavaScript的知識。 另外有一對非常有用的操作字符串的函數(shù)是 split() 和 join()。我想最有代表性的例子應該是,寫一個功能,用來給頁面元素附加CSS樣式。 是這樣的,當你給頁面元素附加一個CSS class時,要么它是這個元素的第一個CSS class,或者是它已經有了一些class , 需要在已有的class后加上一個空格,然后追加上這個class。而當你要去掉這個class時,你也需要去掉這個class前面的空格(這個在過去非常重要,因為有些老的瀏覽器不認識后面跟著空格的class)。 于是,原始的寫法會是這樣: 1 function addclass(elm,newclass){2 var c = elm.className; 3 elm.className = (c === "") ? newclass : c+" "+newclass; 4 }你可以使用 split() 和 join() 函數(shù)自動完成這個任務: 1 function addclass(elm,newclass){2 var classes = elm.className.split(" "); 3 classes.push(newclass); 4 elm.className = classes.join(" "); 5 }這會確保所有的class都被空格分隔,而且你要追加的class正好放在最后。 是個短視的行為。工具包可以幫你快速的開發(fā),但如果你不深入理解JavaScript,你也會做錯事。 該文章在 2011/12/28 23:18:54 編輯過 |
關鍵字查詢
相關文章
正在查詢... |