狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

JavaScript 七大實用技巧:輕松編程

admin
2011年12月28日 23:18 本文熱度 2828

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


  簡潔寫法


  JavaScript里我最喜歡的一種東西就是生成對象和數組的簡寫方法。


  在過去,如果你想創建一個對象,你需要這樣:

  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時會碰到,只要記住一點,不要右大括號前面寫分號,你就不會有麻煩。


  另外一個十分方便的簡寫是針對數組的。


  傳統的定義數組的方法是這樣:

  1 var moviesThatNeedBetterWriters = new Array(

  2 "Transformers","Transformers2","Avatar","Indiana Jones 4"

  3 );

  簡寫版的是這樣:

  1 var moviesThatNeedBetterWriters = [

  2 "Transformers","Transformers2","Avatar","Indiana Jones 4"

  3 ];

  對于數組,這里有個問題,其實沒有什么圖組功能。但你會經常發現有人這樣定義上面的 car ,就像這樣

  1 var car = new Array();

  2 car["colour"] = "red";


  3 car["wheels"] = 4;


  4 car["hubcaps"] = "spinning";

  5 car["age"] = 4;

  數組不是萬能的;這樣寫不對,會讓人困惑。圖組實際上是對象的功能,人們混淆了這兩個概念。


  另外一個非常酷的簡寫方法是使用與三元條件符號。


  你不必寫成下面的樣子…

  1 var direction;

  3 direction = 1;


  4 } else {


  5 direction = -1;

  6 }

  你可以使用三元條件符號簡化它:

  1 var direction = x 200 ? 1 : -1;

  當條件為true 時取問號后面的值,否則取冒號后面的值。


  用 JSON 形式存儲數據


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


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


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


  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,可以把它封裝在函數里,甚至作為一個API的返回值形式。


  我們把這稱作 JSON-P ,很多的API都使用這種形式。


  你可以調用一個數據提供源,在script代碼里直接返回 JSON-P 數據:


  01


  12


  這是調用 Delicious 網站提供的 Web service 功能,獲得JSON格式的最近的無序書簽列表。


  基本上,JSON是最輕便的描述復雜數據結構的方法,而且它能在瀏覽器里運行。


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


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


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


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


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



  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);

  我們不用循環也能實現:



  1 var numbers =


  [3,342,23,22,124];


  2 numbers.sort(function(a,b){return b -


  a});

  3 alert(numbers[0]);

  需要注意的是,你不能對一個數字字符數組進行 sort() ,因為這種情況下它只會按照字母順序進行排序。


  如果你想知道更多的用法,可以閱讀 這篇不錯的關于 sort() 的文章。


  再有一個有意思的函數就是 Math.max()。


  這個函數返回參數里的數字里最大的一個數字:


  1 Math.max(12,123,3,2,433,4); // returns 433

  因為這個函數能夠校驗數字,并返回其中最大的一個,所以你可以用它來測試瀏覽器對某個特性的支持情況:

  1 var scrollTop=

  Math.max(


  2 doc.documentElement.scrollTop,


  3 doc.body.scrollTop

  4 );

  這個是用來解決IE問題的。你可以獲得當前頁面的 scrollTop 值,但是根據頁面上 DOCTYPE 的不同,上面這兩個屬性中只有一個會存放這個值,而另外一個屬性會是 undefined,所以你可以通過使用 Math.max() 得到這個數。


  閱讀這篇文章你會得到更多的關于使用數學函數來簡化JavaScript的知識。


  另外有一對非常有用的操作字符串的函數是 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() 函數自動完成這個任務:

  1 function addclass(elm,newclass){

  2 var classes = elm.className.split(" ");


  3 classes.push(newclass);


  4 elm.className = classes.join(" ");

  5 }

  這會確保所有的class都被空格分隔,而且你要追加的class正好放在最后。


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


該文章在 2011/12/28 23:18:54 編輯過
關鍵字查詢
相關文章
正在查詢...
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved