需求场景
最近项目改版中，发现很多地方有这样一个操作(见下图gif动画演示)，很多地方都有用到。这里不讨论它的用户体验怎么样。
仅仅是从复用的角度，如果每个页面都去写text和select元素，两个button按钮，增加add和delete对应的js函数，无疑大大增加了工作量和维护成本。
select有预设值的情况：
下面就开始动手把这4个html元素做成一个JQuery插件。
jquery插件结构
如果你是零基础，请参考Jquery官网对jquery plugin的介绍：http://learn.jquery.com/plugins/
整个插件做好后是一个js文件，我们首先来看下它的整体结构，如下图：
调用时的代码(无参)：
$(".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上，但鉴于这个插件的功能很少，就不费周章了。需要的直接在本篇文章下载吧。
另外本人水平有限，如有错误之处还请各位批评指正。
希望本文对你有帮助。