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/
希望对你有所帮助!
jQuery中的自定义插件之----工厂方法(Factory Widget)
原文地址：https://www.cnblogs.com/BigJ/p/8573732.html