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