jQuery赋予了我们很强大的插件自定义的功能,可以作为我们的武器库,应用到所有的网页中,使用的语法比较有意思,下面是对它的一些探讨.
遵循以下的原则:
1 IIFE 创建一个jQuery的scope
(function($){}(jQuery))
2 namespace要唯一.
$.widget('custom.colorize')
custom为命名空间,colorize为插件名
3 default options
options:{red:255,green:0,blue:0,change:null,random:null}
三个属性(red,green,blue),两个方法(change,random)初始化
4 可扩展option,使用工厂方法会自动进行检测输入参数和扩展.比如
$('#div1').colorize({
green:128,
random:function(event, ui) {
return ui.green > 128;
}
})
就会将option扩展为:
option = {
red:255,
green:128,
blue:0,
change:null,
random:function(event, ui) {
return ui.green > 128;
}
}
本质使用的应该是 $.extend({},default,options) 方法
5 添加私有方法:
(function($){
$.widget("custom.colorize",{
options:{
red:255,
green:0,
blue:0,
change:null,
random:null
},
// constructor
_create:function() {
this.element
.addClass("custom-colorize");
this.changer = $('<button>',{text:'change','class':'custom-colorize-changer'})
.appendTo(this.element)
.button();
// 绑定点击事件在该button上
this._on(this.charger, {
click:"random"
});
this._refresh();
},
// 更新,render
_refresh: function() {
this.element.css('background-color',`rgb(${this.options.red},${this.options.green},${this.options.blue})`);
// 触发回调函数change
this._trigger('change');
},
//销毁
_destroy: function() {
this.changer.remove();
this.element
.removeClass('custom-colorize')
.enableSelection()
.css('background-color', 'transparent');
},
// 设置,包含所有参数合并
_setOptions:function(){
this._superApply(arguments);
this._refresh();
},
// 设置,部分参数
_setOption:function(key,value){
if(/ref|green|blue/.test(key) && (value < 0 || value > 255)) {
return;
}
this._super(key,value);
}
});
}(jQuery))
6 公有方法,添加一个随机的方法
(function($){
$.widget("custom.colorize",{
//公有方法,可被colorize('random')访问
random:function(){
let color = {
red: Math.floor(Math.random() * 256),
green: Math.floor(Math.random() * 256),
blue: Math.floor(Math.random() * 256)
};
if (this._trigger("random",event,colors) !== false) {
this.option(colors);
}
}
});
然后来看一下怎么使用这个插件:
// 初始化默认参数
$('#my-widget1').colorize(); // 初始化并带有参数
$('#my-widget2').colorize({
green: 128,
random: function(event, ui) {
return ui.green > 128;
}
}); // 点击enable或disable
$('#disable').on('click',function(){
if ($(':custom-colorize').colorize('option','disabled')) {
$(':custom-colorize').colorize('enable');
} else {
$(':custom-colorize').colorize('disable');
}
}); // 点击设置运行后参数
$('#grenn').on('click',function() {
$(':custom-colorize').colorize('option', {
red: 64,
green: 250,
blue: 8
});
});
值得注意的是:
1 内置的插件selector, 如果是使用的工厂方法创建的插件,可以使用$(':插件名称')来获取所有应用了该插件的所有实例(instance),
2 使用"enable"和"disable"作为参数来操作插件是否有效
3 random里的ui是jQuery UI对象,详情请参见 https://jqueryui.com/
代码来自jQuery官方文档:http://jqueryui.com/widget/
希望对你有所帮助!