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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
JavaScript 监听textarea中按键事件
Oct 08 Javascript
JScript 脚本实现文件下载 一般用于下载木马
Oct 29 Javascript
网页中返回顶部代码(多种方法)另附注释说明
Apr 24 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
微信小程序image图片加载完成监听
Aug 31 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 jQuery
React 高阶组件HOC用法归纳
Jun 13 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 UTF8中文字符截断函数代码
2012/09/11 PHP
header导出Excel应用示例
2014/01/24 PHP
jquery下为Event handler传递动态参数的代码
2011/01/06 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
Jquery easyui开启行编辑模式增删改操作
2016/01/14 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
2016/05/10 Javascript
JS获取input file绝对路径的方法(推荐)
2016/08/02 Javascript
jQuery增加、删除及修改select option的方法
2016/08/19 Javascript
JS判断来路是否是百度等搜索索引进行弹窗或自动跳转的实现代码
2016/10/09 Javascript
通过Ajax使用FormData对象无刷新上传文件方法
2016/12/08 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
2017/01/19 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
javascript如何实现create方法
2019/11/04 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
2020/05/16 Javascript
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python+Socket实现基于TCP协议的客户与服务端中文自动回复聊天功能示例
2017/08/31 Python
scrapy爬虫实例分享
2017/12/28 Python
Django2.1.3 中间件使用详解
2018/11/26 Python
详解python实现交叉验证法与留出法
2019/07/11 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
高二美术教学反思
2014/01/14 职场文书
计算机个人求职信范例
2014/01/24 职场文书
简历中的自我评价怎么写
2014/01/29 职场文书
工程项目经理任命书
2014/06/05 职场文书
学校工作推荐信范文
2014/07/11 职场文书
投标人法定代表人授权委托书格式
2014/09/28 职场文书
优秀工作者事迹材料
2014/12/26 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
Java异常处理try catch的基本用法
2021/12/06 Java/Android
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python