JavaScript 七大技巧(二)
上篇文章給大家介紹了JavaScript 七大技巧(二),寫JavaScript代碼已經(jīng)很久了,都記不起是什么年代開始的了。對于JavaScript這種語言近幾年所取得的成就,我感到非常的興奮;我很幸運也是這些成就的獲益者。我寫了不少的文章,章節(jié),還有一本專門討論它的書,然而,我現(xiàn)在依然能發(fā)現(xiàn)一些關于這種語言的新知識。下面的描述的就是過去讓我不由得發(fā)出“啊!”的感嘆的編程技巧,這些技巧你應該現(xiàn)在就試試,而不是等著未來的某個時候偶然的發(fā)現(xiàn)它們。
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":"" }
你可以在JavaScript里直接使用JSON,可以把它封裝在函數(shù)里,甚至作為一個API的返回值形式?! ∥覀儼堰@稱作 JSON-P ,很多的API都使用這種形式?! ∧憧梢哉{(diào)用一個數(shù)據(jù)提供源,在script代碼里直接返回 JSON-P 數(shù)據(jù):
01
12
這是調(diào)用 Delicious 網(wǎng)站提供的 Web service 功能,獲得JSON格式的最近的無序書簽列表?! ?br />
基本上,JSON是最輕便的描述復雜數(shù)據(jù)結構的方法,而且它能在瀏覽器里運行?! ?br />
你甚至可以在PHP里用 json_decode() 函數(shù)來運行它?! ?br />
JavaScript的自帶函數(shù)(Math, Array 和 String)
讓我感到驚奇的一個事情是,當我研究了JavaScript里的math和String函數(shù)后,發(fā)現(xiàn)它們能極大的簡化我的編程勞動?! ?br />
使用它們,你可以省去復雜的循環(huán)處理和條件判斷?! ?br />
例如,當我需要實現(xiàn)一個功能,找出數(shù)字數(shù)組里最大的一個數(shù)時,我過去是這樣寫出這個循環(huán)的,就像下面:
var numbers = [,,,,]; var max = ; for(var i=;i if(numbers[i] > max){ max = numbers[i]; } } alert(max);
我們不用循環(huán)也能實現(xiàn):
var numbers = [,,,,]; numbers.sort(function(a,b){return b - a}); alert(numbers[]);
需要注意的是,你不能對一個數(shù)字字符數(shù)組進行 sort() ,因為這種情況下它只會按照字母順序進行排序?! ?br />
如果你想知道更多的用法,可以閱讀 這篇不錯的關于 sort() 的文章。
再有一個有意思的函數(shù)就是 Math.max()。
這個函數(shù)返回參數(shù)里的數(shù)字里最大的一個數(shù)字:
Math.max(12,123,3,2,433,4); // returns 433
因為這個函數(shù)能夠校驗數(shù)字,并返回其中最大的一個,所以你可以用它來測試瀏覽器對某個特性的支持情況:
var scrollTop= Math.max( doc.documentElement.scrollTop, doc.body.scrollTop );
這個是用來解決IE問題的。你可以獲得當前頁面的 scrollTop 值,但是根據(jù)頁面上 DOCTYPE 的不同,上面這兩個屬性中只有一個會存放這個值,而另外一個屬性會是 undefined,所以你可以通過使用 Math.max() 得到這個數(shù)?! ?/p>
閱讀這篇文章你會得到更多的關于使用數(shù)學函數(shù)來簡化JavaScript的知識?! ?/p>
另外有一對非常有用的操作字符串的函數(shù)是 split() 和 join()。我想最有代表性的例子應該是,寫一個功能,用來給頁面元素附加CSS樣式?! ?/p>
是這樣的,當你給頁面元素附加一個CSS class時,要么它是這個元素的第一個CSS class,或者是它已經(jīng)有了一些class , 需要在已有的class后加上一個空格,然后追加上這個class。而當你要去掉這個class時,你也需要去掉這個class前面的空格(這個在過去非常重要,因為有些老的瀏覽器不認識后面跟著空格的class)?!?/p>
于是,原始的寫法會是這樣:
function addclass(elm,newclass){ var c = elm.className; elm.className = (c === '') ? newclass : c+' '+newclass; } 你可以使用 split() 和 join() 函數(shù)自動完成這個任務: function addclass(elm,newclass){ var classes = elm.className.split(' '); classes.push(newclass); elm.className = classes.join(' '); }
這會確保所有的class都被空格分隔,而且你要追加的class正好放在最后。
是個短視的行為。工具包可以幫你快速的開發(fā),但如果你不深入理解JavaScript,你也會做錯事。
用 JSON 形式存儲數(shù)據(jù)
在我發(fā)現(xiàn)JSON之前,我使用各種瘋狂的方法把數(shù)據(jù)存貯在JavaScript固有的數(shù)據(jù)類型里面,例如:數(shù)組,字符串,中間夾雜著容易進行拆分的標志符號以及其它的令人討厭的東西。
Douglas Crockford 發(fā)明了JSON 之后,一切全變了。
使用JSON,你可以使用JavaScript自有功能把數(shù)據(jù)存貯成復雜的格式,而且不需要再做其它的額外轉換,直接可以訪問使用。
JSON 是 “JavaScript Object Notation” 的縮寫,它用到了上面提到的兩種簡寫方法。
以上內(nèi)容是小編給大家分享的javascript七大技巧,希望大家喜歡。
相關文章
javascript編程開發(fā)中取色器及封裝$函數(shù)用法示例
這篇文章主要介紹了javascript編程開發(fā)中取色器及封裝$函數(shù),結合實例形式分析了javascript封裝$函數(shù)及數(shù)值運算、頁面元素動態(tài)操作實現(xiàn)取色器功能相關技巧,需要的朋友可以參考下2017-08-08js中setTimeout()與clearTimeout()用法實例淺析
這篇文章主要介紹了js中setTimeout()與clearTimeout()用法,以實例形式分析了setTimeout()與clearTimeout()的功能與使用技巧,需要的朋友可以參考下2015-05-05Javascript設計模式之觀察者模式的多個實現(xiàn)版本實例
這篇文章主要介紹了Javascript設計模式之觀察者模式的多個實現(xiàn)版本實例,本文給出3種實現(xiàn)版本代碼,同時給出了Jquery實現(xiàn)版本,需要的朋友可以參考下2015-03-03JavaScript中運算符規(guī)則和隱式類型轉換示例詳解
JavaScript中運算符規(guī)則的隱式類型轉換是什么? 這是每個學習Javascript的新手們都應該知道的一個問題,下面這篇文章主要給大家介紹了關于JavaScript中運算符規(guī)則和隱式類型轉換的相關資料,需要的朋友可以參考借鑒,下面來一起看看吧。2017-09-09