jquery插件解读之tabs

先上代码，符简略关键性说明：

/**
 * jQuery EasyUI 1.4.1
 *
 * Copyright (c) 2009-2014 www.jeasyui.com. All rights reserved.
 *
 * Licensed under the GPL license: http://www.gnu.org/licenses/gpl.txt
 * To use it on other terms please contact us at info@jeasyui.com
 *
 */
/**
 * tabs - jQuery EasyUI
 *
 * Dependencies:
 *   panel
 *   linkbutton
 *
 */
(function($){
 ...... //你懂，此处省略很多字！
 function addTools(container){ //这些都是公共的处理方法，不过仅限内部调用。自己开发时，可以根据需求情况，定义不同的方法。
  var opts = $.data(container, 'tabs').options;
  var header = $(container).children('div.tabs-header');
  if (opts.tools) {
   if (typeof opts.tools == 'string'){
    $(opts.tools).addClass('tabs-tool').appendTo(header);
    $(opts.tools).show();
   } else {
    header.children('div.tabs-tool').remove();
    var tools = $('<div class="tabs-tool"><table cellspacing="0" cellpadding="0" style="height:100%"><tr></tr></table></div>').appendTo(header);
    var tr = tools.find('tr');
    for(var i=0; i<opts.tools.length; i++){
     var td = $('<td></td>').appendTo(tr);
     var tool = $('<a href="javascript:void(0);"></a>').appendTo(td);
     tool[0].onclick = eval(opts.tools[i].handler || function(){});
     tool.linkbutton($.extend({}, opts.tools[i], {
      plain: true
     }));
    }
   }
  } else {
   header.children('div.tabs-tool').remove();
  }
 }
 ...... //你懂，此处省略很多字！
 
 $.fn.tabs = function(options, param){
  if (typeof options == 'string') { // 这便是api解析器啦~\(≧▽≦)/~，根据参数类型，判断是初始化插件还是调用api。
   return $.fn.tabs.methods[options](this, param);
  }
  
  options = options || {};
  return this.each(function(){
   var state = $.data(this, 'tabs');
   if (state) {
    $.extend(state.options, options);
   } else {
    $.data(this, 'tabs', {
     options: $.extend({},$.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options),
     tabs: [],
     selectHis: []
    });
    wrapTabs(this);
   }
   
   addTools(this);
   setProperties(this);
   setSize(this);
   bindEvents(this);
   
   doFirstSelect(this);
  });
 };
 
 $.fn.tabs.methods = { //这些是提供给外部使用的api，其实也是只供内部调用，只不过插件根据传入的参数，解析执行不同方法而已。
  options: function(jq){
   var cc = jq[0];
   var opts = $.data(cc, 'tabs').options;
   var s = getSelectedTab(cc);
   opts.selected = s ? getTabIndex(cc, s) : -1;
   return opts;
  },
  tabs: function(jq){
   return $.data(jq[0], 'tabs').tabs;
  },
  resize: function(jq, param){
   return jq.each(function(){
    setSize(this, param);
    setSelectedSize(this);
   });
  },
  add: function(jq, options){
   return jq.each(function(){
    addTab(this, options);
   });
  },
  close: function(jq, which){
   return jq.each(function(){
    closeTab(this, which);
   });
  },

　...... //你懂，此处省略很多字！
 };
 
 $.fn.tabs.parseOptions = function(target){
  return $.extend({}, $.parser.parseOptions(target, [
   'tools','toolPosition','tabPosition',
   {fit:'boolean',border:'boolean',plain:'boolean',headerWidth:'number',tabWidth:'number',tabHeight:'number',selected:'number',showHeader:'boolean'}
  ]));
 };
 
 $.fn.tabs.defaults = { // 默认参数设置
  width: 'auto',
  height: 'auto',

...... //你懂，此处省略很多字！
  onUpdate: function(title, index){},
  onContextMenu: function(e, title, index){}
 };
})(jQuery);

经过上面简单介绍，那我们总结下：

1、插件中的处理方法种类（都是服务核心结构的）

　　有两种：一是仅供内部实现使用，和我们正常js方法申明一样 function  xxx(){ ... ... };

　　　　　　二是作为api供外部调用，一般申明形式为 var metheds = {add:function(container){

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//container为jquery对象

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　return container.each(function(){

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// return container.each（）这样写是为了维护链式
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　... ...
   　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　});

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 del:function(container,param){

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 ... ...

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　},

setSize:function(container,option){

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　  // option一般是 {key1:val1,key2:val2,... ... }

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　... ...

}

　　　　　　为什么如此定义捏？其实也没什么深意，方便下面的核心结构调用呗！

2、插件的核心结构

$.fn.tabs = function(options, param){
  if (typeof options == 'string') { // 这便是api解析器啦~\(≧▽≦)/~，根据参数类型，判断是初始化插件还是调用api。
   return $.fn.tabs.methods[options](this, param);
  }
  
  options = options || {};
  return this.each(function(){
   var state = $.data(this, 'tabs');
   if (state) {
    $.extend(state.options, options);
   } else {
    $.data(this, 'tabs', {
     options: $.extend({},$.fn.tabs.defaults, $.fn.tabs.parseOptions(this), options),
     tabs: [],
     selectHis: []
    });
    wrapTabs(this);
   }
   
   addTools(this);
   ... ...
  });
 };