saber-ui

SaberUI的公共部分。ECOM UI v1.1规范实现。

提供全局配置、控件注册、实例管理、插件管理、构建解析等功能

Dependencies

saber-lang

Usage

通过edp导入

edp import saber-ui

API

全局配置

.config([info])

配置全局参数

info: 配置信息对象。类型Object，参数可选，可包含项如下:

idAttrPrefix: 控件主元素的ID前缀。默认值ctrl
uiPrefix: 静态化构建时控件配置信息所在DOM属性名的前缀。默认值data-ui
uiPluginPrefix: 静态化构建时控件插件配置信息所在DOM属性名的前缀。默认值data-ui-plugin
instanceAttr: 控件实例的标识属性名。默认值data-ctrl-id
uiClassPrefix: 控件的默认class前缀。默认值ui
skinClassPrefix: 控件皮肤的默认class前缀。默认值skin
stateClassPrefix: 控件状态的默认class前缀。默认值state
uiClassControl: 控件公共class前缀。默认值ctrl

例子

require('saber-ui').config({ uiPrefix: 'data-myui' });

注: 全局配置的变化影响面较广，若非必需，尽量不要修改全局配置。

.getConfig(name)

获取指定全局配置项

name: 配置项名称。类型String，取值参考.config的info参数。

注：name值有效时返回对应的配置项值，否则返回undefined。

控件注册

.register(component)

注册控件类。根据控件类的prototype.type识别控件类型信息。

component: 控件类。类型Function，即控件类的构造函数。

.create(type, [options])

创建控件实例

type: 控件类型名。类型String。

options: 控件初始化参数。类型Object，参数可选。

注：type对应控件若已注册，返回新创建实例，否则返回null。

实例管理

.add(control)

存储控件实例

control: 待存储控件实例。类型Control。

注：存储时会根据control的id检索当前存储，若不存在，直接加入存储，若已存在但不是同一实例，则覆盖存储，其他情况，不做存储。

.remove(control)

移除控件实例

control: 待移除控件实例。类型Control。

.get(id)

通过id获取控件实例

id: 欲获取的控件的id。类型String。

注：查询到则返回控件实例，否则返回undefined

插件管理

.registerPlugin(plugin)

注册插件类。通过类的prototype.type识别插件类型信息。

plugin: 插件类。类型Function，即插件类的构造函数。

注：若plugin已注册，则会抛出形如plugin {plugin.type} is exists!的异常

.activePlugin(control, pluginName, [options])

激活插件

control: 目标控件实例。类型Control。

pluginName: 待激活插件名。类型String。

options: 插件配置项。类型Object，参数可选。

注：pluginName参数必须为已注册插件的名称，且在control上未激活过，否则什么都不会发生。

.inactivePlugin(control, [pluginName])

禁用插件

control: 目标控件实例。类型Control。

pluginName: 待禁用插件名。类型String或Array，参数可选。为String时仅禁用对应插件，为Array时批量禁用对应插件，为空时禁用全部插件。

注：此API暂时不实现，视后续需要补充

.disposePlugin(control, [pluginName])

销毁插件

control: 目标控件实例。类型Control。

pluginName: 待销毁插件名。类型String或Array，参数可选。为String时仅销毁对应插件，为Array时批量销毁对应插件，为空时销毁全部插件。

DOM解析

.parseAttribute(source, [valueReplacer])

将"name:value[;name:value]"的属性值解析成Object。主要为.init服务。

source: 属性值源字符串

valueReplacer: 替换值的处理函数。类型Function，参数可选。

自动构建

.init(wrap, [options])

从容器DOM元素批量初始化内部的控件渲染，并返回初始化的控件对象集合数组

wrap: 容器DOM元素。类型HTMLElement，默认值document.body。

options: 初始化配置参数。类型Object，参数可选，可包含项如下:

properties: 自定义属性集合，类型Object
valueReplacer: 属性值替换函数，类型Function
success: 渲染完成回调函数，类型Function

注：若wrap内为空或不存在有效控件结构，则返回空数组[]

例子

<div id="app">
    <button data-ui="type:Button">button</button>
    <div data-ui="type:Tab">
        <ul data-role="navigator">
            <li>Tab1</li>
            <li>Tab2</li>
            <li>Tab3</li>
        </ul>
    </div>
</div>

require( 'saber-ui' ).init( document.getElementById( 'app' ) );

===