您好,欢迎访问一九零五行业门户网

Javascript前端UI框架Kit使用指南之kitjs的对话框组件_javascript技巧

kit作为一个ui库,我并没有打算让大家都来学习我的kit的core,背熟我的api,这种跟风的学习方式一点意义都没有,今天jquery热,大家都是学jq,明天seajs火了,大家都去炒seajs,所以我在kitjs里面,专门为jq的用户准备了一个语法糖(suger.js),完全模拟jq的api,除了实现,接口都一样,也方便大家直接拿来主义的改造kit的组件。当然,作为一个纯技术fan来说,深入理解一门技术是如何实现的,远比拿来主义更有趣的多^_^。当然了,如果你出于kpi考虑,或者老板的老板的项目奖金,直接拿来主义抄袭kit的组件代码,完成你的kpi,我也不介意这样的行为,只要您喝水不忘挖井人,在和同事吹水的时候,也能宣传一个kitjs,我就很感激您了。同时,kit也是一个很年轻的库,出于不断的发展之中,有一些bug以及浏览器兼容问题,在所难免,我一个人也精力有限,在这个前端战火纷飞的年代,欢迎更多志同道合的基友一起把他搞大,共同进步。
同时,今天发布了一个kitjs的对话框组件,demo地址为http://xueduany.github.com/kitjs/kitjs/demo/dialog/demo.html
(一)kit目录格式
言归正传,在kitjs里,kit.js是作为核心的core文件的存在,他包含了一些最常用的dom以及object,继承的操作,同级目录下按照功能的划分扩展了一批string.js,math.js等等都是为了实现特定方向功能的扩展。每一个独立的js文件都包含一个class的构造器,以及一个全局对象的实例,
以kit.js为例,包含了$kit类,以及$kit类的实例$kit(以$开头是为了避免与常用的变量冲突),
其他各类,都以link的方式,挂在$kit,以及$kit实例实例上,如math.js,包含了$kit.math类,以及$kit.math实例,这样保证全局范围里只有$kit和$kit两个污染。同时,在kit.js,我们定义了一个命名空间叫做$kit.ui,在物理目录下,以kit.js同级的widget目录,一字排开,多个首字母大写的目录
widget目录下所有目录都是kitjs的组件目录,每个独立js文件只包含一个独立组件的class构造器(非实例),同时可以兼容commonjs的module模式(可以符合commonjs的modules/1.1 规范,以及amd方式改造,具体改造方式后面会以后会详细提及)
(二)kit组件默认代码模板,注释符合jsdoc规范
我们以对话框组件举例,每个组件都类似如下
首先是jsdoc的注释,@class申明是一个什么类,@require xxx.js,申明依赖哪些组件
(三)构造器以及初始化方法
每个类都是标准的function(config){}的方式定义个构造器,这里需要注意的是,每个kitjs组件的构造器默认预留一个config参数,作为个性化配置的输入,
同时在类的构造器,有个一个静态成员,defaultconfig对象,用来存放kitjs组件的默认配置
在使用kitjs的组件,首先是需要通过new instance的方式new $kit.ui.dialog.yesorno,初始化一个新的实例对象出来,这是仅仅是初始化了一个js的组件对象,还没有html,需要执行init方法,创建html,加入doc中,等于给灵魂浇上血肉^_^。
可能有同学会问,为什么不把init方法直接放在构造器里面,而要另外单独放出来?
1是因为在继承时候需要实例化父类,当子类继承于父类的时候,会设置子类的prototype对象为父类的new instance新的实例对象,如果在构造器里面放了init的初始化方法,会导致父类的html被直接执行,生成垃圾代码,
2是因为考虑懒加载的情况,需要html代码在恰当的时间执行,而不是一开始初始化时立即执行
所以使用kitjs组件的默认方式是
实例化之后,执行init方法(init方法会返回当前组件对象,有return代码7)
上图可以发现,在dialog中所有api method都是挂在prototype上,通过原型扩展的方式实现继承以及传递给实例对象
观察$kit.ui.dialog.yesorno组件的构造器代码,
(四)kitjs的继承
他通过$kit.inherit方法申明了与$kit.ui.dialog对象的继承关系,这里会有同学要问,为什么要在构造器里面继承,而不是直接写在外面?
原因是:
1.kitjs是一个基于prototype维护继承关系的
2.要使用kitjs的组件,必须要实例化该组件对象,每个组件都是通过new instance的方式,通过构造器创建的
所以我把继承关系的执行放在代码的构造器中,这样在实例化一个新的组件时,就会顺着当前组件的构造器的继承方法,逐级去继承到他父类的成员以及方法。
当子类需要修改父类的方法时,只需要在子类的prototype里从定义一个同名的method即可覆盖父类的继承方法。
在命名上,kitjs遵循,子类延续父类的类名作为namespace,一直链下去,如上图的$kit.ui.dialog,$kit.ui.dialog.yesorno
kitjs的继承实现也很简单
实例化一个父类对象,将父类的实例所有成员copy到子类的原型上,然后重置子类的原型的构造器为子类构造器,再给子类构造器挂一个link,指向父类,通过$kit.inherit方法,在子类$kit.ui.dialog.yesorno实例化的过程中,就可以继承父类$kit.ui.dialog的所有子类不存在的成员,实现类似静态语言的继承
(五)config参数,html与css的耦合拆解/换肤?
kit的组件构造器习惯传入一个 map类型的参数,从来个性化组件,在kit组件初始化的时候,会自动用用户提交的config参数覆盖默认的defaultconfig后开始初始化。
对于任何一个组件来说,摆脱不了是html结构的变化,以及css样式的改变
kit把这种耦合分解在config的参数配置里面,
首先是使用html模板技术,kit提倡使用$kit.newhtml方法直接根绝html string,生成html dom插入文档流,
所以我们抽取组件的大概html内容,封装成html string模板,存放在组件的defaultconfig里面,如果用户需要修改html模板,自己在初始化的时候使用自定义的config,覆盖默认的defaultconfig里面的模板字段即可,
在html模板与css的耦合分解上,kit用了一个技巧就是把classname用js模板的方式,分解开来
通过在init方法中的$kit.tpl 将config 中的html以${xxx}的方式对应config中的xxx做替换
同时所有的样式都在css里面设置,
如果有多套皮肤需要切换,可以选择在初始化时候,通过config指定${cls}对应的实际classname来达到修改模板的classname,来达到换肤的效果。
(六)小结
基本上,透过对$kit.ui.dialog.yesorno组件的代码分析,我们对kitjs的组件实现结构有了一个大概的了解。其实设计一个页面组件并不难,但是设计一个能适应各种要求,在各种场合下,可以很快速的变形,并适应开发,是一个很难的要求。kit通过对html模板以及css的拆分,自定义config参数与defaultconfig的配合,子类通过继承的方式获得父类的属性以及方法,同时根据不同的业务需要重构相关代码,基本上可以灵活的满足各种层次,各种环境下的业务ui组件需求。
kitjs包括了基本库和ui库,
基本库: 选择器功能,dom操作功能,动画功能,增强dom事件,增加hashtree数据结构,io功能,本地存储功能,多线程,range等等
还有一个模拟jquery操作格式的suger.js
ui库包括了:增强的form元素,弹出层,媒体播放器,验证框架,瀑布流,联动,幻灯片,日历,上传组件,模板引擎等等
其它类似信息

推荐信息