组件化开发之tab选项卡

前面一段时间在慕课网看组件化开发的时候有点吃力，看了《javas高级程序设计》之后感觉轻松了许多，将oop思想编程、构造函数、原型、闭包等理论知识实践起来

自己平时在工作当中为了提高效率都是直接用别人的插件，自己做的工作都是配置好参数，引入一个插件的js文件和css文件直接over了，这些提升不了编程水平，自己需要多挑战下

思考：关于tab选项卡。如果我能在给定的配置参数中自定义鼠标出发类型、默认显示的tab选项、自动播放、切换效果等，以后别人也能够只要在配置参数中做些简单的设置就好了，这是一件比较有成就感的事情代码详情地址

知识点：1）匿名函数自我执行  2）参数配置以及扩展 3）parseJSON(json转化为js字符串) 4）原型和构造函数5）jquery注册事件等

组件化化开发之tab选项卡架构图

解说:组件化开发需要具备三要素：对象、配置参数、交互行为（事件）等。在tab选项卡中，它的对象是tabItems、contentItems，我们来看下html代码

再是配置参数（分为人工配置参数和默认配置参数），如果人工没有配置参数，我们就用默认配置参数

各配置参数的解释。因为是为了测试，每个配置参数只有两个选项。比如鼠标触发类型是click和mouseover，切换效果为default（没有效果）和fade（淡入淡出的效果），invoke表示默认显示第几项，auto表示是否为自动播放（设置时间表示自动播放，false为不播放）

1）、参数配置和扩展

匿名函数立即执行，定义构造函数，.prototype写上，window.Tab=tab。一般来说，方法写在原型当中，原型中获取配置参数>构造函数当中扩展参数

在原型中获取人工配置参数 构造函数中扩展参数

2）事件绑定。首先是鼠标触发事件，如果配置参数的触发事件是click或者是mouseover，做一个条件判断。

获取对象tabItems和相对应的内容contentItems 条件判断，条用invoke方法（原型中）

切换的时候是有效果的（即要获取到effect的配置参数）

剩下两个配置参数auto和invoke（默认显示第几项）

写在构造函数中 原型中autoplay函数，注意获取个数那里可以用size（）或者是length（不加括号）

3）初始化函数和注册成jq

这样下来：思路就清晰很多了。之前都不懂组件化开发的流程，经过一番练习，大致思路清晰了，虽然还不能凭空敲出代码，但是感觉自己进步了一些，以后多练习组件化开发，为三大框架的项目实战打下基础

完整源码组件化开发之tab选项卡

源课程地址js插件之tab选项卡开发