跳到主要内容

组件规范

版权声明
阅读提醒
本文还在编辑整理中，后续可能会发生较大变动，请谨慎阅读！

以模型驱动视图更新​

  • 对 DOM 的操作主要用于对事件及其数据的转换（转换为模型数据）， 如，编辑器对鼠标、键盘的事件监听用于获取光标位置，而在组件内部， 只需关心光标对应哪个模型对象（光标也对应一个模型对象）上即可， 而无需关心光标的像素位置等细节，从而实现完全的数据驱动： 在可编辑元素的最小单位之间均插入一个光标占位，并为该占位渲染一个 DOM 节点用于接受点击、移动等事件，便可确定光标所对应的数据

组件设计​

  • 定义 Block（块）作为组件的容器元素，负责控制显示区域大小、边界、阴影等， 其对应 HTML 中的 div 元素
    • 组件的 <template /> 自动映射一个 Block 作为其内部结构的根容器
  • 组件对外开放的消息/事件名必须是语义化的，且该名字是与组件自身行为相关的， 比如，弹窗组件的 pop-up 事件
  • 组件属性设计规则（参考《聊聊前端 UI 组件：组件设计 - 业务无关》）：
    • 属性是 UI 组件的外部与其内部进行主动通信的数据，事件则是进行被动通信的回调函数
    • UI 组件的属性只应与其本身的特性有关，与业务意义无关 —— 自身特性是自然特性，业务意义是附加特性
    • UI 组件属性设计原则来看，「主要」、「次要」和「危险」作用到按钮组件上的表现主要是颜色发生了变化， 所以应该去用表示按钮的自然特性「颜色」的 color 属性来满足同样的需求， 比如，<Button color="danger">危险按钮</Button> 而不是 <Button type="danger">危险按钮</Button>
编辑此页
最后由 flytreeleft 于 更新