前面一段时间在慕课网看组件化开发的时候有点吃力,看了《javas高级程序设计》之后感觉轻松了许多,将oop思想编程、构造函数、原型、闭包等理论知识实践起来
自己平时在工作当中为了提高效率都是直接用别人的插件,自己做的工作都是配置好参数,引入一个插件的js文件和css文件直接over了,这些提升不了编程水平,自己需要多挑战下
思考:关于tab选项卡。如果我能在给定的配置参数中自定义鼠标出发类型、默认显示的tab选项、自动播放、切换效果等,以后别人也能够只要在配置参数中做些简单的设置就好了,这是一件比较有成就感的事情代码详情地址
知识点:1)匿名函数自我执行 2)参数配置以及扩展 3)parseJSON(json转化为js字符串) 4)原型和构造函数5)jquery注册事件等
解说:组件化开发需要具备三要素:对象、配置参数、交互行为(事件)等。在tab选项卡中,它的对象是tabItems、contentItems,我们来看下html代码
再是配置参数(分为人工配置参数和默认配置参数),如果人工没有配置参数,我们就用默认配置参数
1)、参数配置和扩展
匿名函数立即执行,定义构造函数,.prototype写上,window.Tab=tab。一般来说,方法写在原型当中,原型中获取配置参数>构造函数当中扩展参数
2)事件绑定。首先是鼠标触发事件,如果配置参数的触发事件是click或者是mouseover,做一个条件判断。
切换的时候是有效果的(即要获取到effect的配置参数)
剩下两个配置参数auto和invoke(默认显示第几项)
3)初始化函数和注册成jq
这样下来:思路就清晰很多了。之前都不懂组件化开发的流程,经过一番练习,大致思路清晰了,虽然还不能凭空敲出代码,但是感觉自己进步了一些,以后多练习组件化开发,为三大框架的项目实战打下基础
完整源码组件化开发之tab选项卡
源课程地址js插件之tab选项卡开发