项目总结（一）配置化前端开发

 

　　前端服务化的第一种方式是提供一套组件库, 如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 获取配置项，监听变化及时更新状态。

转载于:https://www.cnblogs.com/banyue/p/11106716.html