优维低代码：Best Practice
Posted 优维科技EasyOps
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了优维低代码：Best Practice相关的知识，希望对你有一定的参考价值。
导语
优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。
连载第十二期
《编排详解：Best Practice》
▽
# Storyboard 最佳结构
- 第一级路由type:route
- Provider 的声明尽量放到路由第一级
- 一级菜单统一在一级menu写，这样一级菜单也直接复用了
过去：
- provider 重复定义，也不清楚到底我用了哪些接口
我们能看到很多 provider 是在bricks[]定义的，比如：
"bricks": [
"brick": "providers-of-cmdb.instance-api-post-search",
"bg": true
,
"brick": "providers-of-cmdb.cmdb-object-api-get-object-all",
"bg": true
...
]
- Menu 重复定义
我们能看到很多同学将menu抽出一个函数，然后在 ts 里面直接调用，但实际上这样生成的storyboard.json也是每个path都定义了一次的。
有人会说，有什么关系呢，反正我就一个函数嘛。因为生成的 storyboard.json 越大，意味着页面首次加载越慢，大伙看下 162 目前的 bootstrap 接口的数据量及耗时就知道了
建议：
"app": "name": "敏捷管理", "id": "agile", "homepage": "/agile" ,
"routes": [
"path": "$APP.homepage",
"menu":
...
,
"providers": [
"providers-of-cmdb.instance-api-post-search",
"providers-of-cmdb.instance-api-get-detail",
"providers-of-cmdb.cmdb-object-api-get-object-all",
"providers-of-cmdb.instance-api-delete-instance",
"providers-of-cmdb.instance-api-update-instance-v2",
"providers-of-cmdb.instance-api-create-instance",
"providers-of-cmdb.instance-api-aggregate-count-v2",
"providers-of-cmdb.instance-api-import-instance",
"providers-of-cmdb.instance-api-group-instance",
"providers-of-topboard.topboard-api-create-issue",
"providers-of-topboard.topboard-api-create-comment",
"providers-of-topboard.topboard-api-update-comment",
"providers-of-topboard.topboard-api-update-issue",
"providers-of-topboard.topboard-api-update-issue-step",
"developers.provider-providers-sub-menu",
"developers.provider-service-data",
"developers.providers-of-brick-story",
"developers.providers-of-brick-docs",
"providers-of-notify.oplog-api-list-operation-log"
],
"type": "routes",
"routes": [
...
]
]
# 多用事件回调（Callback）
上面说到，provider 都定义在一级路由，那这里有同学可能会说，调用了provider后我希望弹出提示框呢，怎么搞？
事实上，很多时候也是因为此，所以要多次定义 provider
框架提供了新的 callback 能力，可以直接在 callback 写对应的处理，更加简单直接，代码量直接少 1/4。
brick: "presentational-bricks.modal-confirm",
properties:
id: "sprint-complete-confirm",
title: "确定关闭迭代？",
content: "未完成任务将转移到需求池"
,
events:
"confirm.ok": [
target: "providers-of-cmdb\\\\.instance-api-update-instance-v2",
method: "resolve",
args: [
"_SPRINT",
"$sprintId",
status: "completed"
],
callback:
success: [
action: "message.success",
args: ["迭代关闭成功，进入下一个迭代"]
,
action: "history.push",
args: ["$APP.homepage/product/$productId/sprint"]
],
error:
action: "handleHttpError"
,
]
另外，大伙是否注意到message.success，我们已经将
presentational-bricks.brick-utils的能力封装到框架了，意味着不用再写下面的定义了
brick: "presentational-bricks.brick-utils",
bg: true
# callback 的时候别只写 success，而不写 error
如果是单元测试的话，这就是路径没覆盖。
# 什么时候 provider 应该用 id 来调用
如果有用到provider的暂存数据能力，比如调用了updateArgs，updateArgsAndExecute，setArgs，setArgsAndExecute，这种情况下就应该去声明id，用id来调用。
如果直接providers-of-xx.xxx调用的话，很容易就被其他编排者污染了你的参数。
# 尽量依照调用顺序去传递数据，不要去改别人内部的东西
场景一：表格里面有个按钮去调用 provider
"brick": "presentational-bricks.brick-table",
"properties":
"columns": [
"title": "Tools",
"width": "180px",
"useBrick": [
"brick": "basic-bricks.general-custom-buttons",
"transform":
"dataSource": "@rowData"
,
"properties":
"isMoreButton": true,
"alignment": "start",
"customButtons": [
"isDropdown": false,
"tooltip": "Active Issue",
"icon": "like",
"eventName": "issue.like",
"buttonType": "link"
]
,
"events":
"issue.like": [
"target": "#updateProvider",
"method": "executeWithArgs",
"args": [
"_ISSUE",
"$EVENT.detail.instanceId",
"status": "active"
]
]
]
]
大伙注意到，数据的传递方向是 table -> button -> provider。尽量不要在某个地方去给provider去updateArgs
现在我们交互原子构件（比如button、custom-buttons、brick-link）都具备数据（dataSource或detail字段）的暂存能力了
场景二：点击按钮弹出 modal，modal 里面有个 form 表单
这个场景比较复杂，现在还没有一个最佳实践，用新的 custom template 封装吧。准备后面专门做个modal-form来解决
# 在没有地方暂存数据的时候，记得 html element 是可以任意存储数据的
事实上，你可以在 event 或者 lifeCycle 的时候，给某个构件写入任意属性去暂存数据，这样在这个构件的事件发出来的时候，你可以通过$EVENT.target.xxx获得数据
brick: "agile.comment-brick",
properties:
id: "issue-comment",
placeholder: "说点什么"
,
events:
"add.comment":
target:
"providers-of-topboard\\\\.topboard-api-create-comment",
method: "resolve",
args: [
body: "$EVENT.detail.body",
author: [
instanceId: "$SYS.userInstanceId"
],
issue: [
instanceId: "$EVENT.target.issueInstanceId"
]
],
callback:
# 动态构件列表渲染
general-card-list卡片列表我们封的比较死，只能使用到里面的card-item，而且他是一个老版的template，很难用事件来触发他更新数据，怎么办？我们现在有个神奇list-container+userBrick机制，可以随便搞动态。
brick:
"basic-bricks.list-container",
properties:
containerStyle:
display: "grid",
gap: "20px",
gridTemplateColumns:
"repeat(auto-fill, minmax(130px, 1fr))"
,
useBrick:
brick:
"presentational-bricks.entry-card-item",
transform:
cardTitle: "@objectName",
id: "@objectId",
iconColor: "@iconColor",
icon: "@icon",
urlTemplate:
"$APP.homepage/@objectId"
# modal,drawer 等弹窗容器(默认不可见)类型的构件：
- 设置portal: true
- 不要设置bg: true
# 搜索框都放在 search-bar 里面，这个构件已经按设计做好了间距
searchable-table足够强大，但有些时候也不够灵活，故专门开发了search-bar容器，用于常见的search-bar+brick-table。不要再自己写 css 啦
#在表格里面添加链接，不要用general-button type=link，而是用brick-link
因为：
- button 会有 margin-left
- button 的文字不能拖动选择复制
# 复杂的数据加工，记得我们除了有 pipe 之外，还可以直接写 js 表达式
注意transform里面的<% %>
"columns": [
"title": "任务数",
"dataIndex": "issues.length",
"key": "issues",
"useBrick":
"brick": "presentational-bricks.brick-value-mapping",
"transform":
"value": "<% _.filter(DATA.rowData.issues, item => item.resolution || item.resolution===\\"\\").length + \\" / \\" + DATA.rowData.issues.length %>"
,
"properties":
"mapping":
"*":
"color": "blue"
,
"title": "完成进度",
"dataIndex": "progress",
"key": "progress",
"useBrick":
"brick": "presentational-bricks.basic-progress",
"transform":
"value": "<% Math.round(_.filter(DATA.rowData.issues, item => item.resolution || item.resolution===\\"\\").length/DATA.rowData.issues.length*100) %>"
,
"properties":
"configProps":
"size": "small"
,
"value": 75,
"colorMap": [
"progress": 60,
"color": "red"
,
"progress": 80,
"color": "orange"
,
"progress": 100,
"color": "green"
],
"type": "line"
]
最终效果是：
# 根据不同的条件触发不同的动作
- 可以通过框架提供的if能力，但那个意味着需要写两个，他控制粒度只能到brick级别
- 用script-brick提供的条件事件。如下，根据 url 参数是否具备fullscreen参数来做不同的渲染
以上就是今天关于优维低代码的分享，截止这一期基于构建框架的代码开发的所有内容都分享完了，希望对你有所收获！
以上是关于优维低代码：Best Practice的主要内容，如果未能解决你的问题，请参考以下文章