vue 项目其他规范

列表

z-index叠层规范

  • lever1：普通content：1-99；
  • lever2：header、footer、广告、页面tips等在内容之上，但又与内容相关性较大的；层：100-199；
  • lever3：返回顶部等页面工具类：200-299；
  • lever4：popup、picker等浮在页面上的操作层：300-399；
  • lever5：loading：400-499；
  • lever6： toast等直接遮罩在页面上的warning、error信息：500-599。

基础布局

结构

  • .page
    • header
    • footer
    • content

规范

每个页面仅允许一组基础布局，这为组件加载、交互、分层提供挂载、容器等基础。

原因

如果出现多套，将会影响公共组件引入的准确性和灵活性；也会影响功能的扩展等。

示例：totop组件

从引入组件的角度上看，作为一个基础浮动的工具组件，不应该关注实际业务及根插销，直接动态加载到基础布局当中即可。如果有多个嵌套的基础布局，将需要更多的代码，来辨别其插入点，也会失去灵活性，所以从组件的角度，唯一布局很重要。

从功能角度上看，它需要监控页面的滚动位置，在这种布局下，其需要监控content的位置情况，如果出现多个基础布局，将影响功能的使用。

组件的相关规范

加载方式

a、业务组件：可根据业务需求选择相应加载方式；

b、基础组件：尽量使用动态加载的方式，如popup、pick、loading这些浮层组件。其优势如下：

  • 可以对使用者（开发人员）屏蔽加载点；
  • 防止叠层错乱（业务组件引入基础浮层组件，如果非动态加载，浮层将于内容层交错，导致样式叠层错乱，要做额外的hack等）；
  • 有利于单页跳转时，组件的统一清除。

数据流

  • a、基础组件：使用props加载数据，不关注业务；
  • b、业务组件：抽象业务组件的业务范围，抽象数据结构，从vuex中进行取值，加强vuex数据的复用及组件的复用。

如何区分业务组件和基础组件：以地址picker为例。其首先是基础的picker组件，可实现多列滚动，每次滚动都会产生一个唯一的结果数组，确认以后，返回该结果数组。该基础picker组件可以扩展成动态请求数据的地址picker，也可以是固定值的多级picker，到底需要哪种，就与业务相关。因此，地址picker，是对基础组件picker的扩展，其包含数据流的存取过程，及数据流的交互，异步请求等。

组件升级

  • 接口：对于公共组件，多人的调用的业务组件，需要做到旧接口的兼容。
  • 兼容方式：提供一个新旧接口交替期，在该时期，新旧接口并存，开发者将组件往新的接口上迁移，迁移完成之后，组件设计者，再将旧接口移除。

叠层的定义
公共组件，可以根据给出的z-index规范，给出组件的z-index叠层id；但其取值尽量在该组件类型叠层规范数值范围的中间值，便于同类型业务组件的向下向上叠层处理。

posted @ 2017-11-07 15:34  蒲公英tt  阅读(363)  评论(0)  编辑  收藏  举报