动手写一个jquery插件(实践)

自己实践写一个基于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 里调用Tab构造函数

<script>
$(function () {
    var tab1= new Tab('#box')
})
</script>

配置默认参数及参数获取

然后我们先配置一些默认参数

tab.js


   ```
   var Tab = function (target) {
       //保存Tab类自身
       var _this_ = this
       //保存当前Tab组件的对象
       this.target = target
       //默认配置参数
       this.config={
           "tiggerType": "mouseover", //鼠标交互方式
           "effect":null,  //切换效果,默认为无
           "default":1,    //默认展示第几个标签
           "auto":false,    //自动切换时长,若指定了时长则表示开启自动切换
       }
   }
   ```

用户(使用者)配置参数的方法
默认参数配置好以后，我们需要获取用户的配置参数，
函数传参的方式大家应该都很熟悉了，在这里我们不用传参的方式获取，我们采用设置DOM属性的方式设置参数。这种配置方法很常见，比如Element-ui
index.html
```
<div class="box" id="box1" config='{"tiggerType":"click","auto":5000}'>
    <div class="title">
        <ul class="tab-list">
            li*4
        </ul>
    </div>
    <div class="content">
        img*4
    </div>
</div>
```
在最外层的div即我们选中的DOM节点上设置了一个名为config的属性，config的值为一串JSON
这样子我们就设置了参数，那么怎么获取呢？我们写一个函数来获取
获取用户的配置参数
tab.js
```
Tab.prototype = {
    //获取用户的配置参数
    getConfig: function () {
        var config = $(this.target).attr("config")
        if(config&&config!==""){
            //将用户json格式的config转为对象格式
            return $.parseJSON(config)
        }else{
            return null
        }
    },
}
```
函数我们写在Tab.prototype{}里，这里的逻辑是：
1、attr()获取我们在DOM节点里的配置参数
2、如果有的话就将我们获取到的值转换为js对象，没有的话就返回null
这里要注意的是我们的宿主DOM，即我们在调用 new Tab('#box1')传入的对象要用jquery包裹一下，这样才能正常获取到该节点，因为我传入的仅仅是宿主DOM的ID，当然也可以在调用时直接将这个ID包装一下，在这里就可以省去这一步而直接使用传过来的对象。
index.html
```
<script>
$(function () {
    //var tab1= new Tab('#box')
    //var tab1= new Tab($('#box')) //调用时将ID包裹
})
</script>
```
参数处理
在解决了用户参数配置的问题后，我们就要处理参数了
tab.js
```
var Tab = function (target) {
    //如果存在用户的参数
    if(this.getConfig()){
        $.extend(this.config,this.getConfig())
    }
}
```
这里用到$.exten的()方法,如果有用户的配置参数则会追加修改this.config，如果用户没有配置参数，那么程序就会使用我们的默认参数

绑定事件

获取具体节点
tab.js / var Tab = function (){}

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

为每个Tab标签页绑定节点
tab.js / var Tab = function (){}

var config = this.config
//绑定鼠标交互事件
if(config.tiggerType==="click"){
    this.tabItems.bind("click",function () {
        //这里的this指向每个每个具体的节点
        _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'两种，并且考虑到用户配置参数时可能会写错所以在else if 判定了一下，如果用户写错了那么默认的交互方式是mouseover
2、当然也可以向我下面注释的那样直接绑定参数里的方法,然后你们可以自己加一些错误提示什么的
3、在绑定了交互方式后调用改变Tab 样式的函数changeStyle()

改变tab标签页样式

我们给每个Tab节点绑定了交互事件，在事件触发后就调用changeStyle()函数来该变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、我们在调用的时候将目标节点传参传进来了
2、index()方法获取当前索引，用与匹配下面的content内容区
3、去配置参数里找有没有配置切换效果，这里我只配置看一种淡入淡出效果，如果有的话则淡入淡出的切换，如果没有配置切换方式，那么就是默认参数null则直接切换无效果
4、在给标签页addClss()添加选中状态的同时，要将其它非选中状态标签页的样式清除

默认显示的标签页

配置组件初始化时默认显示的标签页
tab.js / var Tab = function (){}
```
//默认显示的Tab
if(config.default<=this.tabItems.length){
    this.changeStyle(this.tabItems.eq(config.default-1))
} else {
    console.log("default 参数配置错误")
}
```
拿到参数里的default之后走一遍changeStyle()流程这样就完成了默认标签页的设置
这里要注意的就是因为数组是从0开始的，但我们的习惯是从1开始，配置的时候想要第几个标签页默认显示就用第几个，所以实际上这里选中标签页时要将default-1

自动切换功能

我在配置参数里有写，auto这个参数，本来是想写自动切换这个功能的，但因为我在之前写面向对象Tab标签页时已经写过了，这里写的有点烦就不写了，无非就是加个定时器

注册为jquery方法

终于走到了最后一步，将我们写的构造函数注册为jquery方法
之前我们使用方法是new 一个新对象
tab.js / var Tab = function (){}

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

这样子注册一下，我们就可以按照jquery的方法去操作这个组件了
index.html

<script>
$(function () {
    $('#box1').tab()
    $('#box2').tab()
})
</script>