Javascript進階技巧分享

Javascript進階技巧分享

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

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

 

1、類型檢測 

使用Object.prototype.toString.call(obj)的方式。

因為無論typeof還是instanceof都無法做到精確判斷變數類型。

 

2、安全的建構函式

通常我們定義建構函式的時候，會使用類似

 代碼如下:

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

      }

}

 

但是要注意一點，如果其餘建構函式試圖通過Person.call(this,x)這種方式實現繼承的時候。

需要注意，在執行個體化之前把那個函數的原型指向到Person去。

 

3、惰性載入函數

在調用函數時，經常會存在一種情況，就是函數中需要對瀏覽器功能進行判斷。

例如

代碼如下:

function createSomething(){

     if(supportH5){

          //do something

     }else{

          //do otherthing

     }

}

 

但是，如果一個瀏覽器支援一個功能，那麼必然是一直都支援，所以這裡面每次執行代碼時都去判斷是不必要的，因為判斷一次就夠了。

所以可以改寫成

 代碼如下:

function createSomething(){

     if(supportH5){

          createSomething = function(){ //重寫了createSomething 函數

               //do something

          }

     }else{

          //同上

     }

}

 

這樣，第一次調用時會做判斷，之後重寫了這個函數，也就自然不會判斷了。

 

 

4、函數綁定

在js中，最搞混的應該就是 this 指向誰的問題。

其實，在我學習js這麼久的時間裡，發現一個結論

在函數中的this會指向最終調用這個函數的對象，換句話說就是，哪個對象調用了這個函數，this就指向那個對象。

搞清楚了這個，函數綁定就不是問題了。

改變函數裡面this指向的方法就是 call 和 apply，不過用這兩個方法都會執行函數。

如果不想執行函數，而是把函數當參數傳給某個函數，還想改變this，那麼就用最新的bind。

 

 

5、定時器

setTimeou、setInterval或者Ajax等雖然是非同步，像多線程一樣，但是js是單線程的。

其實這些方法並沒有增加一個線程。

setTimeout(fn,300)代表的意思是300毫秒後把fn放入js的執行隊列裡面。

如果這是隊列裡面沒有事務要執行（也就是說js解譯器處於空閑狀態），那麼便會立刻執行。否則，便會等隊列的交易處理完再執行這個函數。

所以，用setTimeout或者setInterval都不是準確的控制時間。

還有一點要注意的就是，使用setTimeout類比setInterval可以準確控制最小執行時間間隔。

 

 

6、使用定時器固定時間執行方法。

如果一個方法要執行很久，也許造成瀏覽器短時間沒響應，那麼可以用定時器固定每段時間執行一部分。這樣可以不至於讓js一直處於忙碌狀態（瀏覽器無響應），有閒置時間處理其餘事務。比如有一個1000長度數組迴圈，那麼可以100每次的執行，中間隔點時間讓js處於空閑去做別的操作。

 

 

7、函數節流。

函數節流是一種提高效能很好的方式，在某些場合可以提高几倍效率。

比如在做拖動或者是一些發生在onresize事件中的操作時。

你每操作一下，其實執行了很多遍了。例如：

 代碼如下:

var i = 0;

window.onresize = function(){

    console.log(i++);

}

 

 

嘗試著去展開瀏覽器，就會發現控制台瞬間顯示i都超過100多了。

改變一下寫法，例如：

 代碼如下:

var i = 0, j = 1;

window.onresize = function(){

     if(j % 2 == 0){

         console.log(i++);

     }

     j++;

}

 

 

建立一個變數j，讓j每次只有偶數的時候才執行，也就是少了一半的實行次數。

像這樣處理下，可以減少50%的執行次數，但是對使用者來說，並感受不到區別。

 

還有一種使用定時器實現的函數節流。

核心代碼如下：

 

 代碼如下:

function throttle(method , context){

   clearTimeout(method.tId);

   method.tId = setTimeout(function(){

         method.call(context);

    },100);

}

 

 

這裡傳入執行函數和函數的執行環境（也就是執行函數中的this的指向對象），然後先清除動作隊列，接著執行動作。

這種形式可以對動作頻率做更好的控制。

假設是一個瀏覽器展開動作，那麼只要你展開的速度夠快，每次觸發的時間間隔在100ms之內，那麼就只會執行最後一下的結果。

 

 

8、自訂事件

本質是觀察者模式。基本模式是需要3個函數，

一個函數是綁定事件，一個函數是觸發事件，一個是移除綁定。

這種模式可以很大程度降低代碼耦合性。