saber-ui

    0.1.0 • Public • Published

    saber-ui

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

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

    Dependencies

    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,取值参考.configinfo参数。

    注:name值有效时返回对应的配置项值,否则返回undefined

    控件注册

    .register(component)

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

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

    .create(type, [options])

    创建控件实例

    type: 控件类型名。类型String

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

    注:type对应控件若已注册,返回新创建实例,否则返回null

    实例管理

    .add(control)

    存储控件实例

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

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

    .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: 待禁用插件名。类型StringArray,参数可选。为String时仅禁用对应插件,为Array时批量禁用对应插件,为空时禁用全部插件。

    注:此API暂时不实现,视后续需要补充

    .disposePlugin(control, [pluginName])

    销毁插件

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

    pluginName: 待销毁插件名。类型StringArray,参数可选。为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' ) );

    ===

    Saber

    Keywords

    none

    Install

    npm i saber-ui

    DownloadsWeekly Downloads

    1

    Version

    0.1.0

    License

    BSD

    Last publish

    Collaborators

    • zfkun