设计原则
OO思想
参考传统windows控件的设计体系,以面向对象方式组织控件结构;
jquery插件风格
控件库同时还挂靠在jquery插件上,使用者可以通过jquery插件方式创建控件。该方式参考了bootstrap的插件编码方式;
函数式编程
学习jquery的方法编写方式,每个方法执行完均返回操作的对象,实现链式编程。
参考
- W2UI,基于Jquery的data-driven 的javascriptUI库
- kitJs,国人开发的javascript ui库
- Aralejs ,淘宝前端架构师玉伯编写的前端框架
- AMD规范
- requirejs
- Less,动态样式编译语言
术语
ADM规范
异步模块定义规范,主要用于浏览器的javascript脚本加载。代表:RequireJS;
UI控件
通过界面抽象出的基本的控件,例如button、toolbar、video控件等等,这些控件可以在项目中大量复用,也可以在其他项目前端中使用,与业务逻辑和界面本身没有耦合。
组合控件
组合控件本质上也是控件,它是为了方便业务逻辑使用而定义的控件,一般由一些基本控件集合形成,比如界面中需要一组video控件——个数根据界面大小配置——那么实现一个组合控件,方便业务逻辑的控制器调用控制各个控件。
组合控件的复用性没有UI控件高,只在相似的使用环境中可以复用。但组合控件的实现,可以简化业务逻辑控制器的逻辑,使控制器的逻辑更加单一——就是处理业务逻辑,耦合各个控件来实现交互。
模板
控件内置的HTML结构表现形式,用html模板来体现。 为了适应可扩展性,控件的模板可以自定义。配合render方法完成相同行为特殊表现的使用场景。
Less
动态样式编译语言。
控件版本
发布版本
控件的对外版本号简写。如:1.0,可通过utils.version读取。
编译版本
控件库的内部编译打包版本号。指定日期,如:1.0-20140422,可通过utils.buildVersion读取。
控件库依赖
Jquery
RequireJs
模块加载器。
BootStrap
UI样式库。
继承关系
event对象
事件对象,包含on、off、trigger方法,提供事件处理能力。
baseControl
控件的基类,提供控件的公共属性和方法。
uniqId
控件唯一ID,内部识别用,uuid。控件实例化后会加入到utils.controls全局控件集合,可以通过uniqId查找控件。 控件在renderTo时,可以通过在dom节点上添加data-uniqId数据属性,保存该属性,建立dom与控件对象的对应关系。
dom
dom节点类型,保存控件的容器。
renderTo
方法签名:renderTo(dom); 把dom参数保存到this.dom属性,渲染到dom参数指定的dom节点上。一般调用方法示例:new button(configs).renderTo($("btn"));
render
renderTo内部调用方法,用于实际的渲染; 在控件renderTo后,也可以通过调用该方法刷新UI;
utils
提供控件的公共方法和属性。
utils.controls
所有控件在创建时都会被添加到该集合。
生命周期
new
通过new创建控件实例。
init
控件基类会在构造完对象后调用init方法。
render
通过render,渲染到dom文档流;
destroy
外部调用destroy方法,处理一些销毁工作。 所有控件的destroy方法会在window.unload事件内全部被调用一次,防止内存泄露。
事件机制
所有控件均混合event对象,获取事件处理能力; 每个控件有各自的事件侦听器集合; 注意区分控件的自定义事件和控件对应的dom节点的事件; Event对象包含三个方法:
on(event,callback)
调用者通过该方法添加事件侦听方法。语法:btn.on(“click”,function(){});
off(event,callback)
取消订阅。
trigger(event[,data])
触发事件。一般控件内部调用。
控件皮肤
控件的主题由样式表控制; 不同的样式表决定控件的不同主题; 不同主题下的样式文件包含的样式名一一对应,只是值不一样,比如,在blue.css里有一个class : .title{font-color:blue;} 在red.css里,它的样式时这样: .title{font-color:red;} 控件库只需要提供多套样式表,在使用控件库的页面上根据主题配置,导入对应的样式表即实现主题切换。 使用Less管理css代码。
使用方法
导入控件库
- 把控件库的相关脚本放入调用工程的某个文件夹下;
- 添加相关依赖库;
- 在require.js的config方法添加需要的paths参数controls,指向控件库的所在目录;
- 此时,可以在调用页面通过requirejs依赖对应的控件脚本,调用实现;
一般调用方法
Jquery式调用方法
打包部署
目前未考虑控件的打包发布工作范围及步骤。预计主要的范围是: js文件打包; css文件打包; 需要考虑打包后模块加载依赖的路径问题(统一考虑)。 目前暂时的做法是:直接把控件的源码(js、css)导入到使用环境。
