第四十三课：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 = $this.data('CCalendar'), //这个就相当于$._data(this, "CCalendar")
if (!data) {
data = 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, { ..... })
加油！
posted on 2015-01-13 10:13 chaojidan 阅读(1267) 评论(0) 编辑 收藏 举报
