Sula插画.png
首先原谅我不羁（糊弄）的配图~

Sula 是一个面向前端中台的 产品级 配置化框架，希望帮助非专业前端同学可以最小学习成本开发高质量、高体验的前端中台产品。

为什么还需要 Sula

有 antd、antd-pro、dva、formily……，包括很多基于配置化方案（Form、Table等），为什么还要有 sula呢？因为前端需要解放前端生产力（苦笑），前端做了很多工作希望降低其他非专业前端的前端开发门槛以及对前端同学自身的提效，配置化、去样式开发、可视化搭建等等，但种种难题和灵魂拷问又接踵而至，灵活性、不愿意去接受新轮子的配置规则、变成工具人……，

这里应该有一个平衡，后端同学以一种他们熟悉的编程模式（面向对象）、配置化（去技术细节），前端依然采用通用技术（不断深钻），用配置去屏蔽技术细节。同时，不局限在一个表单、表格，这种能力是对应整个产品层面的。

先来个例子

完整例子请移步

以一个查询表格为例，我们看看这个平平无奇的界面 sula 做了什么。
image.png

场景1：点击操作列的图标，把它认为删除行即可。

  1. 二次确认

image.png

  1. 自动 loading，防多次点击

image.png

  1. 删除完成后自动刷新表格

场景2：点击批量注册按钮添加信息

  1. 选中行，按钮可用

image.png

  1. 点击按钮弹窗，提交自动 loading

image.png

  1. 请求携带选中行uuid

image.png

场景1如何实现

  1. {
  2.     title: '操作',
  3.     key: 'operation',
  4.     render: [
  5.       {
  6.         confirm: '是否删除？',
  7.         type: 'icon',
  8.         props: {
  9.           type: 'appstore',
  10.         },
  11.         action: [
  12.           {
  13.             type: 'request',
  14.             url: 'https://www.mocky.io/v2/5185415ba171ea3a00704eed',
  15.             method: 'POST',
  16.             params: {
  17.               id: '#{record.id}',
  18.             },
  19.             successMessage: '删除成功',
  20.           },
  21.           'refreshTable',
  22.         ],
  23.       },
  24.     ],
  25.   },

  • {} 代表了模板字符串计算，record 来自于sula中非常重要的概念 ctx，后面还会介绍；

  • render的值叫做 渲染插件 组；
  • action的值叫做 行为插件链 ，action搭配render插件使用，可以看到这个行为是由请求 -> 刷新表格，这两个行为插件组成，当然 sula 会在收尾增加showLoading和hideLoading；

场景2如何实现

  1. const actionsRender = {
  2.     type: 'button',
  3.     disabled: (ctx) => {
  4.       const selectedRowKeys = ctx.table.getSelectedRowKeys();
  5.       return !(selectedRowKeys && selectedRowKeys.length);
  6.     },
  7.     props: {
  8.       type: 'primary',
  9.       children: '批量注册',
  10.     },
  11.     action: [
  12.       {
  13.         type: 'modalform',
  14.         title: '信息',
  15.         fields: [
  16.           {
  17.             name: 'name',
  18.             label: '名称',
  19.             field: 'input',
  20.           },
  21.         ],
  22.         submit: {
  23.           url: 'https://www.mocky.io/v2/5185415ba171ea3a00704eed',
  24.           method: 'POST',
  25.           convertParams: (ctx) => {
  26.             const uuids = ctx.table.getSelectedRows().map((item) => item.login.uuid);
  27.             return {
  28.               ...ctx.params,
  29.               uuids,
  30.             }
  32.           }
  33.         },
  34.       },
  35.       'refreshTable',
  36.     ],
  37.   },

这依然是一个渲染插件与行为插件的搭配。

  • disabled 会通过 ctx提供的信息进行计算
  • 新出现一个行为插件 modalform 它的方式方式可参考 Form 配置组件规则
  • field代表了表单插件，这里先不做展开
  • submit 是多个行为插件的简写，submit = validateFields -> request，可以在convertParams 对请求参数转换，这里ctx.params代表了弹窗表单值，通过ctx.table又再参数中增加了选中行对应的uuid

总结一下

这里我们可以初步感受到 sula 面向对象配置 的前端开发模式。

  • 配置即插件，我们看到了渲染插件、行为插件和表单插件，渲染插件和表单插件可以理解为是对antd组件的插件化转换，props即antd组件的属性
  • 插件属性可以通过方法 or 模板字符串，借助ctx去动态计算属性值
  • 行为插件链串行执行（当然你可以在一个行为用Promise.all去执行多个行为），sula 会管理行为链，如果一个行为执行失败，后续行为不会执行，有关行为链后续会着重讲解。

康康 Sula

当前 Sula 1.0 还处于起步阶段（alpha 请不要在生产环境使用），如果你对 Sula 的开发模式感兴趣请扫码入群，欢迎多提宝贵意见，帮助 Sula 快速成长。
image.png