jQuery 로 더 좋 은 구성 요소 유 니 버 설 구성 요소 정의 모드 만 들 기

이 모드 의 장점:jQuery 대상 과 구성 요소 와 인 스 턴 스 사이 에서 서로 참조 할 수 있 습 니 다.코드 가 또렷 하 다.확장 하기 쉽다.복잡 한 메커니즘 에서 벗 어 나 수 동 으로 구성 요 소 를 완성 할 수 있다.마지막 으로 가장 재 미 있 는 것 은 이 모델 로 하면 구조 함수 와 원형 방법 을 자 유 롭 게 제어 할 수 있다 는 것 이다.벗 어 날 수 있 는 것 은 바로 계승 하 는 hack 수단 이 고 심지어 jQuery 도 필요 한 것 이 아니다.수공 은 항상 가장 좋다.가장 중요 한 것 은 마지막 부분 이다.jQueryUI 대비 초기 화 검사:

 
/* 
* @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); 

두 가지 호출 방식

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

전체 프레젠테이션: