jQuery創(chuàng)建插件的代碼分析

2019-11-20 23:51:10

字體：大中小

供稿：網(wǎng)友

創(chuàng)建jQuery插件，基本的格式是上面這段代碼：

 
(function ($) 
{ 
//add code here 
})(jQuery) 

我們?cè)趺蠢斫猓?
第一步：function ($){}定義了一個(gè)匿名的函數(shù)，有一個(gè)參數(shù)，$是參數(shù)名，和其他的參數(shù)名沒(méi)什么區(qū)別。
第二步：(function ($){})(jQuery)
我們要執(zhí)行一個(gè)匿名函數(shù)的時(shí)候，通常用var func = function ($) { },然后func(參數(shù))這樣的形式。這里func就是一個(gè)Function對(duì)象。但更簡(jiǎn)潔的(function ($) {})，這時(shí)用括號(hào)，也同樣返回括號(hào)的內(nèi)容，也是一個(gè)function對(duì)象。我們?cè)賵?zhí)行就可以了：(function ($) {})(jQuery)
第三步：這時(shí)我們實(shí)際上是執(zhí)行上面定義的匿名函數(shù)，執(zhí)行的時(shí)候?yàn)樵撃涿瘮?shù)提供一個(gè)參數(shù)值：jQuery。
第四步：所以最終上面的表達(dá)等價(jià)于：
var func = function($) { };
func(jQuery);
即定義匿名函數(shù)，并以jQuery為參數(shù)執(zhí)行一次。

這里的作用是什么呢？
1、解決$符號(hào)沖突問(wèn)題
jQuery中我們用$來(lái)代替jQuery，這是為了簡(jiǎn)化寫法。但$這個(gè)符號(hào)有時(shí)候會(huì)沖突。
在上面匿名函數(shù)的代碼中，我們可以習(xí)慣性的用$來(lái)寫，但執(zhí)行的時(shí)候會(huì)用jQuery來(lái)代替，這就避免了變量的沖突。
2、解決閉包問(wèn)題：
一般直接寫在腳本里的函數(shù)，執(zhí)行后其中未銷毀的變量是繼續(xù)存在，并能夠正常訪問(wèn)的。這個(gè)和我們一向理解的函數(shù)私有變量是不符的。
但我們用這種方式，將需要的所有函數(shù)都包在這個(gè)匿名函數(shù)里，則其中的局部變量，在外部將不能訪問(wèn)，變相的起到了創(chuàng)建私有的局部變量的作用。只有this.開(kāi)頭的那些成員，才是插件外部可以訪問(wèn)的。

上一篇：JQuery之拖拽插件實(shí)現(xiàn)代碼

下一篇：Jquery公告滾動(dòng)+AJAX后臺(tái)得到數(shù)據(jù)