动手写一个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>

配置默认参数及参数获取

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

   tab.js

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

2. 用户(使用者)配置参数的方法

   默认参数配置好以后，我们需要获取用户的配置参数，
   函数传参的方式大家应该都很熟悉了，在这里我们不用传参的方式获取，我们采用设置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
   这样子我们就设置了参数，那么怎么获取呢？我们写一个函数来获取

3. 获取用户的配置参数
   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>
   

4. 参数处理
   在解决了用户参数配置的问题后，我们就要处理参数了

   tab.js

   var Tab = function (target) {
       //如果存在用户的参数
       if(this.getConfig()){
           $.extend(this.config,this.getConfig())
       }
   }

   这里用到$.exten的()方法,如果有用户的配置参数则会追加修改this.config，如果用户没有配置参数，那么程序就会使用我们的默认参数

绑定事件

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

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

2. 为每个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标签的样式

1. 该变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()添加选中状态的同时，要将其它非选中状态标签页的样式清除

默认显示的标签页

1. 配置组件初始化时默认显示的标签页
   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>