The first way is to provide a front-end services of a component library , such as Element, iView, Ant Design , development method at this time is Developer : patchwork assembly code with the page, and then write the code logic.
The second way of front-end services , providing visual page assembly system, front-end engineering system output source after the assembly, through visualization template generation projects, developers do not need to focus on front-end components, only need to write code logic, there are many frameworks tools can refer to.
The ultimate way of the front end of the service , is a developing IDE directly, writing the complete dynamic logic also IDE.
Visualization is based build configuration of the HTML Tree, Data Fusion, and organic Dynamic Logic. Visual interaction for modifying the configuration data to implement generated and updated pages. So it is necessary first of all to achieve the configuration of development, can greatly improve the efficiency of front-end development.
Related patterns:
Dynamic components : a configuration data structure, in response to the dynamic rendering component .
Tree : the tree structure, wherein each internal node represents a test attribute, each branch represents a test output, each leaf node represents a category .
Mediator Mode: unified management package, the plurality of objects between communication dependent. Each object does not need explicit formula of mutual references, coupling it loose .
Page Subdivision:
FilterBox : time , radio , cascade, query button to generate a query parameter control data below.
IndexCardBox : The FilterBox parameter transfer interfaces , display returns resulting data .
trendBox : According FilterBox filter parameters, and IndexCardBox index card select tune the interface to show trends .
Procedure flow chart:
Global store.js
1, derive an example vue, status, and manages the communication between page components, to achieve lightweight page store.
2, the maintenance, the formation of dynamic path typeMap. Use vue asynchronous dynamic component. Show the desired configuration page component tree, dynamic rendering, and achieve page structure of the configurable data.
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 获取配置项，监听变化及时更新状态。