首頁 > web前端 > js教程 > Javascript進階技巧分享_javascript技巧

Javascript進階技巧分享_javascript技巧

WBOY
發布: 2016-05-16 16:58:27
原創
1220 人瀏覽過

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

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

2、安全的建構子
通常我們定義建構子的時候,會用類似

複製程式碼


程式碼如下:

function Person(name){
  this.name = 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){
      〠){
     
      }else{
          return new Person(name);
     x)這種方式實作繼承的時候。
需要注意,在實例化之前把那個函數的原型指向到Person去。
3、惰性載入函數

在呼叫函數時,常會存在一種情況,就是函數中需要對瀏覽器功能進行判斷。
例如複製程式碼
程式碼如下:


function create create          //do something
     }else{
       🎜>但是,如果一個瀏覽器支援一個功能,那麼必然是一直都支持,所以這裡面每次執行程式碼時都去判斷是不必要的,因為判斷一次就夠了。
所以可以改寫成



複製程式碼
程式碼如下:function createSome      if(supportH5){
          createSomething = function(){ //重寫了createSomething 函數     }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 = 0dow
window onresize = function(){
    console.log(i );
}

嘗試著去拉伸瀏覽器,就會發現控制台瞬間顯示i都超過100多了。
改變一下寫法,例如:

複製程式碼 程式碼如下:


程式碼如下:


var i = 0, j = 1;
window.onresize = function(){
     if(j % 2 == 0){
       🎜>}


建立一個變數j,讓j每次只有偶數的時候才執行,也就是少了一半的實行次數。
像這樣處理下,可以減少50%的執行次數,但是對使用者來說,並感受不到差異。

還有一種使用定時器實現的函數節流。
核心程式碼如下:

程式碼如下:


function throttle; context){
   clearTimeout(method.tId);
   method.tId = setTimeout(function(){
         method.call(con.); >

這裡傳入執行函數和函數的執行環境(也就是執行函數中的this的指向物件),然後先清除動作佇列,接著執行動作。 這種形式可以對動作頻率做更好的控制。

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

 

8、自訂事件
本質是觀察者模式。基本模式是需要3個函數,
一個函數是綁定事件,一個函數是觸發事​​件,一個是移除綁定。
這種模式可以很大程度上降低程式碼耦合性。

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