data ​

元素数据相关属性。

关键属性 ​

__: IUIInputData ​

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

data: IObject ​

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

关键方法 ​

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 ​

获取计算属性值，只返回计算数据（含默认值）。

clone ( ):UI ​

克隆当前元素。

数据分层结构 ​

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

输入数据层 ​

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

const rect = new Rect()

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

中间数据层 ​

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

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

box.add(rect)

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

计算数据层 ​

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

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 ​