Skip to content

data

元素数据相关属性。

关键属性

data: IObject

预留给用户的自定义数据对象,我们永远不会占用, 默认为空对象 {} 。

内部属性

__: IUIInputData

内部数据处理实例(两个下划线的变量)。

关键方法

set ( data?: IUIInputData)

设置元素样式。

reset ( data?: IUIInputData)

重置元素样式, 支持传入一个新的样式 data。

可以通过重写 reset 方法加入自定义的元素初始化逻辑。

get ( ): IUIInputData

获取设置过的样式属性数据(输入数据)。

get ( name: string ): IValue

获取设置过的属性值(输入数据),未设置返回 undefine

setAttr( name: string, value: any )

设置属性值。

getAttr( name: string ): any

获取属性值,优先返回输入数据,其次返回计算数据(含默认值)。

getComputedAttr( name: string ): any

获取计算属性值,只返回计算数据(含默认值)。

数据分层结构

通过数据处理类创建的实例 ui.__,可以承载多层数据,满足不同的业务需求。

输入数据层

创建元素/修改属性时输入的原始数据,导入导出的 JSON 都是在这个数据层。

ts
const rect = new Rect()

rect.get('width') //  undefined,返回输入数据
rect.width // 100,返回输入数据优先, 不存在则返回默认值

中间数据层

像百分比的语义化字符串,会先解析为一个中间数据,再动态结合宽高生成计算数据。

ts
const box = new Box({ width: 200 })
const rect = new Rect({ width: '50%' }) // 仅演示,目前是预留了中间数据层,还未使用

box.add(rect)

rect.__.__getMiddle('width') // { type: 'percent', value: 0.5 }, 返回中间数据

计算数据层

通过输入数据/中间数据计算得到稳定的最终数据,支持返回默认值。

ts
const box = new Box({ width: 100 })
const rect = new Rect({ width: '50%' })

box.add(rect)

// `rect.__` 会自动添加同元素数据属性一样的 setter/getter

rect.__.width // 50, 返回计算数据 50% = 100 * (50 / 100),box.width变化时会自动更新

其他如图片填充,也会生成一个最终的 pattern 对象(计算数据)用于快速渲染。

大部分的属性都是共用计算数据层,避免额外的内存开销。

归属

UI

Released under the MIT License.