jQuery創(chuàng)建插件的代碼分析
更新時(shí)間：2011年04月14日 21:49:40 作者：
jQuery創(chuà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)化寫(xiě)法。但$這個(gè)符號(hào)有時(shí)候會(huì)沖突。
在上面匿名函數(shù)的代碼中，我們可以習(xí)慣性的用$來(lái)寫(xiě)，但執(zhí)行的時(shí)候會(huì)用jQuery來(lái)代替，這就避免了變量的沖突。
2、解決閉包問(wèn)題：
一般直接寫(xiě)在腳本里的函數(shù)，執(zhí)行后其中未銷(xiāo)毀的變量是繼續(xù)存在，并能夠正常訪問(wèn)的。這個(gè)和我們一向理解的函數(shù)私有變量是不符的。
但我們用這種方式，將需要的所有函數(shù)都包在這個(gè)匿名函數(shù)里，則其中的局部變量，在外部將不能訪問(wèn)，變相的起到了創(chuàng)建私有的局部變量的作用。只有this.開(kāi)頭的那些成員，才是插件外部可以訪問(wèn)的。
復(fù)制代碼 代碼如下:
(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)化寫(xiě)法。但$這個(gè)符號(hào)有時(shí)候會(huì)沖突。
在上面匿名函數(shù)的代碼中，我們可以習(xí)慣性的用$來(lái)寫(xiě)，但執(zhí)行的時(shí)候會(huì)用jQuery來(lái)代替，這就避免了變量的沖突。
2、解決閉包問(wèn)題：
一般直接寫(xiě)在腳本里的函數(shù)，執(zhí)行后其中未銷(xiāo)毀的變量是繼續(xù)存在，并能夠正常訪問(wèn)的。這個(gè)和我們一向理解的函數(shù)私有變量是不符的。
但我們用這種方式，將需要的所有函數(shù)都包在這個(gè)匿名函數(shù)里，則其中的局部變量，在外部將不能訪問(wèn)，變相的起到了創(chuàng)建私有的局部變量的作用。只有this.開(kāi)頭的那些成員，才是插件外部可以訪問(wèn)的。
相關(guān)文章
從零開(kāi)始學(xué)習(xí)jQuery (二) 萬(wàn)能的選擇器
本章講解jQuery最重要的選擇器部分的知識(shí). 有了jQuery的選擇器我們幾乎可以獲取頁(yè)面上任意的一個(gè)或一組對(duì)象, 可以明顯減輕開(kāi)發(fā)人員的工作量.2010-10-10
通過(guò)jQuery源碼學(xué)習(xí)javascript(二)
昨天寫(xiě)了篇通過(guò)jQuery源碼學(xué)習(xí)javascript（一），里面有一個(gè)定義對(duì)象C的方法，我早期也沒(méi)有太注意這個(gè)方面的技術(shù)細(xì)節(jié)。后來(lái)我查了一下資料，發(fā)現(xiàn)里面有很多巧的地方。今天與大家分享2012-12-12
這篇文章主要介紹了jQuery操作元素追加內(nèi)容,結(jié)合完整實(shí)例形式分析了jquery頁(yè)面元素追加相關(guān)操作方法,包括append、appendTo、prepend、prependTo等方法使用技巧,需要的朋友可以參考下2020-01-01
jQuery選擇器使得獲得頁(yè)面元素變得更加容易、更加靈活，從而大大減輕了開(kāi)發(fā)人員的壓力。如同蓋樓一樣，沒(méi)有磚瓦，就蓋不起樓房。得不到元素談何其他各種操作呢？可見(jiàn),jQuery選擇器的重要性。當(dāng)然想一下子掌握所有選擇器也是很困難的，這個(gè)得靠實(shí)踐和積累2014-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery多選框選擇數(shù)量限制方法，最多選擇 三項(xiàng) 的上限已滿(mǎn), 其他選項(xiàng)將會(huì)變?yōu)椴豢蛇x2017-02-02
利用JQuery實(shí)現(xiàn)datatables插件的增加和刪除行功能
這篇文章給大家介紹了jquery實(shí)現(xiàn)datatables插件的增加和刪除行的功能，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2017-01-01
淺析Js(Jquery)中,字符串與JSON格式互相轉(zhuǎn)換的示例(直接運(yùn)行實(shí)例)
這幾天，遇到了json格式在JS和Jquey的環(huán)境中，需要相互轉(zhuǎn)換，在網(wǎng)上查了一下，大多為缺胳膊少腿，也許咱是菜鳥(niǎo)吧，終于測(cè)試成功后，還是給初學(xué)者們一個(gè)實(shí)例吧2013-07-07
這篇文章主要介紹了Jquery搜索父元素操作方法,實(shí)例分析了parents、cloest、parent、parentsUtil及offsetParent方法的使用技巧,需要的朋友可以參考下2015-02-02
jQuery實(shí)現(xiàn)簡(jiǎn)單的計(jì)時(shí)器功能實(shí)例分析
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的計(jì)時(shí)器功能,結(jié)合實(shí)例形式分析了jQuery實(shí)現(xiàn)倒計(jì)時(shí)60秒的具體操作技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-08-08
jQuery EasyUI是一組基于JQuery的UI插件集合，而JQueryEasyUI的目標(biāo)就是幫助開(kāi)發(fā)者更輕松的打造出功能豐富并且美觀的UI界面，下面小編帶領(lǐng)大家一起學(xué)習(xí)jquery easyui入門(mén)知識(shí)，一起看看吧2016-08-08