首頁 > web前端 > js教程 > JavaScript 七大技巧(二)_javascript技巧

JavaScript 七大技巧(二)_javascript技巧

WBOY
發布: 2016-05-16 15:25:48
原創
1155 人瀏覽過

上篇文章跟大家介紹了JavaScript 七大技巧(二),寫JavaScript程式碼已經很久了,都記不起是什麼年代開始的了。對於JavaScript這種語言近幾年所取得的成就,我感到非常的興奮;我很幸運也是這些成就的受益者。我寫了不少的文章,章節,還有一本專門討論它的書,然而,我現在依然能發現一些關於這種語言的新知識。下面的描述的就是過去讓我不由得發出「啊!」的感嘆的程式技巧,這些技巧你應該現在就試試,而不是等著未來的某個時候偶然的發現它們。

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,可以把它封裝在函數裡,甚至作為一個API的回傳值形式。  我們把這稱為 JSON-P ,很多的API都使用這種形式。  你可以呼叫一個資料提供來源,在script程式碼裡直接回傳 JSON-P 資料:  

01  
12  

這是呼叫 Delicious 網站提供的 Web service 功能,取得JSON格式的最近的無序書籤清單。  

基本上,JSON是最輕的描述複雜資料結構的方法,而且它能在瀏覽器裡運作。  

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

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

讓我感到驚奇的一個事情是,當我研究了JavaScript裡的math和String函數後,發現它們能極大的簡化我的程式設計勞動。  

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

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

 var numbers =
  [,,,,];
   var max = ;
   for(var i=;i
   if(numbers[i]
  > max){
   max = numbers[i];
   }
   }
   alert(max);
登入後複製

  我們不用循環也能實現: 

 var numbers =

  [,,,,];
   numbers.sort(function(a,b){return b -
  a});
   alert(numbers[]);
登入後複製

  要注意的是,你不能對一個數字字元數組進行 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剛好放在最後。

是個短視的行為。工具包可以幫你快速的開發,但如果你不深入理解JavaScript,你也會做錯事。

用 JSON 形式儲存資料

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

  Douglas Crockford 發明了JSON 之後,一切全變了。

  使用JSON,你可以使用JavaScript自有功能把資料存貯成複雜的格式,而且不需要再做其它的額外轉換,直接可以存取使用。

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

以上內容是小編給大家分享的javascript七大技巧,希望大家喜歡。

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板