理念

在实际业务系统当中,经常面对的就是CRUD开发,包含后端逻辑前端界面。关于CRUD后端逻辑的开发, 参见:原子基本概念

针对CRUD的前端界面,CabloyJS提出了原子布局的概念,同样提供了一系列开发接口与规范,从而加速前端界面的定制开发

首先,我们先了解一下原子布局背后的设计理念

1. 自适应布局:pc=mobile+pad

CabloyJS首创了与众不同的pc=mobile+pad自适应布局:

  1. 针对不同的尺寸显示不同的布局

  2. 同一个尺寸也可以提供多个布局供用户选择

以模块test-party宴会原子为例:

场景 mobile pad pc
列表布局 list table table
条目布局 form(1栏) form(2栏) form(2栏)
  • list:列表布局

  • table:表格布局

  • form:表单布局。表单本身就是自适应布局,不同的尺寸会显示不同的栏位

以模块test-note便签原子为例:

场景 mobile pad pc
列表布局 card(1栏) / list card(2栏) / table card(2栏) / table
条目布局 content / form (1栏) content / form(2栏) content / form(2栏)
  • card:卡片布局。方便更直观的显示便签内容,不同的尺寸会显示不同的栏位

  • content:正文布局。可以直接显示便签内容

2. 开箱即用+灵活定制

虽然CabloyJS提供了如此灵活多变的自适应布局机制,但是我们仍然可以快速开发,其核心就在于CabloyJS首先提供了一套默认布局,其次又将这套布局机制通过接口和规范暴露出来,从而支持灵活定制二次开发

  1. 默认布局:由模块a-basefront提供,并通过JSON规范来定义布局的渲染规则

  2. 定制布局:如果业务模块需要对布局进行定制,只需在业务模块中提供自定义的JSON规范即可。系统会自动将两个JSON规范合并。因此,定制布局的JSON规范往往是增量部分,所以开发起来非常便捷