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 相关文章推荐
autoPlay 基于jquery的图片自动播放效果
Dec 07 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
js获取及修改网页背景色和字体色的方法
Dec 29 Javascript
实例讲解jquery与json的结合
Jan 07 Javascript
10个JavaScript中易犯小错误
Feb 14 Javascript
JavaScript图像延迟加载库Echo.js
Apr 05 Javascript
JS隐藏号码中间4位代码实例
Apr 09 Javascript
Vue 2.0 侦听器 watch属性代码详解
Jun 19 Javascript
小程序实现分类页
Jul 12 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 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下载文件的代码示例
2012/06/29 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
php array_udiff_assoc 计算两个数组的差集实例
2016/11/12 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
使用Zookeeper分布式部署PHP应用程序
2019/03/15 PHP
JavaScript类和继承 constructor属性
2010/03/04 Javascript
基于jQuery的message插件实现右下角弹出消息框
2011/01/11 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
JavaScript中的对象的extensible属性介绍
2014/12/30 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
vue-devtools的安装步骤
2018/04/23 Javascript
深入理解JavaScript的async/await
2018/08/05 Javascript
解决eclipse中没有js代码提示的问题
2018/10/10 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
2019/01/18 jQuery
javascript实现摄像头拍照预览
2019/09/30 Javascript
JavaScript实现简单动态表格
2020/12/02 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python实现的质因式分解算法示例
2018/05/03 Python
Python异常处理操作实例详解
2018/08/28 Python
Python 给某个文件名添加时间戳的方法
2018/10/16 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
python爬虫 爬取超清壁纸代码实例
2019/08/16 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
介绍一下sql server的安全性
2014/08/10 面试题
自愿离婚协议书范本
2014/09/13 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
2015年暑期社会实践方案
2015/07/14 职场文书
python爬虫之爬取笔趣阁小说
2021/04/22 Python
如何在CSS中绘制曲线图形及展示动画
2021/05/24 HTML / CSS
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
vue动态绑定style样式
2022/04/20 Vue.js
Hive日期格式转换方法总结
2022/06/25 数据库