摘要：自己實踐寫一個基于的插件面向對象的寫法這里我就不寫和了，主要就是分析插件代碼代碼我上傳到上了，如果你們想看結構及樣式的話，可以去把源碼下來看看地址地址目錄結構以及基本結構搭建首先搭建一個插件的框架里調(diào)用構造函數(shù)配置默認參數(shù)及參數(shù)獲取然后我們

自己實踐寫一個基于jquery的tab插件,面向對象的寫法
這里我就不寫index.html,和index.css了，主要就是分析插件代碼tab.js
代碼我上傳到github上了，如果你們想看DOM結構及CSS樣式的話，可以去把源碼下來看看
github地址：github地址
目錄結構：index.html,index.css以及tab.js

首先搭建一個jquery插件的框架
tab.js

;(function ($) {
    var Tab = function (target) {
    }

    Tab.prototype = {  
    }
   
    window.Tab = Tab
    
}(jQuery))

index.html 里調(diào)用Tab構造函數(shù)

然后我們先配置一些默認參數(shù)

tab.js

   ```
   var Tab = function (target) {
       //保存Tab類自身
       var _this_ = this
       //保存當前Tab組件的對象
       this.target = target
       //默認配置參數(shù)
       this.config={
           "tiggerType": "mouseover", //鼠標交互方式
           "effect":null,  //切換效果,默認為無
           "default":1,    //默認展示第幾個標簽
           "auto":false,    //自動切換時長,若指定了時長則表示開啟自動切換
       }
   }
   ```

用戶(使用者)配置參數(shù)的方法

默認參數(shù)配置好以后，我們需要獲取用戶的配置參數(shù)，
函數(shù)傳參的方式大家應該都很熟悉了，在這里我們不用傳參的方式獲取，我們采用設置DOM屬性的方式設置參數(shù)。這種配置方法很常見，比如Element-ui

index.html

    

        

            li*4
        
    
    

        img*4
    

在最外層的div即我們選中的DOM節(jié)點上設置了一個名為config的屬性，config的值為一串JSON
這樣子我們就設置了參數(shù)，那么怎么獲取呢？我們寫一個函數(shù)來獲取

獲取用戶的配置參數(shù)
tab.js

Tab.prototype = {
    //獲取用戶的配置參數(shù)
    getConfig: function () {
        var config = $(this.target).attr("config")
        if(config&&config!==""){
            //將用戶json格式的config轉為對象格式
            return $.parseJSON(config)
        }else{
            return null
        }
    },
}

函數(shù)我們寫在Tab.prototype{}里，這里的邏輯是：
1、attr()獲取我們在DOM節(jié)點里的配置參數(shù)
2、如果有的話就將我們獲取到的值轉換為js對象，沒有的話就返回null
這里要注意的是我們的宿主DOM，即我們在調(diào)用 new Tab("#box1")傳入的對象要用jquery包裹一下，這樣才能正常獲取到該節(jié)點，因為我傳入的僅僅是宿主DOM的ID，當然也可以在調(diào)用時直接將這個ID包裝一下，在這里就可以省去這一步而直接使用傳過來的對象。
index.html

參數(shù)處理
在解決了用戶參數(shù)配置的問題后，我們就要處理參數(shù)了

tab.js

var Tab = function (target) {
    //如果存在用戶的參數(shù)
    if(this.getConfig()){
        $.extend(this.config,this.getConfig())
    }
}

這里用到$.exten的()方法,如果有用戶的配置參數(shù)則會追加修改this.config，如果用戶沒有配置參數(shù)，那么程序就會使用我們的默認參數(shù)

獲取具體節(jié)點
tab.js / var Tab = function (){}

this.tabItems = $(this.target).find(".title ul.tab-list li")
this.contentItems = $(this.target).find(".content img")

為每個Tab標簽頁綁定節(jié)點
tab.js / var Tab = function (){}

var config = this.config
//綁定鼠標交互事件
if(config.tiggerType==="click"){
    this.tabItems.bind("click",function () {
        //這里的this指向每個每個具體的節(jié)點
        _this_.changeStyle($(this))
    })
}
else if(config.tiggerType==="click"||config.tiggerType!=="click"){
    this.tabItems.bind("mouseover",function () {
        _this_.changeStyle($(this))
    })
}

/* this.tabItems.bind(config.tiggerType,function () {
    _this_.changeStyle($(this))
})*/

1、在config配置里獲取到鼠標交互的方式，我在這里寫了"click"和"mouseover"兩種，并且考慮到用戶配置參數(shù)時可能會寫錯所以在else if 判定了一下，如果用戶寫錯了那么默認的交互方式是mouseover
2、當然也可以向我下面注釋的那樣直接綁定參數(shù)里的方法,然后你們可以自己加一些錯誤提示什么的
3、在綁定了交互方式后調(diào)用改變Tab 樣式的函數(shù)changeStyle()

我們給每個Tab節(jié)點綁定了交互事件，在事件觸發(fā)后就調(diào)用changeStyle()函數(shù)來該變Tab標簽的樣式

該變tab選中的樣式

tab.js / Tab.prototype={}

changeStyle:function (currentTab) {
    var index = currentTab.index()
    currentTab.addClass("select").siblings().removeClass("select")
    //切換效果
    if(this.config.effect === "fade"){
        this.contentItems.eq(index).fadeIn().siblings().fadeOut()
    }else{
      this.contentItems.eq(index).addClass("current").siblings().removeClass("current")
    }
    }

1、我們在調(diào)用的時候將目標節(jié)點傳參傳進來了
2、index()方法獲取當前索引，用與匹配下面的content內(nèi)容區(qū)
3、去配置參數(shù)里找有沒有配置切換效果，這里我只配置看一種淡入淡出效果，如果有的話則淡入淡出的切換，如果沒有配置切換方式，那么就是默認參數(shù)null則直接切換無效果
4、在給標簽頁addClss()添加選中狀態(tài)的同時，要將其它非選中狀態(tài)標簽頁的樣式清除

配置組件初始化時默認顯示的標簽頁
tab.js / var Tab = function (){}

//默認顯示的Tab
if(config.default<=this.tabItems.length){
    this.changeStyle(this.tabItems.eq(config.default-1))
} else {
    console.log("default 參數(shù)配置錯誤")
}

拿到參數(shù)里的default之后走一遍changeStyle()流程這樣就完成了默認標簽頁的設置
這里要注意的就是因為數(shù)組是從0開始的，但我們的習慣是從1開始，配置的時候想要第幾個標簽頁默認顯示就用第幾個，所以實際上這里選中標簽頁時要將default-1

我在配置參數(shù)里有寫，auto這個參數(shù)，本來是想寫自動切換這個功能的，但因為我在之前寫面向對象Tab標簽頁時已經(jīng)寫過了，這里寫的有點煩就不寫了，無非就是加個定時器

終于走到了最后一步，將我們寫的構造函數(shù)注冊為jquery方法
之前我們使用方法是new 一個新對象
tab.js / var Tab = function (){}

$.fn.extend({
    tab:function () {
      return new Tab(this)
    }
})

這樣子注冊一下，我們就可以按照jquery的方法去操作這個組件了
index.html