摘要：自己實(shí)踐寫(xiě)一個(gè)基于的插件面向?qū)ο蟮膶?xiě)法這里我就不寫(xiě)和了，主要就是分析插件代碼代碼我上傳到上了，如果你們想看結(jié)構(gòu)及樣式的話，可以去把源碼下來(lái)看看地址地址目錄結(jié)構(gòu)以及基本結(jié)構(gòu)搭建首先搭建一個(gè)插件的框架里調(diào)用構(gòu)造函數(shù)配置默認(rèn)參數(shù)及參數(shù)獲取然后我們

自己實(shí)踐寫(xiě)一個(gè)基于jquery的tab插件,面向?qū)ο蟮膶?xiě)法
這里我就不寫(xiě)index.html,和index.css了，主要就是分析插件代碼tab.js
代碼我上傳到github上了，如果你們想看DOM結(jié)構(gòu)及CSS樣式的話，可以去把源碼下來(lái)看看
github地址：github地址
目錄結(jié)構(gòu)：index.html,index.css以及tab.js

首先搭建一個(gè)jquery插件的框架
tab.js

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

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

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

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

tab.js

   ```
   var Tab = function (target) {
       //保存Tab類(lèi)自身
       var _this_ = this
       //保存當(dāng)前Tab組件的對(duì)象
       this.target = target
       //默認(rèn)配置參數(shù)
       this.config={
           "tiggerType": "mouseover", //鼠標(biāo)交互方式
           "effect":null,  //切換效果,默認(rèn)為無(wú)
           "default":1,    //默認(rèn)展示第幾個(gè)標(biāo)簽
           "auto":false,    //自動(dòng)切換時(shí)長(zhǎng),若指定了時(shí)長(zhǎng)則表示開(kāi)啟自動(dòng)切換
       }
   }
   ```

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

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

index.html

    

        

            li*4
        
    
    

        img*4
    

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

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

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

函數(shù)我們寫(xiě)在Tab.prototype{}里，這里的邏輯是：
1、attr()獲取我們?cè)贒OM節(jié)點(diǎn)里的配置參數(shù)
2、如果有的話就將我們獲取到的值轉(zhuǎn)換為js對(duì)象，沒(méi)有的話就返回null
這里要注意的是我們的宿主DOM，即我們?cè)谡{(diào)用 new Tab("#box1")傳入的對(duì)象要用jquery包裹一下，這樣才能正常獲取到該節(jié)點(diǎn)，因?yàn)槲覀魅氲膬H僅是宿主DOM的ID，當(dāng)然也可以在調(diào)用時(shí)直接將這個(gè)ID包裝一下，在這里就可以省去這一步而直接使用傳過(guò)來(lái)的對(duì)象。
index.html

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

tab.js

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

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

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

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

為每個(gè)Tab標(biāo)簽頁(yè)綁定節(jié)點(diǎn)
tab.js / var Tab = function (){}

var config = this.config
//綁定鼠標(biāo)交互事件
if(config.tiggerType==="click"){
    this.tabItems.bind("click",function () {
        //這里的this指向每個(gè)每個(gè)具體的節(jié)點(diǎn)
        _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配置里獲取到鼠標(biāo)交互的方式，我在這里寫(xiě)了"click"和"mouseover"兩種，并且考慮到用戶(hù)配置參數(shù)時(shí)可能會(huì)寫(xiě)錯(cuò)所以在else if 判定了一下，如果用戶(hù)寫(xiě)錯(cuò)了那么默認(rèn)的交互方式是mouseover
2、當(dāng)然也可以向我下面注釋的那樣直接綁定參數(shù)里的方法,然后你們可以自己加一些錯(cuò)誤提示什么的
3、在綁定了交互方式后調(diào)用改變Tab 樣式的函數(shù)changeStyle()

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

該變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、我們?cè)谡{(diào)用的時(shí)候?qū)⒛繕?biāo)節(jié)點(diǎn)傳參傳進(jìn)來(lái)了
2、index()方法獲取當(dāng)前索引，用與匹配下面的content內(nèi)容區(qū)
3、去配置參數(shù)里找有沒(méi)有配置切換效果，這里我只配置看一種淡入淡出效果，如果有的話則淡入淡出的切換，如果沒(méi)有配置切換方式，那么就是默認(rèn)參數(shù)null則直接切換無(wú)效果
4、在給標(biāo)簽頁(yè)addClss()添加選中狀態(tài)的同時(shí)，要將其它非選中狀態(tài)標(biāo)簽頁(yè)的樣式清除

配置組件初始化時(shí)默認(rèn)顯示的標(biāo)簽頁(yè)
tab.js / var Tab = function (){}

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

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

我在配置參數(shù)里有寫(xiě)，auto這個(gè)參數(shù)，本來(lái)是想寫(xiě)自動(dòng)切換這個(gè)功能的，但因?yàn)槲以谥皩?xiě)面向?qū)ο骉ab標(biāo)簽頁(yè)時(shí)已經(jīng)寫(xiě)過(guò)了，這里寫(xiě)的有點(diǎn)煩就不寫(xiě)了，無(wú)非就是加個(gè)定時(shí)器

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

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

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