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


Posted in Javascript onNovember 28, 2014

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

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

(一)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目录,一字排开,多个首字母大写的目录

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

widget目录下所有目录都是kitjs的组件目录,每个独立js文件只包含一个独立组件的class构造器(非实例),同时可以兼容commonJs的module模式(可以符合CommonJs的Modules/1.1 规范,以及AMD方式改造,具体改造方式后面会以后会详细提及)

(二)Kit组件默认代码模板,注释符合jsdoc规范

我们以对话框组件举例,每个组件都类似如下

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

首先是jsdoc的注释,@class申明是一个什么类,@require xxx.js,申明依赖哪些组件

(三)构造器以及初始化方法

每个类都是标准的function(config){}的方式定义个构造器,这里需要注意的是,每个kitjs组件的构造器默认预留一个config参数,作为个性化配置的输入,

同时在类的构造器,有个一个静态成员,defaultConfig对象,用来存放kitjs组件的默认配置

在使用kitjs的组件,首先是需要通过new Instance的方式new $kit.ui.Dialog.YesOrNo,初始化一个新的实例对象出来,这是仅仅是初始化了一个js的组件对象,还没有HTML,需要执行init方法,创建HTML,加入doc中,等于给灵魂浇上血肉^_^。

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

可能有同学会问,为什么不把init方法直接放在构造器里面,而要另外单独放出来?

1是因为在继承时候需要实例化父类,当子类继承于父类的时候,会设置子类的prototype对象为父类的new Instance新的实例对象,如果在构造器里面放了init的初始化方法,会导致父类的HTML被直接执行,生成垃圾代码,

2是因为考虑懒加载的情况,需要HTML代码在恰当的时间执行,而不是一开始初始化时立即执行

所以使用kitjs组件的默认方式是

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

实例化之后,执行init方法(init方法会返回当前组件对象,有return代码7)

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

上图可以发现,在dialog中所有API method都是挂在prototype上,通过原型扩展的方式实现继承以及传递给实例对象

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

观察$kit.ui.Dialog.YesOrNo组件的构造器代码,

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

(四)KitJs的继承

他通过$kit.inherit方法申明了与$kit.ui.Dialog对象的继承关系,这里会有同学要问,为什么要在构造器里面继承,而不是直接写在外面?

原因是:

1.kitjs是一个基于prototype维护继承关系的

2.要使用kitjs的组件,必须要实例化该组件对象,每个组件都是通过new Instance的方式,通过构造器创建的

所以我把继承关系的执行放在代码的构造器中,这样在实例化一个新的组件时,就会顺着当前组件的构造器的继承方法,逐级去继承到他父类的成员以及方法。

当子类需要修改父类的方法时,只需要在子类的prototype里从定义一个同名的method即可覆盖父类的继承方法。

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

在命名上,kitjs遵循,子类延续父类的类名作为Namespace,一直链下去,如上图的$kit.ui.Dialog,$kit.ui.Dialog.YesOrNo

kitjs的继承实现也很简单

Javascript前端UI框架Kit使用指南之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模板的方式,分解开来

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

通过在init方法中的$kit.tpl 将config 中的html以${xxx}的方式对应config中的xxx做替换

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

同时所有的样式都在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元素,弹出层,媒体播放器,验证框架,瀑布流,联动,幻灯片,日历,上传组件,模板引擎等等

Javascript 相关文章推荐
把textarea中字符串里含有的回车换行替换成<br>的javascript代码
Apr 20 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
不提示直接关闭网页窗口的JS示例代码
Dec 17 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
Dec 01 Javascript
JS中静态页面实现微信分享功能
Feb 06 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
react native带索引的城市列表组件的实例代码
Aug 08 Javascript
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
Nov 28 #Javascript
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 #Javascript
开源的javascript项目Kissy介绍
Nov 28 #Javascript
对比分析json及XML
Nov 28 #Javascript
jquery 操作css样式、位置、尺寸方法汇总
Nov 28 #Javascript
javascript基本类型详解
Nov 28 #Javascript
javascript中数组array及string的方法总结
Nov 28 #Javascript
You might like
PHP实现MVC开发得最简单的方法――模型
2007/04/10 PHP
CentOS 6.3下安装PHP xcache扩展模块笔记
2014/09/10 PHP
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
2020/07/21 PHP
JQUERY 对象与DOM对象之两者相互间的转换
2009/04/27 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
初窥JQuery(一)jquery选择符 必备知识点
2010/11/25 Javascript
浅谈页面装载js及性能分析方法
2014/12/09 Javascript
纯javascript实现简单下拉刷新功能
2015/03/13 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
2016/11/25 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
Javascript基础回顾之(二) js作用域
2017/01/31 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
基于Vue实现可以拖拽的树形表格实例详解
2018/10/18 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
将Python代码嵌入C++程序进行编写的实例
2015/07/31 Python
python绘制条形图方法代码详解
2017/12/19 Python
python的numpy模块安装不成功简单解决方法总结
2017/12/23 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
编写多线程Python服务器 最适合基础
2018/09/14 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
python Zmail模块简介与使用示例
2020/12/19 Python
python切片作为占位符使用实例讲解
2021/02/17 Python
python 递归相关知识总结
2021/03/03 Python
德国拖鞋网站:German Slippers
2019/11/08 全球购物
校园创业策划书
2014/01/14 职场文书
十佳护士先进事迹
2014/05/08 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
邀请函格式范文
2015/02/02 职场文书
中学教师个人总结
2015/02/10 职场文书
员工拾金不昧表扬稿
2015/05/05 职场文书
借条格式范本
2015/05/25 职场文书
格林童话读书笔记
2015/06/30 职场文书
win server2012 r2服务器共享文件夹如何设置
2022/06/21 Servers