用jQuery做更好的组件 通用组件定义模式
(编辑：jimmy 日期: 2025/11/4 浏览：3 次 )
这个模式的优势：
在jQuery对象和组件和实例之间可以互相保留引用。
代码清晰。
易于扩展。
可以摆脱一些复杂的机制，手工完成组件。
最后一点是最有意思的，如果按这个模式来做，构造函数和原型方法都可以自由控制。能够摆脱的东西就是一些继承的hack手段，甚至jQuery也不是必须的。
手工的总是最好的。
一个简陋DEMO
复制代码 代码如下:
/*
* @by ambar_li
* @create 2010-11-30
* 标签选择，验证
*/
(function($){
var tagSelector = function(input,options){
var me = this;
var opt = me.opt = $.extend({
limit : 5
,tags : null
,delimiter : ','
}, options || {});
var $el = me.input = $(input);
var $tags = me.tags = $(opt.tags);
if(!$el.length || !$tags.length) return;
$tags.click(function(e){
e.preventDefault();
var tag = $(this).text();
me[me.has(tag)?'remove':'add'](tag);
});
};
tagSelector.prototype = {
add : function(tag){
if(tag){
var me = this, tags = me.get(), del = me.opt.delimiter;
tags.push(tag);
me.input.val( tags.join(del) );
}
return me;
}
,remove : function(tag){
var me = this, exist = function(v){ return v !=tag; };
me.input.val( $.grep(me.get(),exist) );
return me;
}
,cleanify : function(){
return this.remove();
}
,limit : function(){
var me = this, tags = me.cleanify().get()
,len = tags.length, max = me.opt.limit;
if(len>max){
me.input.val( tags.slice(0,max) );
}
return me;
}
,has : function(tag){
return $.inArray(tag,this.get()) > -1;
}
,get : function(){
var val = $.trim(this.input.val());
return val ? $.map( val.split(/[,，]+/), $.trim ) : [];
}
};
$.fn.tagSelector = function(options){
return this.each(function(){
$(this).data('tagSelector',new tagSelector(this,options));
});
};
})(jQuery);
最重要的是最后一段。
jQueryUI对比，有初始化检查：
复制代码 代码如下:
this.each(function() {
var instance = $.data( this, name );
if ( instance ) {
instance.option( options || {} )._init();
} else {
$.data( this, name, new object( options, this ) );
}
});
两种调用方式
复制代码 代码如下:
var $input = $('#tb_tags').tagSelector( { tags:'div.tag_group a:not(.btn_tag_more)'} );
var api = $input.data('tagSelector');
// var api = new tagSelector('#tb_tags',{ tags :'div.tag_group a:not(.btn_tag_more)' });
完整演示：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
在jQuery对象和组件和实例之间可以互相保留引用。
代码清晰。
易于扩展。
可以摆脱一些复杂的机制，手工完成组件。
最后一点是最有意思的，如果按这个模式来做，构造函数和原型方法都可以自由控制。能够摆脱的东西就是一些继承的hack手段，甚至jQuery也不是必须的。
手工的总是最好的。
一个简陋DEMO
复制代码 代码如下:
/*
* @by ambar_li
* @create 2010-11-30
* 标签选择，验证
*/
(function($){
var tagSelector = function(input,options){
var me = this;
var opt = me.opt = $.extend({
limit : 5
,tags : null
,delimiter : ','
}, options || {});
var $el = me.input = $(input);
var $tags = me.tags = $(opt.tags);
if(!$el.length || !$tags.length) return;
$tags.click(function(e){
e.preventDefault();
var tag = $(this).text();
me[me.has(tag)?'remove':'add'](tag);
});
};
tagSelector.prototype = {
add : function(tag){
if(tag){
var me = this, tags = me.get(), del = me.opt.delimiter;
tags.push(tag);
me.input.val( tags.join(del) );
}
return me;
}
,remove : function(tag){
var me = this, exist = function(v){ return v !=tag; };
me.input.val( $.grep(me.get(),exist) );
return me;
}
,cleanify : function(){
return this.remove();
}
,limit : function(){
var me = this, tags = me.cleanify().get()
,len = tags.length, max = me.opt.limit;
if(len>max){
me.input.val( tags.slice(0,max) );
}
return me;
}
,has : function(tag){
return $.inArray(tag,this.get()) > -1;
}
,get : function(){
var val = $.trim(this.input.val());
return val ? $.map( val.split(/[,，]+/), $.trim ) : [];
}
};
$.fn.tagSelector = function(options){
return this.each(function(){
$(this).data('tagSelector',new tagSelector(this,options));
});
};
})(jQuery);
最重要的是最后一段。
jQueryUI对比，有初始化检查：
复制代码 代码如下:
this.each(function() {
var instance = $.data( this, name );
if ( instance ) {
instance.option( options || {} )._init();
} else {
$.data( this, name, new object( options, this ) );
}
});
两种调用方式
复制代码 代码如下:
var $input = $('#tb_tags').tagSelector( { tags:'div.tag_group a:not(.btn_tag_more)'} );
var api = $input.data('tagSelector');
// var api = new tagSelector('#tb_tags',{ tags :'div.tag_group a:not(.btn_tag_more)' });
完整演示：
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
下一篇：JavaScript格式化数字的函数代码