亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

早該知道的7個(gè)JavaScript技巧

 更新時(shí)間:2013年03月27日 14:22:28   作者:  
這篇文章對(duì)js編寫等方便詳細(xì)的說(shuō)明了幾個(gè)技巧,方便大家提高效率,學(xué)習(xí)簡(jiǎn)易化書寫代碼

我寫JavaScript代碼已經(jīng)很久了,都記不起是什么年代開(kāi)始的了。對(duì)于JavaScript這種語(yǔ)言近幾年所取得的成就,我感到非常的興奮;我很幸運(yùn)也是這些成就的獲益者。我寫了不少的文章,章節(jié),還有一本專門討論它的書,然而,我現(xiàn)在依然能發(fā)現(xiàn)一些關(guān)于這種語(yǔ)言的新知識(shí)。下面的描述的就是過(guò)去讓我不由得發(fā)出“?。 钡母袊@的編程技巧,這些技巧你應(yīng)該現(xiàn)在就試試,而不是等著未來(lái)的某個(gè)時(shí)候偶然的發(fā)現(xiàn)它們。

簡(jiǎn)潔寫法

JavaScript里我最喜歡的一種東西就是生成對(duì)象和數(shù)組的簡(jiǎn)寫方法。在過(guò)去,如果你想創(chuàng)建一個(gè)對(duì)象,你需要這樣:

復(fù)制代碼 代碼如下:

  var car = new Object();
  car.colour = 'red';
  car.wheels = 4;
  car.hubcaps = 'spinning';
  car.age = 4;

下面的寫法能夠達(dá)到同樣的效果:
復(fù)制代碼 代碼如下:

  var car = {
   colour:'red',
   wheels:4,
   hubcaps:'spinning',
   age:4
  }


簡(jiǎn)單多了,你不需要反復(fù)使用這個(gè)對(duì)象的名稱。這樣 car 就定義好了,也許你會(huì)遇到 invalidUserInSession 的問(wèn)題,這只有你在使用IE時(shí)會(huì)碰到,只要記住一點(diǎn),不要右大括號(hào)前面寫逗號(hào),你就不會(huì)有麻煩。

另外一個(gè)十分方便的簡(jiǎn)寫是針對(duì)數(shù)組的。傳統(tǒng)的定義數(shù)組的方法是這樣:

復(fù)制代碼 代碼如下:

  var moviesThatNeedBetterWriters = new Array(
   'Transformers','Transformers2','Avatar','IndianaJones 4'
  );

簡(jiǎn)寫版的是這樣:
復(fù)制代碼 代碼如下:

  var moviesThatNeedBetterWriters = [
   'Transformers','Transformers2','Avatar','IndianaJones 4'
  ];

對(duì)于數(shù)組,這里有個(gè)問(wèn)題,其實(shí)沒(méi)有什么圖組功能。但你會(huì)經(jīng)常發(fā)現(xiàn)有人這樣定義上面的 car ,就像這樣
復(fù)制代碼 代碼如下:

  var car = new Array();
  car['colour'] = 'red';
  car['wheels'] = 4;
  car['hubcaps'] = 'spinning';
  car['age'] = 4;


數(shù)組不是萬(wàn)能的;這樣寫不對(duì),會(huì)讓人困惑。圖組實(shí)際上是對(duì)象的功能,人們混淆了這兩個(gè)概念。

另外一個(gè)非??岬暮?jiǎn)寫方法是使用與三元條件符號(hào)。你不必寫成下面的樣子…

復(fù)制代碼 代碼如下:

  var direction;
  if(x < 200){
   direction = 1;
  } else {
   direction = -1;
  }


你可以使用三元條件符號(hào)簡(jiǎn)化它:

復(fù)制代碼 代碼如下:

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

當(dāng)條件為true 時(shí)取問(wèn)號(hào)后面的值,否則取冒號(hào)后面的值。

用 JSON 形式存儲(chǔ)數(shù)據(jù)

在我發(fā)現(xiàn)JSON之前,我使用各種瘋狂的方法把數(shù)據(jù)存貯在JavaScript固有的數(shù)據(jù)類型里面,例如:數(shù)組,字符串,中間夾雜著容易進(jìn)行拆分的標(biāo)志符號(hào)以及其它的令人討厭的東西。Douglas Crockford 發(fā)明了JSON 之后,一切全變了。使用JSON,你可以使用JavaScript自有功能把數(shù)據(jù)存貯成復(fù)雜的格式,而且不需要再做其它的額外轉(zhuǎn)換,直接可以訪問(wèn)使用。JSON 是 “JavaScript Object Notation” 的縮寫,它用到了上面提到的兩種簡(jiǎn)寫方法。于是,如果你想描述一個(gè)樂(lè)隊(duì),你可能會(huì)像這樣寫:

