DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript綜合知識 >> Javascript高級技巧分享
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個函數, 一個函數是綁定事件,一個函數是觸發事件,一個是移除綁定。 這種模式可以很大程度降低代碼耦合性。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved