一种前端控件库设计框架

1,626 阅读4分钟

设计原则

OO思想

参考传统windows控件的设计体系,以面向对象方式组织控件结构;

jquery插件风格

控件库同时还挂靠在jquery插件上,使用者可以通过jquery插件方式创建控件。该方式参考了bootstrap的插件编码方式;

函数式编程

学习jquery的方法编写方式,每个方法执行完均返回操作的对象,实现链式编程。

参考

  1. W2UI,基于Jquery的data-driven 的javascriptUI库
  2. kitJs,国人开发的javascript ui库
  3. Aralejs ,淘宝前端架构师玉伯编写的前端框架
  4. AMD规范
  5. requirejs
  6. 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代码。

使用方法

导入控件库

  1. 把控件库的相关脚本放入调用工程的某个文件夹下;
  2. 添加相关依赖库;
  3. 在require.js的config方法添加需要的paths参数controls,指向控件库的所在目录;
  4. 此时,可以在调用页面通过requirejs依赖对应的控件脚本,调用实现;

一般调用方法

一般调用方法

Jquery式调用方法

Jquery式调用方法

打包部署

目前未考虑控件的打包发布工作范围及步骤。预计主要的范围是: js文件打包; css文件打包; 需要考虑打包后模块加载依赖的路径问题(统一考虑)。 目前暂时的做法是:直接把控件的源码(js、css)导入到使用环境。

控件开发范例

开发范例