jquery插件编写

参照公众号”jquery大师“的jquery插件编写分享，在这里做一次转载。

编写jquery插件的方法主要有三种：

1、第一种是最常见的，通过一个简单的jquery函数prototype属性的别名（jquery.fn）进行扩展；

2、第二种方法采用jquery函数extend()方法；

3、第三种是最为复杂的方法，是使用强大发jqueryUIWidgeFactory进行扩展（不常用到，略去）。

jquery插件命名规范：通常采用jquery.PluginName.js来命名。

首先分析第一种插件方法：

因为在jquery源码中有这么一段代码：

jQuery.fn=jQuery.prototype={A:function(){},B:function(){}......}

因此第一种插件方法可以这样写：

jQuery.fn.MyPlugin = function(){//代码}

再采用自调用函数将其包装起来，完整的插件编写代码是：

(function($){
$.fn.myPlugin=function(){
//代码块
}
})(jQuery)

第二种插件方法：

需要注意的是，使用extend方法来扩展方法有两种方法，相对应的就有两种调用方法，这两种扩展方法分别是

$.extend({function(){}})

和

$.fn.extend({fun:function(){}})

相对应的调用方法分别为

$.fun()

和

$("selector").fun()

,这么理解这两种方法呢？

我们知道jquery是javascript的一个对象，如String,Data,Number,Array,Math以及浏览器对象一样，而带有$的函数是由jquery对象直接调用，dom元素为jquery实例化对象，我们引进面向对象的方法就更好理解这一关系。可以将这一关系理解成这样的代码（并非真实代码）：

jquery = new javascript();
dom = new jquery();

$.ajax等方法可以看成是jquery的静态发那个发，on()方法可以看做是jquery的一般方法，故调用jquery的静态方法和一般方法即为：jquery.ajax()和dom.on()。(静态方法要有类名来引用，一般方法要由实例化对象来引用)。

$.fn.extend

实现：

插件部分：

;(function($){
$.fn.extend({
myPlugin:function(color1,color2){
$(this).click(function(){
$(this).css({'color':black,'textDecoration':'line-through'});
return $(this);
})
}
});
})(jQuery)

引用部分：

$('a').myPlugin('pink','yellow')

$.extend

实现：

插件部分：

;(function($){
$.extend({
myPlugin:function(color1,color2){
$(this).click(function(){
$(this).css({'color':black,'textDecoration':'line-through'});
return $(this);
})
}
});
})(jQuery)

引用部分:

$.myPlugin('pink','yellow')

这两种方法的写法差别很小，只是范围不同，使用

$.fn.extend()

扩展方法只对对应的

$("selector")

相关，而

$.extend()

对整个页面都是相关的。

若我们想要写点击dom元素时，背景改变颜色，

$.extend({myPlugin:function()})

来扩展时，调用时事

$.myPlugin()

，即无论你点击哪个dom元素，背景颜色都会改变，若用

$.fn.extend({myPlugin:function()})

来扩展，

$(dom).myPlugin()

来调用，只有点击这个元素时，网页颜色才会改变。