sula入門教程


一、what sula?
sula 是在螞蟻金服多個生產(chǎn)項目沉淀出來的一套「產(chǎn)品級」配置框架，通過插件化的方式實(shí)現(xiàn)了配置的高擴(kuò)展性與高靈活性，并且 sula 通過行為插件的引入，建立了渲染插件與用戶行為的連接，實(shí)現(xiàn)了場景式的語義化配置。

在github的sula項目中package.json可以看到如下:

"antd": "4.3.4"
可以看出sula是基于antd 的，因此熟悉antd的小伙伴上手是很快的。
二、why sula?
1、sula 通過 ctx 實(shí)現(xiàn)了插件與核心組件的通信，配置規(guī)則靈活且易于擴(kuò)展
2、 自動 loading，sula 不侵入式幫助用戶完成按鈕、超鏈接、圖標(biāo)點(diǎn)擊過程的 loading 管理。
sula有5個模板、3種組件
5個模板：

1、創(chuàng)建表單CreateForm
2、查詢表格QueryTable
3、分步表單（比較少用到）
4、分步表格（比較少用到）
5、查詢表單QueryForm


3種組件

1、Form
2、Table
3、ModalForm（彈框、抽屜）


Tips：mode有三種模式

'create'、'edit'、'view' (默認(rèn) edit)；

create 模式

edit 模式

view 模式

三、簡單的Demo
import React from 'react';
import { Form } from 'sula';

export default () => {
  const fields = [
    {
      name: 'name',
      label: '前端早茶',
      field: {
        type: 'input',
        props: {
          placeholder: '請輸入',
        },
      },
    }    
  ];

  return (
    <>
      <Form ref={formRef} fields={fields} />
    </>
  );
};


效果如下：

Tips:

沒接觸過sula的小伙伴會說，這么簡單的功能，還要這么多代碼吖。

其實(shí)這些代碼都是cv的。sula提供了一個在線配置的開源項目，我們可以在上面配好頁面，然后把配置的代碼拷貝到自己的項目里面，很方便。

在線配置好我們需要的組件，效果如下：

然后查看配置的代碼，效果如下：

sula 的在線配置化工具 https://cook-sula.vercel.app/#/

四、如何使用sula
這里我們使用umi作為例子
Step 1:  創(chuàng)建umi項目

mkdir sula-use && cd sula-use
yarn create @umijs/umi-app && npm i && npm start
瀏覽器打開http://localhost:8000/，就可以看到歡迎頁面。

Step 2:  安裝 sula 和 umi-plugin-sula

npm i sula umi-plugin-sula --save


Step 3:  在 .umirc.js 中啟用 umi-plugin-sula 插件

export default defineConfig({
  sula: {
      locale: {
          default: 'zh-CN'      
      }  
  },
})


Step 4:  在 src 目錄下新建 global.js 并導(dǎo)入 antd 主題并注冊項目中所需要 icon

// global.js
import { Icon } from 'sula';
import { DeleteOutlined } from '@ant-design/icons';
import 'antd/dist/antd.less';

// 注冊所需的icon
Icon.iconRegister({
  delete: DeleteOutlined,
});
Tips: 其實(shí)我們也可以把sula項目引入到自己項目，不當(dāng)成插件引入

到這里就可以開始使用sula了。

五、國際化與多語言
// 默認(rèn)中文展示
export default {
  sula: {},
  locale: {
    default: 'zh-CN',
    antd: true,
    baseNavigator: false,
  },
};
六、圖表
之前sula使用的是@sula/charts，現(xiàn)在官方不推薦繼續(xù)使用，后續(xù)會使用G2。

七、ctx與表單依賴
ctx是什么？
sula 內(nèi)所有配置屬性，均支持配置方法，ctx 為該方法的第一個參數(shù)，配置給不同屬性時，ctx 內(nèi)容會有差異

Tips:  Form\Table對應(yīng)的ctx也是有所區(qū)別的
簡單的demo
const fields = [
  {
    name: 'name',
    label: '姓名',
    field: (ctx) => {
      return <Input disabled={ctx.mode === 'view'} />;
    },
  },
];
平時我們在使用sula的時候，如上面的ctx來編寫。



Form

form 實(shí)例

history

mode: 表單模式, 支持 'create' | 'view' | 'edit'

disabled: 是否可點(diǎn)擊

source：表單項數(shù)據(jù)源 (select、checkboxgroup等支持source)

results、 result：鏈?zhǔn)讲僮鞯纳弦粋€行為 promise 返回的結(jié)果

Table

table 實(shí)例

dataSource: table 數(shù)據(jù)源

history

index: 索引

record: 當(dāng)前行數(shù)據(jù)

text: 當(dāng)前行的值

params: 請求參數(shù)

data: 接口返回數(shù)據(jù)

result、results: 鏈?zhǔn)讲僮鞯纳弦粋€行為 promise 返回的結(jié)果

模板字符串

sula 定義的模版字符串 '#{}' 用于對 ctx 的解析

表單依賴
有些時候，有些業(yè)務(wù)需求需要字段之間是有所關(guān)聯(lián)與依賴的。這個時候就需要我們使用到dependency。

import React from 'react';
import { Form } from 'sula';

export default () => {
  const config = {
    fields: [
      {
        name: 'weixin',
        label: '微信號',
        field: {
          type: 'input',
          props: {
            placeholder: '請輸入',
          },
        },
        dependency: {
          disabled: {
            relates: ['name'],
            inputs: [['feng']],
            output: true,
            defaultOutput: false,
          },
        },
      }
    ],
  };
  return <Form {...config} />;
};
效果如下：

八、最后
sula有它的優(yōu)勢，也有它的不足，廣東靚仔列舉了幾點(diǎn)不足：

1、社區(qū)不活躍
2、新手遇到問題比較難找到解決方案
3、樣式比較固定靈活度有所欠缺
4、一些依賴性比較強(qiáng)的復(fù)雜交互比較難實(shí)現(xiàn)
因此項目中使用sula與否，要按實(shí)際情況取舍。




關(guān)注我，一起攜手進(jìn)階

作者：廣東靚仔


歡迎關(guān)注：前端早茶