Use jQuery to make better components Universal component definition pattern_jquery

Advantages of this pattern:
References can be maintained between jQuery objects, components, and instances.
The code is clear.
Easy to extend.
You can get rid of some complicated mechanisms and complete the components by hand.
The last point is the most interesting. If you follow this pattern, both the constructor and the prototype method can be freely controlled. What you can get rid of are some inherited hacks, and even jQuery is not necessary.
Handmade ones are always the best.
A simple DEMO

Copy code The code is as follows:

/*
* @by ambar_li
* @create 2010-11-30
* Tag selection, verification
*/
(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);

The most important thing is the last paragraph.
jQueryUI comparison, there is initialization check:

Copy code The code is as follows:

this. each(function() {
var instance = $.data( this, name );
if ( instance ) {
instance.option( options || {} )._init();
} else {
$.data( this, name, new object( options, this ) );
}
});

Two calling methods

Copy code The code is as follows:

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)' });

Full demo:

<meta charset="UTF-8"> <title>Easy tag selection</title> <style type="text/css"> .tag_group a{margin:0 3px;} </style> <div class="filed"> <div class="filed_label"> Tag: </div> <input type="text" name="tags" id="tb_tags" class="inp_txt"> <span class="filed_tip">Maximum 5, separated by commas</span> <div class="tag_group"> <a href="#" title="腐败">Corruption</a><a href="#" title="休假">Vacation</a><a href="#" title="蜜月">Honeymoon</a><a href="#" title="电影">Movies</a><a href="#" title="读书">Reading</a><a href="#" title="蜜月">Honeymoon</a><a class="btn_tag_more" href="#" title="更多">More </a> <🎜> 🎜><div class="tags_group clearfix" style="left:203px; display:none;">Vacation<a href="#" title="腐败"></a>Honeymoon<a href="#" title="休假"></a>Corruption<a href="#" title="蜜月"></a>Vacation<a href="#" title="腐败"></a>Honeymoon<a href="#" title="休假"></a>Corruption<a href="#" title="蜜月"></a>Vacation<a href="#" title="腐败"></a>Honeymoon<a href="#" title="休假"></a>Corruption<a href="#" title="蜜月"></a>Vacation<a href="#" title="腐败"></a>Honeymoon<a href="#" title="休假"> </a> <a href="#" title="蜜月"> </a> <br> <input onclick="runEx('runcode70077')" type="button" value="运行代码"><input onclick="doCopy('runcode70077')" type="button" value="复制代码"><input onclick="doSave(runcode70077)" type="button" value="保存代码"> <a href="http://www.jb51.net/article/23421.htm" title="查看具体详情" target="_blank"> </a>[Ctrl A select all Note: </div>If you need to introduce external Js, you need to refresh to execute <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.4.min.js"></script>]<script> /* * @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); $(function(){ 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)' }); }); </script> </div> </div>