标签:
一、开发方式:
1.类级别组件开发
- 即在jQuery命名空间下添加新的全局函数,也称为静态方法。
具体方法如下:
jQuery.myPlugin = function(){
// do something
}
例如:$.ajax()、$.extend()
2.对象级别组件开发
- 即挂在jQuery原型下的方法,这样通过选择器获取的jQuery对象实例也能共享该方法,也称为动态方法。
具体方法如下:
$.prototype.myPlugin = function(){
// do something
}
二、链式调用:
$.fn.myPlugin = function (){
return this.each(function(){
//do something
})
}
链式调用是jQuery的特点,实现链式调用的方法就是return this返回当前对象,上面的代码中用了each方法来循环实现每个对象的访问。
- 单例模式的动态方法:
$.fn.MyPlugin = function(){
var me = $(this),
instance = me.data("myPlugin"); //利用data()来存放插件对象的实例
//如果实例存在就不重新创建,如果不存在就创建
if(!instence){
me.data("myPlugin",(instance = new myPlugin()));
}
}
总结:一个单例模式jQuery插件的框架可以这样写:
//创建一个闭包,形参是$,实参是jQuery
(function($){
//私有方法
var privateFun = function(){ }
var PageSlide = (function(){
//更改对象
function PageSlide(element,options){
this.settings = $.extend(true,$.fn.PageSlide.default,options||{});
this.element = element;
this.init();
}
PageSlide.prototype = {
// 初始化方法
init : function(){ }
}
return PageSlide;
})();
//默认参数
$.fn.PageSlide = function(options){
//实现链式调用
return this.each(function(){
var _self = $(this),
instance = _self.data(‘PageSlide‘);//存放插件实例
if (!instance) {
instance = new PageSlide(_self,options);
_self.data(‘PageSlide‘,instance);
}
if ($.type(options)==‘string‘) return instance[options]();
});
}
//配置默认参数
$.fn.PageSlide.default = { }
})(jQuery);
jQuery的$.extend()方法能够将默认参数与自定义参数合并,当有ture时是深拷贝,没有true时是浅拷贝。
标签:
原文地址:http://www.cnblogs.com/koto/p/5655756.html