平湖城乡规划建设局网站,网站改手机版,深圳网站建设网络推广公司,微信公众号平台登录入口2023.3.8#xff0c;我在组内进行工作汇报。内容记录如下#xff1a;
本次重构的特点
改动大影响后续开发
所以有必要进行工作汇报#xff0c;让组内同事了解代码的改动与现状。
为什么要重构代码#xff1f;
正在开发的数据报告模块包含大量 widget 功能#xff0c;…2023.3.8我在组内进行工作汇报。内容记录如下
本次重构的特点
改动大影响后续开发
所以有必要进行工作汇报让组内同事了解代码的改动与现状。
为什么要重构代码
正在开发的数据报告模块包含大量 widget 功能并且它和仪表板模块中已有的 widget 功能大部分是相同的。 当然数据报告模块会新增一些内容新增“维度标签”组件、“度量标签”组件等。也会有一些局部的修改。
那么需要复用widget 代码。但是现在的代码不能直接复用所以需要重构。
重构要解决的两个问题
widget代码的位置widget代码的内容
widget代码的位置
问题
原先 widget 代码是在 Dashboard 模块下需要把它挪出来。
解决方案widget 独立成包
首先要明确“widget 包对外只导出一个组件类似 echarts 的调用方式所有操作都在 widget 包内处理” 是无法实现的。 因为 WidgetView.vue 和 WidgetSettingsPanel.vue 是分开调用的。
所以 widget 包需要对外导出很多内容。使用的时候按需调用
templateWidget :datadata /WidgetSourceDataDialog :datadata :dialogVisibledialogVisible /
/templatescriptimport { Widget } from bi/widget;import { WidgetSourceDataDialog } from bi/widget;import { updateRenderData } from bi/widget;
/scriptwidget 独立成包。单独放在一个仓库中。 和主应用的代码分开存放这样独立性更高。代码耦合性降低有利于维护代码。
确定了方案开始施行。但是不到两天就进行不下去了遇到两个非常棘手的问题
麻烦1widget - a - b - c主应用中的很多内容也被迫独立成包
widget 包中引用了主应用的很多内容
commonUtils 工具方法globalConst 业务全局常量src/components/ui.vue 全局ui组件src/components/业务组件.vue 全局业务组件不止 widge 用到其他模块也会用到dataset/api.js
这些内容不应该放在 widget 包中。但是放在主应用中的话widget 又引用不到了。 可以把这些内容都当作参数调用 widget包的组件和方法时传参进去。但这样很不合理。
所以只能把这些内容也独立成包这样包和包之间可以互相调用了 But这是一个连锁反应如果 widget 依赖aa独立成包了。a又依赖了b同理b也需要独立成包。 这样一步步找下去主应用中的大部分代码都被提溜起来了主应用就不剩多少东西了。。 会出现这种情况是因为之前的代码之间互相引用比较随意导致现在重构难以进行。以后的开发要吸取教训
麻烦2少了一层 namespace
原先引用的时候可以把文件名看作命名空间。比如下面两个方法都叫 barHelper但是能知道一个是拼样式的bar工具类一个是拼数据的bar工具类。
import { barHelper } from ./styleUtils.js;
import { barHelper } from ./dataUtils.js;widget独立成包后再调用的时候有统一的入口。这时候看到 barHelper就不确定是做什么的了。应该改成类似 barStyleHelper 的名字才合理
import { barHelper } from bi/widget;以上两个大麻烦都是我在设计方案之初没有预料到的。尤其是第一个麻烦工作量巨大相当于要把整个项目中的代码重新梳理一遍。而且改动不是渐进性的必须一次改完不然项目跑不起来。
我当初选中这个方案就是因为看中它分割的彻底性。现在不得不放弃这个方案也是因为它分割的太彻底了改动的工作量太大。
换一个方案
widget 代码还放在主应用中只是从 Dashboard 文件夹下挪出来直接放到 src 下
widget代码的内容
重构要解决的第二个问题widget代码引用了外部环境主要是仪表板
外层组件 provide/props 提供进来的的一些参数widget 组件本身主动调用 store 中的内容
dashboardPalette;
dashboardTheme;
dashboardWidgetBgColor;
dashboardPermission
dashboardIsReadonly;
dashboardSize
pageType;解决方案appType
store中新增全局变量 appType标志 widget 当前环境的类型dashboard / dataWord。 在 widget 代码中统一使用 appXXX
appXXX appType dashboard ? dashboardXXX : dataWordXXX;在 DashboardContainer.vue 的 created 中 setApptype(“dashboard”) 在 DatawordContainer.vue 的 created 中 setApptype(“dataWord”)
