来，让我们用prototype和jq封装一个简单的tab小插件吧

前言：最近公司后台需要实现一个类似于选项卡的一个搜索，比如说点击手机型号，下面出现很多选项如苹果华为等，点击其中一项，再下面一行会出现你点击的这个选项，当当当，就像下图这样：

image.png

  点击搜索按钮，会收集选择结果那一行需要的数据传递给后台。由于这种形式的搜索在其他页面还会出现很多，所以，需要我把他们进行一下封装，前提是从后台接收到的数据结构都是一样的。

关键词：$.fn $.extend prototype 选项卡 封装 ......

正文：
1、需求：
运营提了要求，像很多插件一样，当他们想要用的时候，只需要在html里面写一个带有class的div，在script里面写入function然后传入数据就行：

html:

......
<div class="box"> </div>
......

script:

......
$('.box').tagRel({
     data:${dataValue}
 });
......

js:

(function($,window){
 function tagRel(element,options){
     this.element = $(element);
     this.options = $.extend({}, options);
     this._createDom();
     this._tabInit();
     this._tabToggle();
     this._labelClick();
     this._chosenClose();
 }
 tagRel.prototype = {
     //0:createDom
     _createDom : function(){
         var data = this.options.data,//要循环的数组
             divHiddenForm = '',//隐藏域，放在this.element的前面
             diva= '',
             divb= '',
             divc= '',
             divaLi = '',//diva的tabli
             divbPane = '';//divb的tab-pane
             //divbPaneLi = '';//divb的tab-pane-li
         divHiddenForm = '<form id="searchForm" method="post" style="display:none">' +
                             '<table class="search-table">' +
                                 '<tr>' +
                                     '<th>标签名称：</th>' +
                                     '<td><input id="hidden" name="condition" type="text"/></td>' +
                                 '</tr>' +
                             '</table>' +
                         '</form>';
         //循环divaLi,divbPane
         $.each(data,function(i,item){
             ......(省略)
         })
         diva = '<div class="title-box clearfix">'+
                     '<span class="labelValue">标签：</span>'+
                     '<ul class="tab-nav">'+divaLi+'</ul>'+
                 '</div>';
         divb = '<div class="tab-content">'+divbPane+'</div>';
         divc = '<div class="tab-footer clearfix">'+
                 '<span class="labelValue">选择结果：</span>'+
                 '<ul class="chosen-box"></ul>'+
               '</div>';
         //1:this.element之前放入隐藏域
         this.element.before(divHiddenForm);
         //2:this.element里面放入tab-title-box
         this.element.append(diva);
         //3:this.element里面放入tab-content-box
         this.element.append(divb);
         //4:this.element里面放入tab-chosen-box
         this.element.append(divc);
     },
     //1:tab初始化
     _tabInit : function(){
         $('.tab-li').eq(0).addClass('active');//第一个标签默认选中#
         $('.tab-pane').eq(0).stop().fadeIn();//第一个div默认显示
     },
     //2:tab切换
     _tabToggle : function(){
         var self = this;
         $('.tab-li').click(function(e){
             var liIndex = $(this).index();
             $(this).addClass('active');
             $(this).siblings().removeClass('active');
             $('.tab-pane').hide();
             $('.tab-pane').eq(liIndex).stop().fadeIn();
         })
     },
     //3:label点击
     _labelClick : function(e){
         ...(省略，这里就是一个点击标签，下层结果出现标签的效果)
     },
     //4:chosenClose关闭
     _chosenClose : function(e){
         var self= this;
         $(".layui-tab-close").live('click',function(e){
             e.stopPropagation();
             var dataId = $(this).closest('li').attr('data-id');
             var targetli = $('.tab-content').find('li[data-id='+dataId+']');
             targetli.removeClass('active');
             $(this).closest('li').remove();
             self._collection();
         })
     },
     //5:collect:收集结果
     _collection:function(){
         //收集信息
         var arr = [];
         $('.chosen-box li').each(function(){
             var key = $(this).attr('data-tag'),
                 keyValue =$(this).attr('data-val'),
                 json = {};
             json.tagName = key;
             json.tagValue = keyValue;
             arr.push(json);
         })//console.log(arr);//最终传输数据。
         $('#hidden').val(JSON.stringify(arr));
     }
 }

 $.fn.tagRel = function(options){
     new tagRel(this,options);
 }

})(jQuery,window);

好，上面是代码，下面就是几行重要代码的解析：
先看下面这张图片，比较直观：

image.png

这张图片是上述代码收缩了部分，比较能够突出我要说的重点：

重点一：

我们用写插件的人的思维来思考，我们肯定是需要一个函数的，这个函数要接受到script里面传过来的参数。所以，我们先写一个函数。就是上图中的函数一。
函数一接收了两个参数。一个是element,一个是options。element就代表着script里面是是哪个标签触发了这个函数，就是那个$(),里面是class。而options就是接收到的数据。

重点二：

$.extend({},options):
$.extend()有两种用法
  一种是扩展方法。
  另一种是合并对象获得一个新的对象。
这里，我们介绍一下合并对象这个方法：
一般的插件中，比如说拖拽插件，表格插件，都会有一些默认的参数，那是在具体实例化时数据参数未传进来的时候，这些默认的参数不会让展示出来的页面看起来垮掉，哈哈。
下面是找到的两个插件的默认参数default：
拖拽插件：

image.png

表格插件：

image.png
大家是否觉得有点不一样，其实，细心的人发现，本质上两个是一样的，只不过表格插件是合起来写了。
例如：

        var settings={validate:false,limit:5,name:"sm"};
        var defaults={validate:true,limit:2}
        var settings=$.extend(defaults,settings);
        结果：settings={validate:false,limit:5,name:"sm"}

重点三：

现在有了函数了，那么我们对于这个tab的一些操作都写在哪里呢,写在原型里吧，可随时取用。

重点四：

封装起来就可以了吗？不行的，因为我们每次传参数使用的时候是一个实例：
所以，最后那个函数的意思如下：
$.fn是指jquery的命名空间，加上fn上的方法及属性，会对jquery实例每一个有效。如扩展$.fn.abc()。
在 jQuery 中，fn 其实就是 JavaScript 中 propotype 的一个别名，$ 是 jQuery 的别名，所以
$.fn.tagRel等同于 jQuery.prototype.pluginName。举个简单的小例子：
('li') 是一个对象，它的 key 有 length，它的原型（共享属性）为 jQuery.prototype，jQuery.prototype 的 key 有 addClass、removeClass、text、html 和 on 等。 \.fn.tagRel表示创建一个 jQuery 的属性，通俗的说是写一个 jQuery 函数,tagRel才是函数名
eg:

$.fn.setRedText = function() {
    return $(this).css("color", "red");
};
$("p").setRedText();