设计规范 #

相信您已经大概了解了nPro的 主题相关 的内容。

这里我们介绍下nPro的组件设计与属性以及接口命名的规范。

组件类型 #

nPro里面加入的组件大都数是一些公用的组件,几乎没有与具体业务挂钩的组件,主要是考虑以下方面:

  • 大多数业务组件,不适合当公共组件,而且配置起来会非常麻烦,不利于自定义或者说个性化;
  • 熟悉以及配置一个业务组件所需要的时间远比自己写一个业务组件花费的时间要多得多;
  • 开箱即用的组件,并不一定要加到组件库里面。对于新手来说,可能所需要的只是一个示范,知道怎么去实现就行,而对于老手来说,这类组件意义不大;
  • 大多数产品都是有设计稿的,再多的组件也无法适配设计稿;
  • 我们会尽可能的在demo中提供各类自定义的组件以满足那些所见即所得的用户;

属性的命名 #

为了减少记忆成本,我们的组件属性大多数都是 xxBgType xxType xxSize xxStyle 这样的格式。

  • bgType 对应的是背景主题;
  • type 对应的是颜色主题;
  • size 对应的是尺寸主题;
  • style 是自定义样式;

在文档中,主题类的字段,可设置值都与 base.scss 有关,非主题类属性一般都有 自定义/个性化 等说明。

查看文档的时候,请注意,我们不会花很多的文字描述xxStyle xxType 这样的设置。我们只会说明xx这个属性是用来做什么的。

他对应的type/size/style等都是这里面的一些约定。对于所有组件来说,这些约定都是通用的。

事件的命名 #

nPro组件的事件,都是 xxxClicked 形式命名,比如:

  • buttonClicked;
  • cellClicked;
  • itemClicked;
  • ...

前面是组件的简写名称,后面是Clicked。一般情况下,你知道一个组件的事件之后,其他组件的事件也可以顺便写出来。而且以后再写,也不需要特意去记。

混入的区别 #

支持混入的一些辅助文件,里面的变量以及方法命名,我们都使用n开头。

说明 #

nPro在整体的主题设计,以及命名规则设计上是比较讲究的,最大程度的加快开发速度。

通过全局视野主题配置以及这篇设计规范,您应该已经知道nPro的规则了。接下来按照我们说的使用起来吧。