摘要：今天写一个简单的选项卡插件，这个我也是看别人博文学习实现的，然后加一些自己的理解。一实现效果虽说有点简陋，但是可以看到在文件中，引入我们写的插件后，实现选项卡切换，就只需一行代码就可以实现了。
一.实现效果估计大概两三个月没有这类的关于前端的文章了，一来是觉得自己太菜，二来也是因为自己的懒散，浑浑噩噩的消耗时间却没有收获什么成果。今天因为和一些同学的聊天，突然自己的心情很低落，有一种看不到未来在哪的感觉，所以强行让自己学习，去看js插件怎么写。今天写一个简单的选项卡插件，这个我也是看别人博文学习实现的，然后加一些自己的理解。
虽说有点简陋，但是可以看到在html文件中，引入我们写的tab.js插件后，实现选项卡切换，就只需一行代码就可以实现了。
先整体看下结构大概是怎样
//一开始当然是创建一个构造函数tab
function Tab(){
//里面只有一行代码，就是调用自身的初始化方法
this.init.apply(this,arguments);
}
//需要的属性和方法全部写在prototype里面
Tab.prototype = {
//属性
//some code
//方法
//some code
}
三.一些方法的实现
我们在这里没有使用闭包然后立即执行，所以才需要一个初始化函数将属性都初始化，在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，触发的话可以传入参数来制定，使用中括号可以解决这个问题