復(fù)制代碼 代碼如下:

  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":"2009"
  }

你可以在JavaScript里直接使用JSON,可以把它封裝在函數(shù)里,甚至作為一個(gè)API的返回值形式。我們把這稱作 JSON-P ,很多的API都使用這種形式。

你可以調(diào)用一個(gè)數(shù)據(jù)提供源,在script代碼里直接返回 JSON-P 數(shù)據(jù):

復(fù)制代碼 代碼如下:

  <div id="delicious"></div><script>
  function delicious(o){
   var out = '<ul>';
   for(var i=0;i<o.length;i++){
    out += '<li><a href="' + o[i].u + '">' +
    o[i].d + '</a></li>';
   }
   out += '</ul>';
   document.getElementById('delicious').innerHTML = out;
  }
  </script>
  <script src="http://feeds.delicious.com/v2/json/codepo8/javascript?count=15&callback=delicious"></script>


這是調(diào)用 Delicious 網(wǎng)站提供的 Web service 功能,獲得JSON格式的最近的無(wú)序書簽列表。

基本上,JSON是最輕便的描述復(fù)雜數(shù)據(jù)結(jié)構(gòu)的方法,而且它能在瀏覽器里運(yùn)行。你甚至可以在PHP里用 json_decode() 函數(shù)來(lái)運(yùn)行它。JavaScript的自帶函數(shù)(Math, Array 和 String)讓我感到驚奇的一個(gè)事情是,當(dāng)我研究了JavaScript里的math和String函數(shù)后,發(fā)現(xiàn)它們能極大的簡(jiǎn)化我的編程勞動(dòng)。使用它們,你可以省去復(fù)雜的循環(huán)處理和條件判斷。例如,當(dāng)我需要實(shí)現(xiàn)一個(gè)功能,找出數(shù)字?jǐn)?shù)組里最大的一個(gè)數(shù)時(shí),我過(guò)去是這樣寫出這個(gè)循環(huán)的,就像下面:

復(fù)制代碼 代碼如下:

  var numbers = [3,342,23,22,124];
  var max = 0;
  for(var i=0;i<numbers.length;i++){
   if(numbers[i] > max){
    max = numbers[i];
   }
  }
  alert(max);

我們不用循環(huán)也能實(shí)現(xiàn):
復(fù)制代碼 代碼如下:

  var numbers = [3,342,23,22,124];
  numbers.sort(function(a,b){return b - a});
  alert(numbers[0]);

需要注意的是,你不能對(duì)一個(gè)數(shù)字字符數(shù)組進(jìn)行 sort() ,因?yàn)檫@種情況下它只會(huì)按照字母順序進(jìn)行排序。如果你想知道更多的用法,可以閱讀 這篇不錯(cuò)的關(guān)于 sort() 的文章。

再有一個(gè)有意思的函數(shù)就是 Math.max()。這個(gè)函數(shù)返回參數(shù)里的數(shù)字里最大的一個(gè)數(shù)字:

復(fù)制代碼 代碼如下:

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

因?yàn)檫@個(gè)函數(shù)能夠校驗(yàn)數(shù)字,并返回其中最大的一個(gè),所以你可以用它來(lái)測(cè)試瀏覽器對(duì)某個(gè)特性的支持情況:
復(fù)制代碼 代碼如下:

  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ù)。閱讀這篇文章你會(huì)得到更多的關(guān)于使用數(shù)學(xué)函數(shù)來(lái)簡(jiǎn)化JavaScript的知識(shí)。

另外有一對(duì)非常有用的操作字符串的函數(shù)是 split() 和 join()。我想最有代表性的例子應(yīng)該是,寫一個(gè)功能,用來(lái)給頁(yè)面元素附加CSS樣式。

是這樣的,當(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)。

于是,原始的寫法會(huì)是這樣:

復(fù)制代碼 代碼如下:

  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正好放在最后。

事件委派

