编写jQuery插件

一般编写插件是给jQuery.fn添加一个新的函数属性：

jQuery.fn.myPlugin = function(){    ……}

但是为了使用我们熟悉的，可以使用一个IIFE函数将jQuery传入，并在内部使用:

(function(){    $.fn.myPlugin = function(){        ……    }})(jQuery);

此时在插件内部的this就是指向调用此方法的jQuery对象。

为了保证jQuery的链式调用，我们需要在插件最后返回this：

(function($){    $.fn.myPlugin = function(){        ……        return this;    }})(jQuery);

由于jQuery插件都可以批量对选择器选取的对象进行操作，因此在插件中需要对每一个都进行处理：

(function($){    $.fn.myPlugin = function(){        return this.each(function(){            ……        });    }})(jQuery);

一般插件会设置一些默认选项，我们有时要利用用户传入的参数来更改配置，这时就要使用到$.extend().

(function(){    $.fn.myPlugin = function(options){        $.extend({            base:100,            color:'black'        },options)        ……        return this.each(function(){            ……        });    }})(jQuery);

$("div").myPlugin({color:'red'});

想要为插件定义不同的方法，永远不要在 jQuery.fn 对象中声明一个以上的名称空间：

(function( $ ){  $.fn.tooltip = function( options ) {     // 这  };  $.fn.tooltipShow = function( ) {    // 不  };  $.fn.tooltipHide = function( ) {     // 好  };  $.fn.tooltipUpdate = function( content ) {     // !!!    };})( jQuery );

应该把所有的插件方法收集到一个对象定义中，并通过传递方法名称字符串调用：

(function($){    $.fn.myPlugin = function(method){        if(methods[method]){            return methods[method].apply(this,[].slice.call(arguments,1));        }else if(typeof method === 'object' || !method){            return methods.init.apply(this,arguments);        }else{            $.error();        }    }    var methods = {        init:function(options){……},        show:functoin(){},        hide:function(){},        update:function(){}    }})(jQuery);

$("div").myPlugin();  //调用init方法$("div").myPlugin({   //调用init方法    foo:bar;});$("div").myPlugin("hide")  //调用hide方法$('div').myPlugin('update', 'This is the new tooltip content!');  // 调用 update 方法

这种插件架构使你可以在插件的父闭包中封装所有方法，调用时先传方法名称字符串，接下来再把你需要的其它参数传给该方法。

这种封装和架构是 jQuery 插件社区的一个标准，已经被无数插件所使用，包括 jQueryUI 中的插件和小部件。