Widget : UI基础类 PC & mobile
简介
Widget 是 FUI 框架中的所有 UI 组件的基础类,同时也可作为各业务线创建业务线级别的 UI 组件的基类使用。它继承自 Base类 ,拥有Base类的所有功能。
使用同一个 Widget 基类构建基础组件和业务通用组件,便于产品线间的组件互通,并提炼出更优秀的组件到公共组件库中,推荐大家使用!
创建一个继承自 Widget 的类
define('mytest/myWidget', ['lofty/lang/class', 'ui/widget/1.0'], function(Class, Widget){ var myWidget = Class ( Widget, { options: { isAutoPlay: true //组件默认属性 }, // myWidget的入口函数 _create:function (config){ } }); return myWidget; });
Widget的主要方法
init ():完成属性初始化、组件创建方式判断、组件内事件绑定、调用基类入口函数 _create() 的工作。
render ():基类有默认实现,将组件根节点插入到Dom文档中,不重复插入。 基类可以选择覆盖。
Widget基类功能 -- 组件有多种渲染方式的支持
在 buildElement() 函数中,根据实例化组件时传入的 tpl 参数的值,可以判断组件的渲染方式
- 静态渲染 (static) ;   -- tpl 值为 id 或 class 选择器字符串,组件将基于页面上已有的 Dom 节点构建(不生成新Dom,只绑定事件)
- js动态渲染 (dynamic)   -- tpl 值为模板字符串,或是页面的一个 script 标签对应的 id、class 选择器字符串
- 标签自动渲染 (autoRender) ;   -- 页面上的 div 带有 data-fui-widget 属性。
//1、静态渲染: tpl 来自页面上已有的Dom节点 var tab1 = new Tabs({ tpl:'#staticTab' }); //2、动态渲染: 无需传入tpl参数,因为组件内部js中已定义了该参数 var tab2 = new Tabs({ container:'#dynamicTab', children: [{ label: 'Tab1', content: '<p> Tab1 content</p> ' }, { label: 'Tab2', content: '<p> Tab2 content</p> ' }] });
Widget基类功能 -- 组件内事件委托机制
无论渲染方式如何,buildElement()最终会构建得到组件的根节点对象 --> this.get('el'),init 函数执行过程中, 通过 bindEvent 函数将定义在 UI 基类 events 对象中的 节点选择器 + 事件 + callback 以事件委托的方式自动注册到跟节点上。events 对象格式如下:
/** * 组件内事件集中在events变量中定义,框架会负责将这些事件自动以事件委托的方式注册,组件开发者只需要定义回调函数即可。 */ events:{ '#myWidget':{'mouseover': function(e){}}, //组件内部事件 '.fui-title':{'click':'onShowTitle', mouseover:'onHoverTitle'}, //组件内部事件 '':{'mouseenter': function(e){}}, //选择器为空值时,代表事件绑定到组件根节点上 'document':{'click': 'oncClickCall'}, //组件需要监听外部document的事件 'window':{'mousedown': function(e){}} //组件需要监听外部window的事件 } // 注意:由于使用事件委托,回调函数中的 this 是 widget 对象自身,可使用 $(e.currentTarget) 等获取事件触发元素。
除事件绑定外,组件的根节点对象 this.get('el') 是组件内部的重要对象,不允许为空值。
Widget基类功能 -- 暴露组件模板自定义渲染接口
handleTpl 函数可供子类覆盖,在此函数中子类可以实现对 tpl 模板的个性化处理。若有个性化数据,可以配合 tplData 渲染, 使得模板能够被更灵活的根据组件需要被处理。
FUI 使用的默认模板渲染引擎是 artTemplate,有几点优势:
- 默认语法接近Sweet
- 渲染效率高
- 支持子模板渲染
- 支持自定义语法