最近在体验极态云（jit.pro）这款低代码软件开发产品，发现其前端框架设计方案很优雅很强大！ 在接下来的学习过程中，我将持续输出自己对极态云前端框架设计方案的深入理解，包括具体的使用技巧、优势分析以及可能的应用场景等方面的内容，希望能为大家提供有价值的参考。
门户
极态云中的门户，相当于一个子系统，针对某一类用户群体定义的一个前端展示框架。一个门户通常包含菜单容器和页面容器，可以配置菜单和菜单对应的页面。
一个应用中，可以有多个子系统，每个子系统配置自己的门户。
例如 CRM 应用中既有外部联系人要使用，也有企业内部员工在使用 ， 一般的低代码平台要么就是前端页面框架一样，只是不同人群进入后的菜单项不一样。要么就是分别创建 2 个应用，这样又增加了工作量。在极态云中，针对外部联系人配置一个门户，界面如下：
针对公司内部员工配置的门户如下：
极态云已经内置的门户有：
- 前端渲染（Client-Side Rendering）门户： CSR 门户，极态云中叫标准门户。即单页面应用，适合开发 CRM、ERP、OA、商城等业务管理系统。
- 后端渲染（Server-Side Rendering）门户： SSR 门户，适合开发静态页面，例如： 官网、帮助手册等。
- 空白门户：即没有导航的独立页面。
也支持开发者自己扩展自己的门户。
页面
页面，极态云中的页面是展示内容的主要区域。 支持多种页面类型：例如标准页面类型、HTMl 页面类型、数据管理页面类型、数据录入页面类型、全代码页面、Markdown 页面等等，也支持开发者自己扩展类型。
这里重点讲下 标准页面类型。标准页面类型，是由组件组成。
组件
组件是构建极态云页面的核心元素。与传统的React组件相比，极态云提供的组件具有更大的封装程度以及更丰富的功能选项。特别是针对后端数据交互逻辑进行了深入整合，使得即使是非专业程序员也能轻松完成复杂的业务逻辑实现。
例如：表格组件的组件参数：数据表 ID 及筛选条件排序、显示字段的配置（是否可编辑、冻结、换行显示、统计方式等）、按钮配置（按钮标题、图标、类型、颜色、显示条件等）、禁用选择列、显示序号、每页显示条数、样式规则（满足条件、行列样式）、编辑规则等参数。有明显的 2 个特点：
- 只需要传入数据表 ID，表格组件内部就可以根据这个表 ID 向后端请求数据。
- 参数很多，很全。优势是：方便个性化配置业务场景。劣势是：全代码配置麻烦。不过，极态云提供可视化开发，就解决了配置麻烦的问题。
每个组件就相对于一个类，组件变量，就相当于类的变量；组件函数，就相当于类的函数。在具体的业务页面中，通过修改组件变量或者调用组件函数来从外部控制组件的变化。组件变量的值，也可以被外部获取。
例如：表格组件有以下组件变量：
| 变量 title | 变量 name | 读写 | 值类型 | 说明 |
|---|---|---|---|---|
| 当前页数据 | displayRowList | 只读 | 多行数据 | |
| 选中的多行数据 | selectedRowList | 只读 | 多行数据 | |
| 操作的单行数据 | activeRow | 只读 | 单行数据 | |
| 筛选条件 | filter | 只读 | 筛选条件 | 以下情况的组合筛选：1、数据源本身的设置筛选条件2、call方法传入的筛选条件3、权限设置的条件 |
有以下组件函数
| 函数 title | 函数 name | 参数 | 返回值 | 说明 |
|---|---|---|---|---|
| 刷新 | call | 筛选条件：筛选条件 | 无 | |
| 刷新当前页 | refresh | 无 |
通过组件事件，即开放自己组件的某些特定触发时机给外部，向页面发送一个事件消息，方便开发者按业务需求自定义这个事件之后的下一步动作。例如：表格的事件如下
| 事件 title | 事件 name | 输出参数 | 说明 |
|---|---|---|---|
| 选中行后 | selectedChange | 选中的多行数据：多行数据seletedRowList | |
| 点击行后 | clickRow | 操作的单行数据：单行数据activeRow | |
| {列}点击后 | click{FieldName} | 操作的单行数据：单行数据activeRow | |
| 任意字段值改变后 | afterRowChange | 操作的单行数据：单行数据activeRow | |
| {XX字段}值改变后 | after{FieldName}Change | 操作的单行数据：单行数据activeRow | |
| {XX工具栏按钮}点击后 | click{Btn} | 选中的多行数据：多行数据seletedRowList | |
| {XX操作列按钮}点击后 | click{Btn} | 操作的单行数据：单行数据activeRow |
例如：我们在表格上新增一个「移入公海」的按钮，表格组件就会自动增加一个「移入公海」的按钮，配置其响应事件如下：
切换到源码如下：
最后
极态云前端架构从宏观到微观，每一层均支持扩展类型，且每一层都能够自由组合，实现了完美解耦。而当各层组合在一起时，又能够满足千行百业的多样化需求。
在下一篇内容中，我将继续深入剖析极态云的登录方式、组织架构以及角色权限。
