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()来调用，只有点击这个元素时，网页颜色才会改变。