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


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

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

 一開始自己也是不太清楚,后台查了許多資料博客,基本了解大意,所以總結出來,以供之后查閱更正。

 

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

這是一個自調函數,函數定義后自行調用。將匿名函數放在括號之內,並緊跟一個括號。第二個括號的意思是“立即調用”。同時第二個括號也是向匿名函數傳遞參數的地方。

比如:

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

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

 

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

(a)$實參:$是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》
              


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM