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

  这个模式的优势:

  在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需刷新才能执行]