best practice是什么意思、读音 优维低代码：Best Practice

大家好，如果您还对best practice是什么意思、读音不太了解，没有关系，今天就由本站为大家分享best practice是什么意思、读音的知识，包括优维低代码：Best Practice的问题都会给大家分析到，还望可以解决大家的问题，下面我们就开始吧！

1、优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

2、《编排详解：BestPractice》

3、#Storyboard最佳结构

4、我们能看到很多provider是在bricks[]定义的，比如：

5、{\n"bricks":[\n{\n"brick":"providers-of-cmdb.instance-api-post-search",\n"bg":true\n},\n{\n"brick":"providers-of-cmdb.cmdb-object-api-get-object-all",\n"bg":true\n}\n{\n...\n}\n]\n}Menu重复定义

我们能看到很多同学将menu抽出一个函数，然后在ts里面直接调用，但实际上这样生成的storyboard.json也是每个path都定义了一次的。

6、有人会说，有什么关系呢，反正我就一个函数嘛。因为生成的storyboard.json越大，意味着页面首次加载越慢，大伙看下162目前的bootstrap接口的数据量及耗时就知道了

7、{\n"app":{"name":"敏捷管理","id":"agile","homepage":"/agile"},\n"routes":[\n{\n"path":"${APP.homepage}",\n"menu":{\n...\n},\n"providers":[\n"providers-of-cmdb.instance-api-post-search",\n"providers-of-cmdb.instance-api-get-detail",\n"providers-of-cmdb.cmdb-object-api-get-object-all",\n"providers-of-cmdb.instance-api-delete-instance",\n"providers-of-cmdb.instance-api-update-instance-v2",\n"providers-of-cmdb.instance-api-create-instance",\n"providers-of-cmdb.instance-api-aggregate-count-v2",\n"providers-of-cmdb.instance-api-import-instance",\n"providers-of-cmdb.instance-api-group-instance",\n"providers-of-topboard.topboard-api-create-issue",\n"providers-of-topboard.topboard-api-create-comment",\n"providers-of-topboard.topboard-api-update-comment",\n"providers-of-topboard.topboard-api-update-issue",\n"providers-of-topboard.topboard-api-update-issue-step",\n"developers.provider-providers-sub-menu",\n"developers.provider-service-data",\n"developers.providers-of-brick-story",\n"developers.providers-of-brick-docs",\n"providers-of-notify.oplog-api-list-operation-log"\n],\n"type":"routes",\n"routes":[\n...\n]\n}\n]\n}\n\n

#多用事件回调（Callback）

8、上面说到，provider都定义在一级路由，那这里有同学可能会说，调用了provider后我希望弹出提示框呢，怎么搞？

9、事实上，很多时候也是因为此，所以要多次定义provider

10、框架提供了新的callback能力，可以直接在callback写对应的处理，更加简单直接，代码量直接少1/4。

11、{\nbrick:"presentational-bricks.modal-confirm",\nproperties:{\nid:"sprint-complete-confirm",\ntitle:"确定关闭迭代？",\ncontent:"未完成任务将转移到需求池"\n},\nevents:{\n"confirm.ok":[\n{\ntarget:"providers-of-cmdb\\\\.instance-api-update-instance-v2",\nmethod:"resolve",\nargs:[\n"_SPRINT",\n"${sprintId}",\n{\nstatus:"completed"\n}\n],\ncallback:{\nsuccess:[\n{\naction:"message.success",\nargs:["迭代关闭成功，进入下一个迭代"]\n},\n{\naction:"history.push",\nargs:["${APP.homepage}/product/${productId}/sprint"]\n}\n],\nerror:{\naction:"handleHttpError"\n}\n}\n},\n\n\n]\n}\n}

另外，大伙是否注意到message.success，我们已经将presentational-bricks.brick-utils的能力封装到框架了，意味着不用再写下面的定义了

12、{\nbrick:"presentational-bricks.brick-utils",\nbg:true\n}

#callback的时候别只写success，而不写error

13、如果是单元测试的话，这就是路径没覆盖。

14、#什么时候provider应该用id来调用

15、如果有用到provider的暂存数据能力，比如调用了updateArgs，updateArgsAndExecute，setArgs，setArgsAndExecute，这种情况下就应该去声明id，用id来调用。

16、如果直接providers-of-xx.xxx调用的话，很容易就被其他编排者污染了你的参数。

17、#尽量依照调用顺序去传递数据，不要去改别人内部的东西

18、场景一：表格里面有个按钮去调用provider

19、{\n"brick":"presentational-bricks.brick-table",\n"properties":{\n"columns":[\n{\n"title":"Tools",\n"width":"180px",\n"useBrick":[\n{\n"brick":"basic-bricks.general-custom-buttons",\n"transform":{\n"dataSource":"@{rowData}"\n},\n"properties":{\n"isMoreButton":true,\n"alignment":"start",\n"customButtons":[\n{\n"isDropdown":false,\n"tooltip":"ActiveIssue",\n"icon":"like",\n"eventName":"issue.like",\n"buttonType":"link"\n}\n]\n},\n"events":{\n"issue.like":[\n{\n"target":"#updateProvider",\n"method":"executeWithArgs",\n"args":[\n"_ISSUE",\n"${EVENT.detail.instanceId}",\n{"status":"active"}\n]\n}\n]\n}\n}\n]\n}\n]\n}\n}

大伙注意到，数据的传递方向是table->button->provider。尽量不要在某个地方去给provider去updateArgs

20、现在我们交互原子构件（比如button、custom-buttons、brick-link）都具备数据（dataSource或detail字段）的暂存能力了

21、场景二：点击按钮弹出modal，modal里面有个form表单

22、这个场景比较复杂，现在还没有一个最佳实践，用新的customtemplate封装吧。准备后面专门做个modal-form来解决

23、#在没有地方暂存数据的时候，记得htmlelement是可以任意存储数据的

24、事实上，你可以在event或者lifeCycle的时候，给某个构件写入任意属性去暂存数据，这样在这个构件的事件发出来的时候，你可以通过${EVENT.target.xxx}获得数据

25、{\nbrick:"agile.comment-brick",\nproperties:{\nid:"issue-comment",\nplaceholder:"说点什么"\n},\nevents:{\n"add.comment":{\ntarget:\n"providers-of-topboard\\\\.topboard-api-create-comment",\nmethod:"resolve",\nargs:[\n{\nbody:"${EVENT.detail.body}",\nauthor:[\n{instanceId:"${SYS.userInstanceId}"}\n],\nissue:[\n{\ninstanceId:"${EVENT.target.issueInstanceId}"\n}\n]\n}\n],\ncallback:{\n\n\n}\n}\n}\n}\n\n

#动态构件列表渲染

26、general-card-list卡片列表我们封的比较死，只能使用到里面的card-item，而且他是一个老版的template，很难用事件来触发他更新数据，怎么办？我们现在有个神奇list-container+userBrick机制，可以随便搞动态。

27、{\nbrick:\n"basic-bricks.list-container",\nproperties:{\ncontainerStyle:{\ndisplay:"grid",\ngap:"20px",\ngridTemplateColumns:\n"repeat(auto-fill,minmax(130px,1fr))"\n},\nuseBrick:{\nbrick:\n"presentational-bricks.entry-card-item",\ntransform:{\ncardTitle:"@{objectName}",\nid:"@{objectId}",\niconColor:"@{iconColor}",\nicon:"@{icon}",\nurlTemplate:\n"${APP.homepage}/@{objectId}"\n}\n}\n}\n}\n\n

#modal,drawer等弹窗容器(默认不可见)类型的构件：

28、#搜索框都放在search-bar里面，这个构件已经按设计做好了间距

29、searchable-table足够强大，但有些时候也不够灵活，故专门开发了search-bar容器，用于常见的search-bar+brick-table。不要再自己写css啦

30、#在表格里面添加链接，不要用general-buttontype=link，而是用brick-link

31、#复杂的数据加工，记得我们除了有pipe之外，还可以直接写js表达式

32、{\n"columns":[\n{\n"title":"任务数",\n"dataIndex":"issues.length",\n"key":"issues",\n"useBrick":{\n"brick":"presentational-bricks.brick-value-mapping",\n"transform":{\n"value":"<%_.filter(DATA.rowData.issues,item=>item.resolution||item.resolution===\\"\\").length+\\"/\\"+DATA.rowData.issues.length%>"\n},\n"properties":{\n"mapping":{\n"*":{\n"color":"blue"\n}\n}\n}\n}\n},\n{\n"title":"完成进度",\n"dataIndex":"progress",\n"key":"progress",\n"useBrick":{\n"brick":"presentational-bricks.basic-progress",\n"transform":{\n"value":"<%Math.round(_.filter(DATA.rowData.issues,item=>item.resolution||item.resolution===\\"\\").length/DATA.rowData.issues.length*100)%>"\n},\n"properties":{\n"configProps":{\n"size":"small"\n},\n"value":75,\n"colorMap":[\n{\n"progress":60,\n"color":"red"\n},\n{\n"progress":80,\n"color":"orange"\n},\n{\n"progress":100,\n"color":"green"\n}\n],\n"type":"line"\n}\n}\n}\n]\n}

最终效果是：

33、#根据不同的条件触发不同的动作

34、以上就是今天关于优维低代码的分享，截止这一期基于构建框架的代码开发的所有内容都分享完了，希望对你有所收获！

关于best practice是什么意思、读音，优维低代码：Best Practice的介绍到此结束，希望对大家有所帮助。