前端服务化的第一种方式是提供一套组件库, 如element,iview,ant design,此时开发人员的开发方式为: 在代码中用组件拼凑页面, 然后写代码逻辑.
前端服务化的第二种方式, 是提供页面可视化组装系统, 这个系统输出组装后的前端工程源码,通过可视化生成模板工程, 开发人员不需要关注前端组件, 只需要编写代码逻辑,也有不少框架工具可以参考。
前端服务化的终极方式, 是直接提供一个开发的 IDE, 将动态逻辑的书写也在 IDE 中完成。
可视化搭建的基础是配置化,将HTML Tree, Data 和 Dynamic Logic有机融合。可视化的交互用来修改配置数据来实现页面的生成和更新。所以需要首先实现配置化开发,也能大大提高前端开发的效率。
相关模式:
动态组件:根据配置化数据结构,动态渲染响应的组件。
决策树:树形结构,其中每个内部节点表示一个属性的测试,每个分支代表一个测试输出,每个叶节点代表一种类别。
中介者模式:统一管理封装,多个对象之间的通信依赖。各对象不需要显式的相互引用,使其耦合松散。
页面分区:
FilterBox:时间,单选,级联,查询按钮,生成查询参数控制下面的数据。
IndexCardBox:根据FilterBox参数调接口,展示返回所得数据。
trendBox:根据FilterBox筛选参数,和IndexCardBox指标卡的选择调接口展示趋势。
程序流程:
全局store.js
1、 导出一个vue的实例,管理页面各组件之间的状态和通信,实现页面轻量级store。
2、 维护,动态组建的路径 typeMap。使用vue异步动态组件。配置页面所需展示的组件树,动态渲染,实现页面结构与数据的可配置化。
3、根据中介者模式实现模块之间的参数依赖。各模块可向全局发送state状态,根据stateLoginMap中的依赖关系,收集参数传入其他模块,并触发钩子函数更新数据。
模块Box
1、this.$loaded加载状态:
异步组件,初始化data中loading设为false,手动调用this.$loaded(true)转换状态;
同步组件,会在mounted钩子中自动调用this.$loaded(true)转换状态;
this.$loaded(true)标志完成加载并已经向全局发送state状态,
被依赖的模块的会在模块loading状态全为true后,才能触发paramsChange钩子.
2、 paramsChange钩子,接收变化
在依赖state变化后,会组装成params传入模块,触发模块的paramsChange钩子。
从this.store.params中获取最新的参数,更新数据展示。
3、 this. $commit 提交state变化
触发全局中 [components]-refresh向顶层发送筛选参数,自定义方法覆盖storeMixins自动的赋值,合并到全局的state对象中。
模块Box-filterBox
组件树components和动态逻辑logicMap完全由store控制。
1、 组件树配置。如下一个简单下拉选项,可见
type为组价类型,
refKey为组件的唯一识别,
paraKey为组件向全局输出参数的字段名,
options为组件展示需要的数据,可以异步赋值
2、 动态逻辑。有两种形式
一种按照决策树的算法结构,如上logicMap,实现简单的依赖关系。可实现当plus_type筛选组件选择formal值时,渲染对应数组内的组件;当选择prob值时,渲染另外状态的组件。
更复杂的动态逻辑,在filterBoxRefres钩子函数中实现。在filterBox的筛选项变化时,会触发类型为watch的钩子函数,可修改组件的渲染状态;在初始化加载完以及点击查询按钮时,会触发类型为emit的钩子函数,可以整理参数的结构再下发给依赖的模块
组件-selectFilter
普通模块可以使用各种通用组件库,但FilterBox模块的组件需要自行封装来匹配模块的运行。
1、 this.$updateFilter()向上级模块发送选择的值。
同步或异步初始化完成,选择变化,显示隐藏转换等状态变化都需要及时调用更新状态值,便于更新筛选组件之间的动态更新。
2、this.store 获取配置项,监听变化及时更新状态。