理念
在实际业务系统当中，经常面对的就是CRUD开发，包含后端逻辑和前端界面。关于CRUD后端逻辑的开发， 参见：原子基本概念
针对CRUD的前端界面，CabloyJS提出了原子布局的概念，同样提供了一系列开发接口与规范，从而加速前端界面的定制开发
首先，我们先了解一下原子布局背后的设计理念
1. 自适应布局：pc=mobile+pad
CabloyJS首创了与众不同的pc=mobile+pad自适应布局：
-
针对不同的尺寸显示不同的布局
-
同一个尺寸也可以提供多个布局供用户选择
以模块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首先提供了一套默认布局，其次又将这套布局机制通过接口和规范暴露出来，从而支持灵活定制和二次开发
-
基础布局：由模块a-base提供，并通过JSON规范来定义布局的基础配置 -
列表默认布局/条目默认布局：由模块a-basefront提供，并通过JSON规范来定义列表布局和条目布局的默认渲染规则 -
定制布局：如果业务模块需要对布局进行定制，只需在业务模块中提供自定义的JSON规范即可。系统会自动将三个JSON规范合并。因此，定制布局的JSON规范往往是增量部分，所以开发起来非常便捷
评论: