JavaScript 七大技巧(二)
上篇文章給大家介紹了JavaScript 七大技巧(二),寫(xiě)JavaScript代碼已經(jīng)很久了,都記不起是什么年代開(kāi)始的了。對(duì)于JavaScript這種語(yǔ)言近幾年所取得的成就,我感到非常的興奮;我很幸運(yùn)也是這些成就的獲益者。我寫(xiě)了不少的文章,章節(jié),還有一本專(zhuān)門(mén)討論它的書(shū),然而,我現(xiàn)在依然能發(fā)現(xiàn)一些關(guān)于這種語(yǔ)言的新知識(shí)。下面的描述的就是過(guò)去讓我不由得發(fā)出“啊!”的感嘆的編程技巧,這些技巧你應(yīng)該現(xiàn)在就試試,而不是等著未來(lái)的某個(gè)時(shí)候偶然的發(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ù)里,甚至作為一個(gè)API的返回值形式?! ∥覀儼堰@稱(chēng)作 JSON-P ,很多的API都使用這種形式。 你可以調(diào)用一個(gè)數(shù)據(jù)提供源,在script代碼里直接返回 JSON-P 數(shù)據(jù):
01
12
這是調(diào)用 Delicious 網(wǎng)站提供的 Web service 功能,獲得JSON格式的最近的無(wú)序書(shū)簽列表。
基本上,JSON是最輕便的描述復(fù)雜數(shù)據(jù)結(jié)構(gòu)的方法,而且它能在瀏覽器里運(yùn)行?! ?br />
你甚至可以在PHP里用 json_decode() 函數(shù)來(lái)運(yùn)行它?! ?br />
JavaScript的自帶函數(shù)(Math, Array 和 String)
讓我感到驚奇的一個(gè)事情是,當(dāng)我研究了JavaScript里的math和String函數(shù)后,發(fā)現(xiàn)它們能極大的簡(jiǎn)化我的編程勞動(dòng)?! ?br />
使用它們,你可以省去復(fù)雜的循環(huán)處理和條件判斷。
例如,當(dāng)我需要實(shí)現(xiàn)一個(gè)功能,找出數(shù)字?jǐn)?shù)組里最大的一個(gè)數(shù)時(shí),我過(guò)去是這樣寫(xiě)出這個(gè)循環(huán)的,就像下面:
var numbers =
[,,,,];
var max = ;
for(var i=;i
if(numbers[i]
> max){
max = numbers[i];
}
}
alert(max);
我們不用循環(huán)也能實(shí)現(xiàn):
var numbers =
[,,,,];
numbers.sort(function(a,b){return b -
a});
alert(numbers[]);
需要注意的是,你不能對(duì)一個(gè)數(shù)字字符數(shù)組進(jìn)行 sort() ,因?yàn)檫@種情況下它只會(huì)按照字母順序進(jìn)行排序?! ?br />
如果你想知道更多的用法,可以閱讀 這篇不錯(cuò)的關(guān)于 sort() 的文章。
再有一個(gè)有意思的函數(shù)就是 Math.max()?! ?br />
這個(gè)函數(shù)返回參數(shù)里的數(shù)字里最大的一個(gè)數(shù)字:
Math.max(12,123,3,2,433,4); // returns 433
因?yàn)檫@個(gè)函數(shù)能夠校驗(yàn)數(shù)字,并返回其中最大的一個(gè),所以你可以用它來(lái)測(cè)試瀏覽器對(duì)某個(gè)特性的支持情況:
var scrollTop= Math.max( doc.documentElement.scrollTop, doc.body.scrollTop );
這個(gè)是用來(lái)解決IE問(wèn)題的。你可以獲得當(dāng)前頁(yè)面的 scrollTop 值,但是根據(jù)頁(yè)面上 DOCTYPE 的不同,上面這兩個(gè)屬性中只有一個(gè)會(huì)存放這個(gè)值,而另外一個(gè)屬性會(huì)是 undefined,所以你可以通過(guò)使用 Math.max() 得到這個(gè)數(shù)?! ?/p>
閱讀這篇文章你會(huì)得到更多的關(guān)于使用數(shù)學(xué)函數(shù)來(lái)簡(jiǎn)化JavaScript的知識(shí)。
另外有一對(duì)非常有用的操作字符串的函數(shù)是 split() 和 join()。我想最有代表性的例子應(yīng)該是,寫(xiě)一個(gè)功能,用來(lái)給頁(yè)面元素附加CSS樣式?! ?/p>
是這樣的,當(dāng)你給頁(yè)面元素附加一個(gè)CSS class時(shí),要么它是這個(gè)元素的第一個(gè)CSS class,或者是它已經(jīng)有了一些class , 需要在已有的class后加上一個(gè)空格,然后追加上這個(gè)class。而當(dāng)你要去掉這個(gè)class時(shí),你也需要去掉這個(gè)class前面的空格(這個(gè)在過(guò)去非常重要,因?yàn)橛行├系臑g覽器不認(rèn)識(shí)后面跟著空格的class)?!?/p>
于是,原始的寫(xiě)法會(huì)是這樣:
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(' ');
}
這會(huì)確保所有的class都被空格分隔,而且你要追加的class正好放在最后。
是個(gè)短視的行為。工具包可以幫你快速的開(kāi)發(fā),但如果你不深入理解JavaScript,你也會(huì)做錯(cuò)事。
用 JSON 形式存儲(chǔ)數(shù)據(jù)
在我發(fā)現(xiàn)JSON之前,我使用各種瘋狂的方法把數(shù)據(jù)存貯在JavaScript固有的數(shù)據(jù)類(lèi)型里面,例如:數(shù)組,字符串,中間夾雜著容易進(jìn)行拆分的標(biāo)志符號(hào)以及其它的令人討厭的東西。
Douglas Crockford 發(fā)明了JSON 之后,一切全變了。
使用JSON,你可以使用JavaScript自有功能把數(shù)據(jù)存貯成復(fù)雜的格式,而且不需要再做其它的額外轉(zhuǎn)換,直接可以訪問(wèn)使用。
JSON 是 “JavaScript Object Notation” 的縮寫(xiě),它用到了上面提到的兩種簡(jiǎn)寫(xiě)方法。
以上內(nèi)容是小編給大家分享的javascript七大技巧,希望大家喜歡。
相關(guān)文章
JS+CSS實(shí)現(xiàn)的拖動(dòng)分頁(yè)效果實(shí)例
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)的拖動(dòng)分頁(yè)效果,可實(shí)現(xiàn)鼠標(biāo)拖動(dòng)頁(yè)面翻轉(zhuǎn)到上一頁(yè)或下一頁(yè)的功能,涉及javascript操作頁(yè)面元素與css樣式的相關(guān)技巧,需要的朋友可以參考下2015-05-05
JavaScript靜態(tài)的動(dòng)態(tài)
JavaScript靜態(tài)的動(dòng)態(tài)...2006-09-09
利用用JS實(shí)現(xiàn)一個(gè)實(shí)時(shí)小鬧鐘
天我們來(lái)聊聊如何使用JS來(lái)創(chuàng)建一個(gè)實(shí)時(shí)的小鬧鐘,這個(gè)小鬧鐘十分的有趣,小伙伴們可以運(yùn)行一下,看看跟你電腦上的時(shí)間是否對(duì)的上呢,文章通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
JavaScript如何實(shí)現(xiàn)圖片懶加載(lazyload) 提高用戶(hù)體驗(yàn)(增強(qiáng)版)
這篇文章主要介紹了JavaScript如何實(shí)現(xiàn)圖片懶加載(lazyload) 提高用戶(hù)體驗(yàn)(增強(qiáng)版)的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-11-11
JavaScript使用Math.Min返回兩個(gè)數(shù)中較小數(shù)的方法
這篇文章主要介紹了JavaScript使用Math.Min返回兩個(gè)數(shù)中較小數(shù)的方法,涉及javascript中Math.Min方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
解析JavaScript中delete操作符不能刪除的對(duì)象
這篇文章主要是對(duì)JavaScript中delete操作符不能刪除的對(duì)象進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12
JavaScript條件判斷_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
JavaScript使用if () { ... } else { ... }來(lái)進(jìn)行條件判斷。下通過(guò)語(yǔ)句代碼給大家詳細(xì)介紹js 條件判斷的基本知識(shí),需要的的朋友參考下吧2017-06-06

