一个简单的选项卡js插件

估计大概两三个月没有这类的关于前端的文章了，一来是以为本身太菜，二来也是由于本身的懒散，浑浑噩噩的消耗时间却没有收获什么成果。今天由于和一些同窗的聊天，忽然本身的心情很低落，有一种看不到将来在哪的感受，因此强行让本身学习，去看js插件怎么写。今天写一个简单的选项卡插件，这个我也是看别人博文学习实现的，而后加一些本身的理解。

一.实现效果

虽然说有点简陋，可是能够看到在html文件中，引入咱们写的tab.js插件后，实现选项卡切换，就只需一行代码就能够实现了。

二.tab.js结构

先总体看下结构大概是怎样

//一开始固然是建立一个构造函数tab
function Tab(){
  //里面只有一行代码，就是调用自身的初始化方法
  this.init.apply(this,arguments);
}

//须要的属性和方法所有写在prototype里面
Tab.prototype = {
  //属性
  //some code
  //方法
  //some code
}

三.一些方法的实现

1. 咱们在这里没有使用闭包而后当即执行，因此才须要一个初始化函数将属性都初始化，在init中：

init:function(ela,elb,paramObj){
  //通常在插件中都会有个配置对象，而且有默认值
  this.defaultOptions = {
    curClass:'current',
    type:'mouseover',
    delay:150
  }
  //而后咱们会去检测用户有没有传入配置参数，有的话就要使用用户的配置，这里使用到一个extend方法
  this.options = this.extend(this.defaultOptions, paramObj || {})
}

extend实际是一个对象拓展方法，将b对象的属性覆盖到a对象中，在JQ里直接写好了这种方法，但js里没有，须要咱们本身去模拟，咱们将这个方法写在init外面

extend:function(a,b){
  for(var i in b){
    //这个是检测for循环到的属性是否是b自身的
    if(b.hasOwnProperty(i)){
      a[i] = b[i]
    }
  }
  return a;
}

后面init里就是一些基本的属性，好比获取导航栏的DOM，内容块的DOM，以及他们的子元素还有子元素的个数，后面遍历会用到，具体可在文章附的源码里去看。最后咱们要在init中给每一个导航绑定事件，一个是触发，一个是取消，取消天然就是onmouseout，触发的话能够传入参数来制定，使用中括号能够解决这个问题

for(var i=0;i<this.tLen;i++){
    this.triggerItem[i]['on' + this.options.type] = this.change(i)
    this.triggerItem[i].onmouseout = function(){
      clearTime(self.timer);
      self.timer = null;
    }
}

1. 添加类名和消除类名方法
   实现这种切换效果通常采用的方法都是使用类名的添加和消除来实现的，那么对类名的操做方法就很重要了

addClass:function(el,name){
  var arr = [],
       str = el.className,
       arr = str.split(/\s+/),
       len = arr.length,
       name = this.trim(name),
  for(var i=0;i<len;i++){
    if(arr[i] === name){
      //已存在直接返回
      return;
    }
   }
  el.className += ' ' + name;
  el = null; 
}

消除类名方法相似，主要是用到了一个splice方法。

1. change选项卡切换函数
   这个就是给每一个导航栏绑定的函数

这里也是使用了一个闭包，每次都返回一个新函数

change:function(index){
  var self = this;
  return function(){
    self.timer = setTimeout(function(){
        for(var i=0;i<self.tLen;i++){
          if(i == index){
            self.addClass(self.triggerItem[index],self.options.curClass);
            self.listItem[i].style.display = 'block';
          }else{
            self.removeClass(self.triggerItem[i],self.options.curClass);
            self.listItem[i].style.display = 'none';
          }
        }
      },self.options.delay)
  }
}

四.总结

其实这个是很是简单的一个封装，刚开始学习前端的确定是都作过这种切换效果的，而这个封装就是利用对象原型链的继承，来达到一些方法的复用。其中主要的知识点：
1.每新建一个对象都须要init初始化
2.将须要的属性和方法写在prototype中
3.利用闭包去给dom绑定事件
4.类名的处理要注意细节，好比检测是否已存在，是否有空格等
5.对于一些事件要作延迟处理，事件完成后要注意清理现场

五.最后再说两句

这篇文章实际上没有什么有价值的内容，但我但愿它对我而言是一个学习开始，就像刚刚开始学习前端的时候同样，那种纯粹的技术的渴望。还有几个月就要毕业了，才意识到本身的大学真的就这么过去了。就像当时读大一大二的时候，回家和高中同窗聚会也才意识到高中真的就这么过去了，哪怕那我的站在面前，你也感受和当初的他不一样了。可没办法这就是成长。当时还想着要是能重来，必定要好好读书，必定要追到同桌妹子。如今大学要过去了，遗憾固然是有，但不会再有那种想重来的想法了，由于哪怕重来也必定差很少，真正重要的是本身心智的变化。不重来照样能够好好读书，不重来照样能够去追求本身喜欢的人，何须把本身限定在一种环境，一种身份上呢。尽管这段时间以来受刺激不少，心情有点低落，但仍是要好好努力，好好生活。就像之前一直觉得本身写文章确定没人看的，结果偶尔会有人给你点赞，有人给你回复，也许只是寥寥数语，但对我而言确实莫大的鼓励。但愿新的一年本身能不断成长，愈来愈强大！

源码地址：https://coding.net/u/ly550275...