自己写jquery插件之模版插件高级篇(一)

需求场景

最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到。这里不讨论它的用户体验怎么样。

仅仅是从复用的角度,如果每个页面都去写text和select元素,两个button按钮,增加add和delete对应的js函数,无疑大大增加了工作量和维护成本。

自己写jquery插件之模版插件高级篇(一)

select有预设值的情况:

自己写jquery插件之模版插件高级篇(一)

下面就开始动手把这4个html元素做成一个JQuery插件。

jquery插件结构

如果你是零基础,请参考Jquery官网对jquery plugin的介绍:http://learn.jquery.com/plugins/

整个插件做好后是一个js文件,我们首先来看下它的整体结构,如下图:

自己写jquery插件之模版插件高级篇(一)

调用时的代码(无参):

$(".demo1").dlpcustomSelect();

调用时的代码(有参):

$(".demo1").dlpcustomSelect({
addButtonText:'Add',
delButtonText:'>>'
});

前台HTML:

<select class="demo1"></select>

这样就把插件定义的html元素全部渲染出来了,插件自带了相关js函数和功能。代码维护起来非常方便。

下面我们开始这个Jquery插件的制作过程:

一. 定义插件结构,插件名称,默认值和构造函数

1.插件结构,名称,默认值

新建dlpcustomselect.js文件后,我们首先书写这样的代码:

;(function ($, window, document, undefined) {
//Author:HANGWEI
//Create the defaults once
var pluginName = 'dlpcustomSelect',
defaults = {
addButtonEnabled : true,
addButtonText: 'Add',
delButtonText:'Delete'
};
//... other code ... // A really lightweight plugin wrapper around the constructor,
// preventing against multiple instantiations
$.fn[ pluginName ] = function (options) {
var args = arguments; // Is the first parameter an object (options), or was omitted, instantiate a new instance of the plugin.
if (options === undefined || typeof options === 'object') {
return this.each(function () {
// If this is not a select
if (!$(this).is('select')) {
$(this).find('select').each(function(index, item) {
// For each nested select, instantiate the dlp custom select
$(item).dlpcustomSelect(options);//注意此处的插件名称
});
} else if (!$.data(this, 'plugin_' + pluginName)) {
// Only allow the plugin to be instantiated once so we check that the element has no plugin instantiation yet // if it has no instance, create a new one, pass options to our plugin constructor,
// and store the plugin instance in the elements jQuery data object.
$.data(this, 'plugin_' + pluginName, new DlpCustomSelect(this, options));//注意此处插件的构造函数
}
});
// If the first parameter is a string and it doesn't start with an underscore or "contains" the `init`-function,
// treat this as a call to a public method.
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') { // Cache the method call to make it possible to return a value
var returns; this.each(function () {
var instance = $.data(this, 'plugin_' + pluginName);
// Tests that there's already a plugin-instance and checks that the requested public method exists
if (instance instanceof DlpCustomSelect && typeof instance[options] === 'function') {//注意此处插件构造函数名
// Call the method of our plugin instance, and pass it the supplied arguments.
returns = instance[options].apply(instance, Array.prototype.slice.call(args, 1));
}
}); // If the earlier cached method gives a value back return the value,
// otherwise return this to preserve chainability.
return returns !== undefined ? returns : this;
} }; })(jQuery, window, document);

在上述代码中,pluginName是插件名称,defaults规定了插件的三个参数及其默认值;

$.fn[pluginName]=function(options){};函数的功能,如代码注释所说,阻止多个插件实例被创建。

