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)文章
JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例
本篇文章只要是對(duì)JQuery的Ajax請(qǐng)求實(shí)現(xiàn)局部刷新的簡(jiǎn)單實(shí)例進(jìn)行了詳細(xì)的介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
Jquery仿IGoogle實(shí)現(xiàn)可拖動(dòng)窗口示例代碼
這個(gè)拖動(dòng)窗口是根據(jù)一個(gè)Jquery的框架直接做出來(lái)的:easywidgets,廢話就不多說(shuō)了,直接把源代碼貼出來(lái),讓大家學(xué)習(xí)2014-08-08
jquery實(shí)現(xiàn)界面無(wú)刷新加載登陸注冊(cè)
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)界面無(wú)刷新加載登陸注冊(cè),具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-07-07
jQuery滾動(dòng)加載圖片效果的實(shí)現(xiàn)
實(shí)現(xiàn)滾動(dòng)加載的一個(gè)功能函數(shù),需要的朋友可以參考一下2013-03-03
jQuery fadeTo方法調(diào)整圖片的透明度使用介紹
利用jquery的fadeTo方法可以簡(jiǎn)單的制作一些很不錯(cuò)的動(dòng)畫(huà)效果.可以使圖片或者文字或者區(qū)塊以不同的透明度效果出現(xiàn).例如以下練習(xí)實(shí)例,感興趣的朋友可以參考下哈2013-05-05
jQuery構(gòu)造函數(shù)init參數(shù)分析
這篇文章主要介紹了jQuery構(gòu)造函數(shù)init參數(shù)分析,今天主要是分析一下jQuery中init選擇器構(gòu)造函數(shù),處理選擇器函數(shù)中的參數(shù),感興趣的朋友可以了解下2015-05-05

