Heim >Web-Frontend >js-Tutorial >用jQuery做更好的组件通用组件定义模式_jquery

用jQuery做更好的组件通用组件定义模式_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal: 2016-05-16 18:14:491155Durchsuche

这个模式的优势：
在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)' }); 

完整演示：

(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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：javascript innerHTML使用分析_javascript技巧Nächster Artikel：关于Ext中form移除textfield方法:hide(),setVisible(false)，remove()_javascript技巧

In Verbindung stehende Artikel

Mehr sehen

用jQuery做更好的组件 通用组件定义模式_jquery

In Verbindung stehende Artikel

用jQuery做更好的组件通用组件定义模式_jquery