jquery插件开发笔记

jquery插件开发常见的有两只方式，一个是添加到jquery的静态方法（$.plugin()），另外一个是添加到jquery的实例方法（$().plugin()）;

1、jquery类级别方法
;
if (typeof jQuery === 'undefined') {
throw new Error('requires jQuery');
}
(function($){
var Demo;
Demo.defaults = {
title:'测试插件',
...
}

Demo = function(options){
this.options = $.extend(Demo.defaults, options);
this.init(this);
this._show(this);
this._bindEvent(this);
}

Demo.prototype = {
init: function(){
$('body').append('<div class="modal hide"><input type="text" id="J_inputUserName"/></div>')
},
_show: function(){
$('.modal').show()
},
_bindEvent: function(){
$("#J_inputUserName").click(function(){
..to dos
});
}
}

$.extend({Demo:function(options){
if(!options)options = {};
return new Demo(this, options);
}});

})(jQuery)

2、jquery对象实例方法(面向对象的插件开发)
;
if (typeof jQuery === 'undefined') {
throw new Error('requires jQuery');
}
(function($){
var Demo;
Demo.defaults = {
title:'测试插件',
...
}

Demo = function(ele, options){
this.options = $.extend(Demo.defaults, options);
this.element = ele;//如：$('page').Demo()
this.init(this);
this._show(this);
this._bindEvent(this);
}

Demo.prototype = {
init: function(){
$('body').append('<div class="modal hide"><input type="text" id="J_inputUserName"/></div>')
},
_show: function(){
$('.modal').show()
},
_bindEvent: function(){
$("#J_inputUserName").click(function(){
..to dos
});
}
}
$.fn.Demo = function(options){
//在这里面,this指的是用jQuery选中的元素
return this.each(function(){
//链式调用
return new Demo(this, options)
})
}

})(jQuery)

转载于:https://www.cnblogs.com/hehedaa/p/8304988.html