;(function ($, window, document, undefined) {  这句代码的详细解释请参考 这里

2. 构造函数

  // The actual plugin constructor
function DlpCustomSelect(element, options) {
this.element = $(element);
// jQuery has an extend method which merges the contents of two or
// more objects, storing the result in the first object. The first object
// is generally empty as we don't want to alter the default options for
// future instances of the plugin
this.settings = $.extend({}, defaults, options);
this._defaults = defaults;
this._name = pluginName;
this.init();
}

构造函数用于初始化和参数定义,如无特殊需求, 可参考上述写法来定义。

二. 编写插件核心部分代码

下面我们开始章节一代码结构中: other code 的部分

1. 构造函数名.prototype={...};

 DlpCustomSelect.prototype = {
init: function () {
// Add the custom HTML template
this.container = $('' +
'<div class="dlpcustomselect-container">' +
'<table class="box1">' +
' <tr>' +
' <td><input class="waitAddValue" type="text" size="48" /></td>' +
' <td><input class="btn-pull-buttom" type="button" /></td>' +
' </tr>' +
' <tr>' +
' <td><select style="width: 265px;height: 100px" multiple="multiple"></select></td>' +
' <td><input class="btn-delete-buttom" type="button" /></td>' +
' </tr>' +
'</table>'+
'</div>')
.insertBefore(this.element); // Cache the inner elements
this.elements = {
originalSelect: this.element,
box1: $('.box1', this.container),
filterInput1: $('.box1 .waitAddValue', this.container),
select1: $('.box1 select', this.container),
addButton: $('.box1 .btn-pull-buttom', this.container),
deleteButton: $('.box1 .btn-delete-buttom', this.container)
}; // Set select IDs
this.originalSelectName = this.element.attr('name') || '';
var select1Id = 'dlpcustomselect-list_' + this.originalSelectName;
this.elements.select1.attr('id', select1Id); // Apply all settings
this.setAddButtonEnabled(this.settings.addButtonEnabled);
this.setAddButtonText(this.settings.addButtonText);
this.setDelButtonText(this.settings.delButtonText); //updateSelectionStates(this);
// Hide the original select
this.element.hide(); bindEvents(this);
refreshSelects(this); return this.element;
},
setAddButtonEnabled: function(value, refresh) {
this.settings.addButtonEnabled = value;
if (value) {
this.container.find('.btn-pull-buttom').removeAttr("disabled");
} else {
this.container.find('.btn-pull-buttom').attr("disabled","disabled");
}
if (refresh) {
//refreshSelects(this);
}
return this.element;
},
setAddButtonText: function(value, refresh) {
this.settings.addButtonText = value;
if (value) {
this.elements.addButton.show().val(value);
//if upper code type doesn't work,use this code.
//this.container.find('.btn-pull-buttom').show().val(value);
} else {
this.elements.addButton.hide().val(value);
//if upper code type doesn't work,use this code.
//this.container.find('.btn-pull-buttom').hide().val(value);
}
if (refresh) {
//refreshSelects(this);
}
return this.element;
},
setDelButtonText: function(value, refresh) {
this.settings.delButtonText = value;
if (value) {
this.elements.deleteButton.show().val(value);
} else {
this.elements.deleteButton.hide().val(value);
}
if (refresh) {
//refreshSelects(this);
}
return this.element;
},
getCustomData: function(){
var terms = new Array();
this.container.find('.box1 select option').each(function(index, item) {
terms.push(item['value']);
});
return terms;
},
getContainer: function() {
return this.container;
},
destroy: function() {
this.container.remove();
this.element.show();
$.data(this, 'plugin_' + pluginName, null);
return this.element;
}
};

init:function(){...}  需要实现的init函数,这里我们用来创建html模板、应用所有的设置、调用绑定事件。

方法 refreshSelects(this)用来将前台select中的元素(如果有的话)copy到插件中。

方法 getCustomData用来返回插件的值

这里的设计思路是:隐藏你在前台写的select元素,返回插件模板中的自定义html串。另外,如果前台select中有option元素,则同步copy到插件中。

三. 绑定插件按钮事件和书写自定义功能函数

//bind events for button
function bindEvents(dlpCustomSelect) {
dlpCustomSelect.elements.addButton.on('click', function() {
addOption(dlpCustomSelect);
});
dlpCustomSelect.elements.deleteButton.on('click', function() {
deleteOption(dlpCustomSelect);
});
//backup method.
/*
$(document).on('click', '.box1 .btn-pull-buttom', function() {
addOption(dlpCustomSelect);
});
*/
}

如以上代码所示,绑定插件的两个按钮的事件。其中addOption和deleteOption函数具体实现这里不再详细阐述。

根据项目实际需要,增加自定义绑定事件和函数。

四. 完成并测试

调用插件:

$(".demo1").dlpcustomSelect({
addButtonText:'Add',
delButtonText:'>>'
});

不更改参数值,直接调用(使用默认参数值):

$(".demo2").dlpcustomSelect();

获取插件中的值:$(".demo1").dlpcustomSelect('getCustomData')

demo下载

总结

本插件的实现大量参考了国外jquery插件制作的通用做法。希望本篇文章能起到抛砖引玉的作用,能引导开发人员自己动手写jquery插件。

本来想挂在github上,但鉴于这个插件的功能很少,就不费周章了。需要的直接在本篇文章下载吧。

另外本人水平有限,如有错误之处还请各位批评指正。

希望本文对你有帮助。

上一篇:MongoDB对数组元素及内嵌文档进行增删改查操作


下一篇:MongoDB系列二