2019年打造通用MIS平台彻底释放前后端人力.pdf

1、打造通用 MIS 平台，彻底释放前后端人力用可视化的方式让MIS系统开发提速至少20倍即：信息管理系统什么是 MIS？为什么要通用 MIS？需要通用化适合通用化需求最多缺乏成就感重复劳动最多功能相似度高功能性为主、视觉要求不高采用什么方式开发？jQueryMVVM完全声明式命令式部分声明式如何实现？简化组件使用方式Formtitle:string data:object onSubmit:Function Formtitle:string initApi:string api:string redirect:string 传统组件高级组件固化行为高级组件调用过程可简化成节点配置+配置节点UI

2、组件行为实现渲染器来个简单栗子用代码实现用配置实现再来个复杂点的栗子用代码实现用配置实现Xxx 列表分类1分类2分类3新增 条件检索 通过关键字搜索搜索批量删除批量标注Xxx 列表分类1分类2分类3新增 条件检索 通过关键字搜索搜索批量删除批量标注DialogAjaxDialogDialogDialogAjax行为是可固化的初始数据不指定传递 data指定 API根据 controls 配置渲染表单&与用户完成交互验证提交指定 API指定接收组件指定页面地址开始结束Form动作是可枚举的 动作（Action）发送 Ajax打开弹框关闭弹框刷新目标提交表单复制内容页面跳转。技术选型：Typesc

3、ript+React具体技术实现配置化原理总结用户JSONRenderer ARenderer BRenderer Component 1Component 2Component 3Component 4Component PageButtonCRUDTableFormColumnsTextImageOperationsTextButton解决渲染过程 先注册渲染器/page/page/body/1/crud/page/body/0/button/page/body/1/crud/filter/form/page/body/1/crud/table/n/text/page/body/1/cru

4、d/table/n/operation/page/body/1/crud/table/page/body/1/crud/filter/form/0/text解决渲染过程 完成节点渲染如何管理数据？State?Redux?MobX?MobX State Tree!如何管理数据？Store Factory（HOC）Renderer(渲染器)动态创建与销毁 store 并下发 建立store间树形关系 维系数据原型链Store Factory（HOC）Renderer(渲染器)动态创建与销毁 store 并下发 建立store间树形关系 维系数据原型链Renderer(渲染器)如何管理数据？Page

5、CRUDTableRow数据扩充数据原型链如何满足联动需求显隐联动数据联动手动更新自动更新visibleOn 表达式reload 目标组件自动监听 依赖变化组件间如何通信建立一个作用域链 提供渲染器将自己注册进来的接口 提供根据名字查找组件服务Scoped（HOC+Context）Renderer(渲染器)如何满足视图定制需求丰富自身组件TPL开放组件定制渲染器架构图FactoryJSONJSX.ElementPageFormCRUDWizardTextActionButtonSelectNumberTabsModalDrawer渲染器HOCQuickEditableCopyableScope

6、dPopOverableStoreServiceFormCRUDTabsTPLDrawerSelectNumberEditorRichTextImageFile组件LayoutLazyComponentJSON 编辑器（MonacoEditor）+JSON Schema如何打造编辑器？可视化编辑器如何打造编辑器？PageButtonCRUDTableFormColumnsTextImageOperationsTextButton可视化编辑器实现原理节点可定位 添加编辑交互Ed