jquery插件編寫簡單總結(jié)

jquery插件開發(fā)一般有兩種方法:

1?通過$.extend()來擴展,寫成jQuery.extend()也可以的

2?通過$.fn.extend()來進行擴展,也可以寫成jQuery.fn.extend()

第一種方法，相當于在$身上添加了一個全局函數(shù)，如果和后臺java、c#類比的話，就是相當于在

$或jQuey這個類上添加了一個靜態(tài)的方法(函數(shù))

那怎么寫?

把通過第一種方法擴展的插件寫在這個common.js文件里，然后在index.html頁面去測試

代碼：

非常簡單的一行代碼

然后看index.html頁面調(diào)用

然后看控制臺輸出:

一切都是妥妥的，沒毛病，而且其他頁面如果引用了，都能使用這個方法。

但是如果需要定義多個全局的函數(shù)，通常我們用面向?qū)ο蟮乃枷雭砭帉憽?/p>

例如：

將所有的成員都掛在一個對象上，或者說是放在一個命令空間里。這樣做的好處就是，不用定義太多的外部變量，避免引起沖突。

調(diào)用:

調(diào)用的話就是: $.對象名.成員。

結(jié)果:

當然我們也可以用jQuery提供給我們用于擴展用的行數(shù)extend()

例如:

調(diào)用:

結(jié)果:

前面的這些都屬于第一種方法的范疇，本質(zhì)就是在$上添加全局函數(shù)就可以了。

再看第二種方式$.fn.extend()，這種方式相當于給$的每一個實例對象添加方法(函數(shù))

首先我們要知道fn是個什么鬼，查看jQuery源代碼，會發(fā)現(xiàn)這樣的一行代碼:

說明我們就是在原型上去做的擴展。

例如:

注意:index是對應(yīng)的索引，ele對應(yīng)的是每一個dom元素對象

最后一樣的return是用于支持鏈式調(diào)用的。

調(diào)用:

最后的效果:

如果要擴展多個方法，這個時候就需要這樣寫了

顯然比較麻煩！

還是一樣可以使用jQuery提供給我們的方法(函數(shù))$.fn.extend()

如果要擴展多個就可以這樣寫了

調(diào)用:

能夠鏈式操作。

效果如圖所示:

總結(jié):

jQuey插件編寫的兩種方式:

1 $.extend();???? // 在全局上添加函數(shù) 相當于靜態(tài)方法(類比C#)

2 $.fn.extend();??? // 相當于給jquey對象添加?? 相當于實例方法(類比C#)

再補充一點:

這個外面的this和里面的這個this不是同一個對象

查看其結(jié)果:

注意里面的每一個this對象都是dom對象