Web應(yīng)用都是由事件驅(qū)動(dòng)運(yùn)轉(zhuǎn)的。我喜歡事件處理,尤其喜歡自己定義事件。它能使你的產(chǎn)品可擴(kuò)展,而不用改動(dòng)核心代碼。有一個(gè)很大的問(wèn)題(也可以說(shuō)是功能強(qiáng)大的表現(xiàn)),是關(guān)于頁(yè)面上事件的移除問(wèn)題。你可以對(duì)某個(gè)元素安裝一個(gè)事件監(jiān)聽(tīng)器,事件監(jiān)聽(tīng)器就開(kāi)始運(yùn)轉(zhuǎn)工作。但頁(yè)面上沒(méi)有任何指示說(shuō)明這有個(gè)監(jiān)聽(tīng)器。因?yàn)檫@種不可表現(xiàn)的問(wèn)題 (這尤其讓一些新手頭疼) ,以及像IE6這樣的”瀏覽器“在太多的使用事件監(jiān)聽(tīng)時(shí)會(huì)出現(xiàn)各種的內(nèi)存問(wèn)題,你不得不承認(rèn)盡量少使用事件編程是個(gè)明智的做法。

于是 事件委托 就出現(xiàn)了。

當(dāng)頁(yè)面上某個(gè)元素上的事件觸發(fā)時(shí),而在 DOM 繼承關(guān)系上,這個(gè)元素的所有子元素也能接收到這個(gè)事件,這時(shí)你可以使用一個(gè)在父元素上的事件處理器來(lái)處理,而不是使用一堆的各個(gè)子元素上的事件監(jiān)聽(tīng)器來(lái)處理。究竟是什么意思?這樣說(shuō)吧,頁(yè)面上有很多超鏈接,你不想直接使用這些鏈接,想通過(guò)一個(gè)函數(shù)來(lái)調(diào)用這個(gè)鏈接,HTML代碼是這樣的:

復(fù)制代碼 代碼如下:

  <h2>Great Web resources</h2>
  <ul id="resources">
  <li><a >Opera Web Standards Curriculum</a></li>
  <li><a >Sitepoint</a></li>
  <li><a >A List Apart</a></li>
  <li><a >YUI Blog</a></li>
  <li><a >Blame it on the voices</a></li>
  <li><a >Oddly specific</a></li>
  </ul>


常見(jiàn)的做法是通過(guò)循環(huán)這些鏈接,將每個(gè)鏈接上附加一個(gè)事件處理器:

復(fù)制代碼 代碼如下:

  // 典型的事件處理例子
  (function(){
   var resources = document.getElementById('resources');
   var links = resources.getElementsByTagName('a');
   var all = links.length;
   for(var i=0;i<all;i++){
    // Attach a listener to each link
    links[i].addEventListener('click',handler,false);
   };
   function handler(e){
    var x = e.target; // Get the link that was clicked
    alert(x);
    e.preventDefault();
   };
  })();

我們用一個(gè)事件處理器也能完成這項(xiàng)任務(wù):
復(fù)制代碼 代碼如下:

  (function(){
   var resources = document.getElementById('resources');
   resources.addEventListener('click',handler,false);
   function handler(e){
    var x = e.target; // get the link tha
    if(x.nodeName.toLowerCase() === 'a'){
     alert('Event delegation:' + x);
     e.preventDefault();
    }
   };
  })();

因?yàn)辄c(diǎn)擊事件就發(fā)生在這些頁(yè)面元素里,你要做的就是比較它們的 nodeName,找出應(yīng)該回應(yīng)這個(gè)事件的那個(gè)元素。

免責(zé)聲明:上面說(shuō)的這兩個(gè)關(guān)于事件的例子,在所有瀏覽器里都能運(yùn)行,除了IE6,在IE6上你需要使用一個(gè)事件模型,而不是簡(jiǎn)單的W3C的標(biāo)準(zhǔn)實(shí)現(xiàn)。這也就是我們推薦使用一些工具包的原因。

這種方法的好處并不是僅限于把多個(gè)事件處理器縮減為一個(gè)。你想想,舉個(gè)例子,你需要?jiǎng)討B(tài)的往這個(gè)鏈接表里追加更多的鏈接。使用事件委托后,你就不需要做其它修改了;否則的話,你需要重新循環(huán)這個(gè)鏈接表,重新給每個(gè)鏈接安裝事件處理器。

匿名函數(shù)和模塊化

在JavaScript里最令人懊惱的事情是變量沒(méi)有使用范圍。任何變量,函數(shù),數(shù)組,對(duì)象,只要不在函數(shù)內(nèi)部,都被認(rèn)為是全局的,這就是說(shuō),這個(gè)頁(yè)面上的其它腳本也可以訪問(wèn)它,而且可以覆蓋重寫它。

解決辦法是,把你的變量放在一個(gè)匿名函數(shù)內(nèi)部,定義完之后立即調(diào)用它。例如,下面的寫法將會(huì)產(chǎn)生三個(gè)全局變量和兩個(gè)全局函數(shù):

復(fù)制代碼 代碼如下:

  var name = 'Chris';
  var age = '34';
  var status = 'single';
  function createMember(){
  // [...]
  }
  function getMemberDetails(){
  // [...]
  }

如果這個(gè)頁(yè)面上的其它腳本里也存在一個(gè)叫 status 的變量,麻煩就會(huì)出現(xiàn)。如果我們把它們封裝在一個(gè) myApplication 里,這個(gè)問(wèn)題就迎刃而解了:
復(fù)制代碼 代碼如下:

  var myApplication = function(){
   var name = 'Chris';
   var age = '34';
   var status = 'single';
   function createMember(){
    // [...]
   }
   function getMemberDetails(){
    // [...]
   }
  }();

但是,這樣一來(lái),在函數(shù)外面就沒(méi)有什么功能了。如果這是你需要的,那就可以了。你還可以省去函數(shù)的名稱:
復(fù)制代碼 代碼如下:

  (function(){
   var name = 'Chris';
   var age = '34';
   var status = 'single';
   function createMember(){
    // [...]
   }
   function getMemberDetails(){
    // [...]
   }
  })();

如果你想在函數(shù)外面也能使用里面的東西,那就要做些修改。為了能訪問(wèn) createMember() 或 getMemberDetails(),你需要把它們變成 myApplication的屬性,從而把它們暴露于外部的世界:
復(fù)制代碼 代碼如下:

  var myApplication = function(){
   var name = 'Chris';
   var age = '34';
   var status = 'single';
   return{
    createMember:function(){
     // [...]
    },
    getMemberDetails:function(){
     // [...]
    }
   }
  }();
  //myApplication.createMember() 和
  //myApplication.getMemberDetails() 就可以使用了。
[code]
這被稱作 module 模式或 singleton。Douglas Crockford 多次談到過(guò)這些,Yahoo User Interface Library YUI 里對(duì)此有大量的使用。但這樣一來(lái)讓我感到不便的是,我需要改變句式來(lái)使函數(shù)和變量能被外界訪問(wèn)。更甚者,調(diào)用時(shí)我還需要加上myApplication 這個(gè)前綴。所以,我不喜歡這樣做,我更愿意簡(jiǎn)單的把需要能被外界訪問(wèn)的元素的指針導(dǎo)出來(lái)。這樣做后,反倒簡(jiǎn)化了外界調(diào)用的寫法:
[code]
  var myApplication = function(){
   var name = 'Chris';
   var age = '34';
   var status = 'single';
   function createMember(){
    // [...]
   }
   function getMemberDetails(){
    // [...]
   }
   return{
    create:createMember,
    get:getMemberDetails
   }
  }();
  //現(xiàn)在寫成 myApplication.get()和 myApplication.create() 就行了。我把這個(gè)稱作 “revealing module pattern.”


可配置化

一旦我把所寫的JavaScript代碼發(fā)布到這個(gè)世界上,就有人想改動(dòng)它,通常是人們想讓它完成一些它本身完成不了的任務(wù)—但通常也是我寫的程序不夠靈活,沒(méi)有提供用戶可自定義的功能。解決辦法是給你的腳本增加一個(gè)配置項(xiàng)對(duì)象。我曾經(jīng)寫過(guò)一篇深入介紹JavaScript配置項(xiàng)對(duì)象的文章,下面是其中的要點(diǎn):

在你的腳本了添加一個(gè)叫做configuration的對(duì)象。
這個(gè)對(duì)象里面,存放所有人們?cè)谑褂眠@個(gè)腳本時(shí)經(jīng)常要改動(dòng)的東西:
CSS ID 和類名稱;
按鈕的名稱,標(biāo)簽字等;
諸如”每頁(yè)顯示圖片數(shù)”的值, “圖像的顯示的尺寸”的值;
地點(diǎn),位置,以及語(yǔ)言設(shè)置。
將這個(gè)對(duì)象作為一個(gè)公用屬性返回給用戶,這樣用戶可以修改覆蓋它。
通常情況下這是你編程過(guò)程中的最后一步要做的事情。我把這些集中表現(xiàn)在了一個(gè)例子里: “Five things to do to a script before handing it over to the next developer.”

