jquery插件開發;(function ( $, window, document, undefined ){}(jQuery, window,document)分析

常常看到許多jquery插件是這種形式:javascript

;(function( $, window, document, undefined ){}){
      //...code
}(jquery,window,document)

 一開始本身也是不太清楚,後臺查了許多資料博客,基本瞭解大意,因此總結出來,以供以後查閱更正。java

 

1.自調函數(function(){})()jquery

這是一個自調函數,函數定義後自行調用。將匿名函數放在括號以內,並緊跟一個括號。第二個括號的意思是「當即調用」。同時第二個括號也是向匿名函數傳遞參數的地方。編程

好比:瀏覽器

(function(){
    alert(1);       //輸出1
})();

(function(name){
    alert(name);    //輸出xiaoming
})("xiaoming");

 

使用自調匿名函數好處是不會產生任何全局變量。缺點是沒法重複執行(除非放在某個循環或其餘函數中)。所以,匿名自調函數適合只執行一次性或初始化的任務。對於插件來講,這種定義方式,既不會產生全局變量,同時引入一次就夠了。
據此回到插件的這種寫法,能夠理解爲,該插件須要傳入jquery,window,document,undefinded;幾個參數做用爲:框架

(a)$實參:$是jquery的簡寫,不少方法和類庫也使用$,這裏$接受jQuery對象,也是爲了不$變量衝突,保證插件能夠正常運行。jquery插件

(b)window, document實參分別接受window, document對象,window, document對象都是全局環境下的,而在函數體內的window, document實際上是局部變量,不是全局的window, document對象。這樣作有個好處就是能夠提升性能,減小做用域鏈的查詢時間,若是你在函數體內須要屢次調用window 或 document對象,這樣把window 或 document對象看成參數傳進去,這樣作是很是有必要的。固然若是你的插件用不到這兩個對象,那麼就不用傳遞這兩個參數了。函數

(c)最後剩下一個undefined形參了,那麼這個形參是幹什麼用的呢,看起來是有點多餘。undefined在老一輩的瀏覽器是不被支持的,直接使用會報錯,js框架要考慮到兼容性,所以增長一個形參undefined性能

2.「;」分號做用:防止多個文件壓縮合並覺得其餘文件最後一行語句沒加分號,而引發合併後的語法錯誤。插件

 

總結:插件這種形式,本質就是定義一個匿名自調函數,同時爲了提升性能或者兼容性,增長了「;」傳入jquery,window,document,undefinded參數。

 

參考資料:《javascript面向對象編程》Stoyan Stefanov著;

              《高性能javascript》              

相關文章
相關標籤/搜索