Javascript高級技巧分享

更新時間：2014年02月25日 14:56:01 作者：

這篇文章主要介紹了Javascript高級技巧,需要的朋友可以參考下

上次整理了Ajax部分，這周看完了高級技巧部分，也整理下吧。

1、類型檢測
使用Object.prototype.toString.call(obj)的方式。
因為無論typeof還是instanceof都無法做到精確判斷變量類型。

2、安全的構造函數(shù)
通常我們定義構造函數(shù)的時候，會使用類似

復制代碼代碼如下:

function Person(name){
　　this.name = name;
}

然而之后如果不是去 var person = new Person("cnblogs")。
而是 var person = Person("cnblogs")。那么this就會指向別處，導致污染其余對象。
解決方法就是在設置this.property的時候判斷
this instanceof Person
如果不是，則new Person(x,x,x);

復制代碼代碼如下:

function Person(name){
      if(this instanceof Person){
　　     this.name = name;
      }else{
          return new Person(name);
      }
}

但是要注意一點，如果其余構造函數(shù)試圖通過Person.call(this,x)這種方式實現(xiàn)繼承的時候。
需要注意，在實例化之前把那個函數(shù)的原型指向到Person去。

3、惰性載入函數(shù)
在調(diào)用函數(shù)時，經(jīng)常會存在一種情況，就是函數(shù)中需要對瀏覽器功能進行判斷。
例如

復制代碼代碼如下:

function createSomething(){
     if(supportH5){
          //do something
     }else{
          //do otherthing
     }
}

但是，如果一個瀏覽器支持一個功能，那么必然是一直都支持，所以這里面每次執(zhí)行代碼時都去判斷是不必要的，因為判斷一次就夠了。
所以可以改寫成

復制代碼代碼如下:

function createSomething(){
     if(supportH5){
          createSomething = function(){ //重寫了createSomething 函數(shù)
               //do something
          }
     }else{
          //同上
     }
}

這樣，第一次調(diào)用時會做判斷，之后重寫了這個函數(shù)，也就自然不會判斷了。

4、函數(shù)綁定
在js中，最搞混的應該就是 this 指向誰的問題。
其實，在我學習js這么久的時間里，發(fā)現(xiàn)一個結論
在函數(shù)中的this會指向最終調(diào)用這個函數(shù)的對象，換句話說就是，哪個對象調(diào)用了這個函數(shù)，this就指向那個對象。
搞清楚了這個，函數(shù)綁定就不是問題了。
改變函數(shù)里面this指向的方法就是 call 和 apply，不過用這兩個方法都會執(zhí)行函數(shù)。
如果不想執(zhí)行函數(shù)，而是把函數(shù)當參數(shù)傳給某個函數(shù)，還想改變this，那么就用最新的bind。

5、定時器
setTimeou、setInterval或者Ajax等雖然是異步，像多線程一樣，但是js是單線程的。
其實這些方法并沒有增加一個線程。
setTimeout(fn,300)代表的意思是300毫秒后把fn放入js的執(zhí)行隊列里面。
如果這是隊列里面沒有事務要執(zhí)行（也就是說js解釋器處于空閑狀態(tài)），那么便會立刻執(zhí)行。否則，便會等隊列的事務處理完再執(zhí)行這個函數(shù)。
所以，用setTimeout或者setInterval都不是準確的控制時間。
還有一點要注意的就是，使用setTimeout模擬setInterval可以準確控制最小執(zhí)行時間間隔。

6、使用定時器固定時間執(zhí)行方法。
如果一個方法要執(zhí)行很久，也許造成瀏覽器短時間沒響應，那么可以用定時器固定每段時間執(zhí)行一部分。這樣可以不至于讓js一直處于忙碌狀態(tài)（瀏覽器無響應），有空閑的時間處理其余事務。比如有一個1000長度數(shù)組循環(huán)，那么可以100每次的執(zhí)行，中間隔點時間讓js處于空閑去做別的操作。

7、函數(shù)節(jié)流。
函數(shù)節(jié)流是一種提高性能很好的方式，在某些場合可以提高幾倍效率。
比如在做拖動或者是一些發(fā)生在onresize事件中的操作時。
你每操作一下，其實執(zhí)行了很多遍了。例如：

復制代碼代碼如下:

var i = 0;
window.onresize = function(){
    console.log(i++);
}

嘗試著去拉伸瀏覽器，就會發(fā)現(xiàn)控制臺瞬間顯示i都超過100多了。
改變一下寫法，例如：

復制代碼代碼如下:

var i = 0, j = 1;
window.onresize = function(){
     if(j % 2 == 0){
         console.log(i++);
     }
     j++;
}

創(chuàng)建一個變量j，讓j每次只有偶數(shù)的時候才執(zhí)行，也就是少了一半的實行次數(shù)。
像這樣處理下，可以減少50%的執(zhí)行次數(shù)，但是對用戶來說，并感受不到區(qū)別。

還有一種使用定時器實現(xiàn)的函數(shù)節(jié)流。
核心代碼如下：

復制代碼代碼如下:

function throttle(method , context){
   clearTimeout(method.tId);
   method.tId = setTimeout(function(){
         method.call(context);
    },100);
}

這里傳入執(zhí)行函數(shù)和函數(shù)的執(zhí)行環(huán)境（也就是執(zhí)行函數(shù)中的this的指向?qū)ο螅缓笙惹宄齽幼麝犃?，接著?zhí)行動作。
這種形式可以對動作頻率做更好的控制。
假設是一個瀏覽器拉伸動作，那么只要你拉伸的速度夠快，每次觸發(fā)的時間間隔在100ms之內(nèi)，那么就只會執(zhí)行最后一下的結果。

8、自定義事件
本質(zhì)是觀察者模式?；灸Ｊ绞切枰?個函數(shù)，
一個函數(shù)是綁定事件，一個函數(shù)是觸發(fā)事件，一個是移除綁定。
這種模式可以很大程度降低代碼耦合性。

您可能感興趣的文章: