1. 程式人生 > >jquery外掛開發;(function ( $, window, document, undefined ){}(jQuery, window,document)分析

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

經常看到許多jquery外掛是這種形式:

1

2

3

;(function( $, window, document, undefined ){}){

//...code

}(jquery,window,document)

 一開始自己也是不太清楚,後臺查了許多資料部落格,基本瞭解大意,所以總結出來,以供之後查閱更正。

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

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

比如:

1

2

3

4

5

6

7

(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引數。