深入剖析极态云优雅的前端框架设计方案（上）

最近在体验极态云（https://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
例如：我们在表格上新增一个「移入公海」的按钮，表格组件就会自动增加一个「移入公海」的按钮，配置其响应事件如下：

切换到源码如下：

最后
极态云前端架构从宏观到微观，每一层均支持扩展类型，且每一层都能够自由组合，实现了完美解耦。而当各层组合在一起时，又能够满足千行百业的多样化需求。

在下一篇内容中，我将继续深入剖析极态云的登录方式、组织架构以及角色权限。