經常看到許多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》