實(shí)際上,你也希望你的代碼能夠讓人們很方面的使用,并且根據(jù)他們各自的需要進(jìn)行一些改動(dòng)。如果你實(shí)現(xiàn)了這個(gè)功能,你會(huì)少收到一些抱怨你的腳本的人發(fā)送給你的讓你困惑的郵件,這些信件會(huì)告訴你,有人修改了你的腳本,而且很好用。

與后臺(tái)交互

在這么多年的編程經(jīng)歷中,我所領(lǐng)悟到的一個(gè)重要的事情就是,JavaScript是一個(gè)很優(yōu)秀的開(kāi)發(fā)界面交互的語(yǔ)言,但如果用來(lái)處理數(shù)字或訪問(wèn)數(shù)據(jù)源,那就有點(diǎn)使不上勁了。
最初,我學(xué)習(xí)JavaScript,是用來(lái)替代Perl的,因?yàn)槲液苡憛挿且汛a拷貝到 cgi-bin 文件夾下才能使Perl運(yùn)行。后來(lái),我明白了應(yīng)該使用一種后臺(tái)工作的語(yǔ)言來(lái)處理主要的數(shù)據(jù),而不能什么事情都讓JavaScript去做。更重要的是我們要考慮安全性和語(yǔ)言特征。

如果我訪問(wèn)一個(gè)Web service, 我可以獲取到JSON-P 格式的數(shù)據(jù),在客戶端瀏覽器里我把它做各種各樣的數(shù)據(jù)轉(zhuǎn)換,但當(dāng)我有了服務(wù)器時(shí),我有了更多的方法來(lái)轉(zhuǎn)換數(shù)據(jù),我可以在Server端生成JSON或HTML格式的數(shù)據(jù)返回給客戶端,以及緩存數(shù)據(jù)等操作。如果你事先了解了并準(zhǔn)備了這些,你會(huì)長(zhǎng)期收益,省去了很多頭疼的時(shí)間。編寫適用各種瀏覽器的程序是種浪費(fèi)時(shí)間,使用工具包吧!

在我最初開(kāi)始搞Web開(kāi)發(fā)時(shí),在訪問(wèn)頁(yè)面時(shí),究竟是使用 document.all 還是使用 document.layers 的問(wèn)題上痛苦的掙扎了很久。我選擇了 document.layers,因?yàn)槲蚁矚g任何層都是自己的document的思想 (而且我寫了太多的 document.write 來(lái)生成元素)。層模式最終失敗了,于是我開(kāi)始使用 document.all。當(dāng)Netscape 6 公布只支持 W3C DOM 模型時(shí),我很高興,但其實(shí)用戶并不關(guān)心這些。用戶只是看見(jiàn)這種瀏覽器不能顯示大多數(shù)瀏覽器都能正常顯示的東西—這是我們編碼的問(wèn)題。我們編寫了短視的代碼,只能運(yùn)行在當(dāng)前的環(huán)境下,而不幸的是,我們的運(yùn)行環(huán)境卻在不停的改變。

我已經(jīng)浪費(fèi)了太多的時(shí)間來(lái)處理對(duì)各種瀏覽器各種版本兼容的問(wèn)題。善于處理這類問(wèn)題提供了我一個(gè)好的工作機(jī)會(huì)。但現(xiàn)在我們不必在忍受這種痛苦了。

一些工具包,例如 YUI, jQuery 以及Dojo 都能夠幫我們處理這類問(wèn)題。它們通過(guò)抽象各種接口實(shí)現(xiàn)來(lái)處理瀏覽器的各種問(wèn)題,像版本不兼容,設(shè)計(jì)缺陷等,把我們從痛苦中解救出來(lái)。除非你要測(cè)試某個(gè)Beta版的瀏覽器,千萬(wàn)不要在自己的程序里添加修正瀏覽器的缺陷的代碼,因?yàn)槟愫苡锌赡墚?dāng)瀏覽器已經(jīng)修改了這個(gè)問(wèn)題時(shí),你卻忘了刪除你的代碼。

另一方面,完全依賴于工具包也是個(gè)短視的行為。工具包可以幫你快速的開(kāi)發(fā),但如果你不深入理解JavaScript,你也會(huì)做錯(cuò)事。

相關(guān)文章

最新評(píng)論