Skip to content

Latest commit

 

History

History
121 lines (109 loc) · 5.7 KB

20150426.md

File metadata and controls

121 lines (109 loc) · 5.7 KB

#一种前端控件库设计框架 ##设计原则 ###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）导入到使用环境。

##控件开发范例 开发范例