首页 > 代码库 > 第四十三课:jQuery插件化

第四十三课:jQuery插件化

我们先来看一个最简单的例子:

(function($){

  $.fn.extend({     //把此插件添加到jQuery的原型上

    pluginName:function(){   //插件的名字

      return this.each(function(){     //遍历匹配元素的集合

        //插件要实现的功能

      });

    }

  });

})(jQuery);   //传入jQuery对象

由于jQuery是集化操作($("div")会选择多个div元素进行操作),而我们的插件编写应该一个元素对应一个配置对象,我们可以使用$.extend({},defaults,options)来为每个元素分配独立的配置对象。其中,defaults为默认配置对象,以防我们什么都没传时,插件也能正常运作。如果传入的配置对象options比较复杂,也就是说options的属性也是一个对象,那么我们可以使用深拷贝,$.extend(true,{},defaults,options)。

当然,你可以在上面例子中的each中做一个元素对应一个配置对象的操作,但是如果操作很多,那么在each中就会有很多代码,维护不方便。

因此,我们需要使用面向对象的写法。请看例子:

(function($){

  var Plugin = function(element, options){

  };

  Plugin.defaults = {    //默认配置

  };

  Plugin.prototype = {};

  $.fn.extend({     //把此插件添加到jQuery的原型上

    pluginName:function(options){   //插件的名字

      return this.each(function(){     //遍历匹配元素的集合

        var ui = $._data(this, "pluginname");    //看此元素在jQuey缓存系统中是否存有pluginname属性,它的值是一个Plugin实例对象

        if(!ui){

          var opts = $.extend(true,{}, Plugin.defaults , options);    //这里的默认配置对象一般写在Plugin实例构造中使用

          ui = new Plugin(this,opts);

          $._data(this,"pluginname", ui);    //一个元素对应一个Plugin实例对象,插件的功能,全部在Plugin对象中,因此,我们只需要改写Plugin构造函数以及它的原型,就能实现此插件的功能。

        }       

      });

    }

  });

})(jQuery);   //传入jQuery对象

Bootstrap在上面的基础上,进行了三大改造,第一:插件的无冲突处理。第二:将内部的对象构造器(类)放到了$.fn.pluginName.Constructor上,方便我们来扩展这个内部类。第三:利用事件代理自动初始化实例,目的是让用户只需要引入此插件,并按照规定写HTML,就能让此HTML实现插件的功能。举个例子:

(function($){

//------------------------------------------------------------------------内部的对象构造器(内部类)

  var Dropdown= function(element, options){

    $(element).on("click",this.toggle);    //当$("div").dropdowm({....})时,就会给div绑定一个click事件,如果点击了div,就会触发toggle方法。

  };

  Dropdown.defaults = {    //默认配置

  };

  Dropdown.prototype = {

    constructor:Dropdown,

    toggle:function(){

      ......

    }

  };

//--------------------------------------------------------------

  var old = $.fn.dropdown;    //因为需要重写此方法名,因此先把原始的保存在old变量中,当调用$.fn.dropdown.noConflict(),就会把它还原。

  $.fn.extend({     //把此插件添加到jQuery的原型上

    dropdown :function(options){   //插件的名字

      var args = [].slice.call(arguments,1);

      return this.each(function(){     //遍历匹配元素的集合

        var ui = $._data(this, "dropdown");    //看此元素在jQuey缓存系统中是否存有dropdown属性,它的值是一个Dropdown实例对象

        if(!ui){

          var opts = $.extend(true,{}, Dropdown.defaults , options);   //这里的默认配置对象,一般在Dropdown实例对象构造中使用。

          ui = new Dropdown(this,opts);

          $._data(this,"dropdown", ui);    //一个元素对应一个Dropdown实例对象,插件的功能,全部在Dropdown对象中,因此,我们只需要改写Dropdown构造函数以及它的原型,就能实现此插件的功能。

        }    

        if (typeof options == ‘string‘ && typeof ui[options] == ‘function‘) {  //这里添加的这段代码,是针对jQuery插件的,当我们实例化此插件后,比如:$("div").dropdown({....})后,如果想调用此插件的方法,那么,可以用$("div").dropdown(方法名, arg1,arg2....)
          ui[options].apply(ui, args);
        }    

      });

    }

  });

  $.fn.dropdown.Constructor = Dropdown;   //把内部类暴露出来,我们可以通过$.fn.dropdown.Constructor来访问,并且扩展它

  $.fn.dropdown.noConflict = function(){

    $.fn.dropdown = old;

    return this;

  }

  $(document).on("click", ".dropdown",Dropdown.prototype.toggle);    //加载完此插件后,在HTML的元素中只要有class = dropdowm,那么点击此元素,就会执行toggle方法。 

})(jQuery);   //传入jQuery对象

 如果想做jQuery插件,此思想一定要掌握,面试会问,一次看不懂,多看几次就懂了,或者去看下公司里面其他人写的插件,就很容易懂了。如果大家没有很好的例子,那可以看一下我写的那个日历插件:http://www.cnblogs.com/chaojidan/p/4140725.html。在这个插件中,我是直接使用了全局变量来定义了CCalendar,这样会污染我们的全局环境,因此,我们只需要在整个代码的外面,添加一个立即执行的匿名函数,同时包装到jQuery中就行了。

(function($){    

//------------------------------------------------------------------------内部的对象构造器(内部类)

  // 日历插件代码  

//-------------------------------------------------------------- 

  $.fn.ccalendar = function (options) {
    return this.each(function () {
      var $this = $(this),
      data = http://www.mamicode.com/$this.data(‘CCalendar‘),  //这个就相当于$._data(this, "CCalendar")
      if (!data) {

        data =http://www.mamicode.com/ new CCalendar(this, options);
        $this.data(‘CCalendar‘, data );  //这个就相当于$._data(this,"CCalendar“, data);
      }
    });
  };
  $.fn.ccalendar.Constructor = CCalendar;

 })(jQuery)

这样一包装之后,插件代码中的方法和变量,都变成局部的了,就不会污染全局环境了,但是在使用这个日历插件时,你就需要这样调用了:

$("input").ccalendar({   .....   });

如果大家使用的是sea.js这种模块化开发的模式:

那么只需要:

define(function(require, exports, module){

  var $ = require("./jQuery.js");

  //然后再把上面的立即执行函数中的代码放到这里。

  module.exports=CCalendar;

})

这时,你既可以用jQuery的调用方式:$("input").ccalendar({   .....   });

也可以使用sea.js的调用方式:var callendar = require("./ccalendar.js");   var date = new callendar(element, { ..... }) 

 

 

 

加油!

第四十三课:jQuery插件化