当前位置: 首页 > news >正文

工作记录:bi重构

2023.3.8,我在组内进行工作汇报。内容记录如下:

本次重构的特点

  • 改动大
  • 影响后续开发

所以有必要进行工作汇报,让组内同事了解代码的改动与现状。

为什么要重构代码?

正在开发的数据报告模块包含大量 widget 功能,并且它和仪表板模块中已有的 widget 功能大部分是相同的。
当然,数据报告模块会新增一些内容:新增“维度标签”组件、“度量标签”组件等。也会有一些局部的修改。

那么,需要复用widget 代码。但是现在的代码不能直接复用,所以需要重构。

重构要解决的两个问题

  1. widget代码的位置
  2. widget代码的内容

widget代码的位置

问题:

原先 widget 代码是在 Dashboard 模块下,需要把它挪出来。
在这里插入图片描述

解决方案:widget 独立成包

首先要明确:“widget 包对外只导出一个组件(类似 echarts 的调用方式),所有操作都在 widget 包内处理” 是无法实现的。
因为 WidgetView.vue 和 WidgetSettingsPanel.vue 是分开调用的。

所以 widget 包需要对外导出很多内容。使用的时候按需调用:

<template><Widget :data="data" /><WidgetSourceDataDialog :data="data" :dialogVisible="dialogVisible" />
</template><script>import { Widget } from "@bi/widget";import { WidgetSourceDataDialog } from "@bi/widget";import { updateRenderData } from "@bi/widget";
</script>

widget 独立成包。单独放在一个仓库中。
和主应用的代码分开存放,这样独立性更高。代码耦合性降低,有利于维护代码。

确定了方案,开始施行。但是不到两天就进行不下去了,遇到两个非常棘手的问题:

麻烦1:widget -> a -> b -> c,主应用中的很多内容也被迫独立成包

widget 包中引用了主应用的很多内容:

  • commonUtils 工具方法
  • globalConst 业务全局常量
  • src/components/ui.vue 全局ui组件
  • src/components/业务组件.vue 全局业务组件(不止 widge 用到,其他模块也会用到)
  • dataset/api.js

这些内容不应该放在 widget 包中。但是放在主应用中的话,widget 又引用不到了。
可以把这些内容都当作参数,调用 widget包的组件和方法时传参进去。但这样很不合理。

所以只能把这些内容也独立成包,这样包和包之间可以互相调用了:
在这里插入图片描述
But,这是一个连锁反应:如果 widget 依赖a,a独立成包了。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”)

相关文章:

工作记录:bi重构

2023.3.8&#xff0c;我在组内进行工作汇报。内容记录如下&#xff1a; 本次重构的特点 改动大影响后续开发 所以有必要进行工作汇报&#xff0c;让组内同事了解代码的改动与现状。 为什么要重构代码&#xff1f; 正在开发的数据报告模块包含大量 widget 功能&#xff0c;…...

java明文数据加密、脱敏方法总结

前言 在一些安全性要求比较高的项目里&#xff0c;避免不了要对敏感信息进行加解密&#xff0c;比如配置文件中的敏感信息。 第一种方法&#xff08;自定义加解密&#xff09; 加解密工具类&#xff1a; public class SecurityTools {public static final String ALGORITHM…...

4N65-ASEMI高压MOS管4N65

编辑-Z 4N65在TO-220封装里的静态漏极源导通电阻&#xff08;RDS(ON)&#xff09;为2.5Ω&#xff0c;是一款N沟道高压MOS管。4N65的最大脉冲正向电流ISM为16A&#xff0c;零栅极电压漏极电流(IDSS)为10uA&#xff0c;其工作时耐温度范围为-55~150摄氏度。4N65功耗&#xff08…...

天梯赛训练L1-018 (大笨钟)

目录 1、L1-018 大笨钟 2、 如果到帮助大家&#xff0c;希望大家一键三连&#xff01;&#xff01;&#xff01; 1、L1-018 大笨钟 分数 10 题目通道 微博上有个自称“大笨钟V”的家伙&#xff0c;每天敲钟催促码农们爱惜身体早点睡觉。不过由于笨钟自己作息也不是很规律&a…...

GCC编译器编译C/C++程序(一步完成、分步完成)

以下内容源于C语言中文网的学习与整理&#xff0c;非原创&#xff0c;如有侵权请告知删除。 参考内容 &#xff08;1&#xff09;GCC 预处理器选项_dllbl的博客-CSDN博客 &#xff08;2&#xff09;Preprocessor Options (Using the GNU Compiler Collection (GCC)) 一、编译的…...

Java8中那些方便又实用的Map函数

简介 java8之后&#xff0c;常用的Map接口中添加了一些非常实用的函数&#xff0c;可以大大简化一些特定场景的代码编写&#xff0c;提升代码可读性&#xff0c;一起来看看吧。 computeIfAbsent函数 比如&#xff0c;很多时候我们需要对数据进行分组&#xff0c;变成Map<…...

如何修复dxgi.dll文件错误?修复方法推荐

如果您使用Windows操作系统&#xff0c;在使用某些应用程序时&#xff0c;可能会遇到dxgi.dll文件错误。这可能会导致应用程序崩溃或无法正常运行。在本文中&#xff0c;我们将探讨如何修复dxgi.dll文件错误。 一.什么是dxgi.dll文件 dxgi.dll文件是Microsoft DirectX图形接口…...

数字化时代,你应该知道的BI

我曾经看到有人在讨论过商业智能BI的部署对于企业是否有实际意义&#xff0c;现在市场的数据已经证明商业智能BI在商业世界中&#xff0c;在企业的实践中证明了自己的价值&#xff0c;得到了广泛的认可。 一、什么是BI 有一点可能很多人没有想到&#xff0c;实际上商业智能BI…...

前端jQuery ajax请求,后端node.js使用cors跨域

前言 跨域&#xff0c;一句话介绍&#xff1a; 你要请求的URL地址与当前的URL地址&#xff0c;协议不同、域名不同、端口不同时&#xff0c;就是跨域。 步入正题 前端&#xff0c;jQuery ajax请求 $.ajax({async: false,method: post,//URl和端口与后台匹配好&#xff0c;当…...

【最重要的 G 代码命令列表】

【最重要的 G 代码命令列表】1. 什么是G代码&#xff1f;2. 如何阅读G代码命令&#xff1f;3. 最重要/最常见的 G 代码命令3.1 G00 – 快速定位3.2 G01 – 线性插值3.3 G02 – 顺时针圆形插值3.4 G00、G01、G02 示例 – 手动 G 代码编程3.4 G03 – 逆时针圆形插补3.5 G20/ G21 …...

好用的公共DNS地址共享

公共DNS服务器地址大全 服务商云公共DNS服务器IP大全114DNS114.114.114.114114.114.115.115DNSPod DNS+119.29.29.29182.254.116.1162402:4e00::DNS 派 电信/移动/铁通101.226.4.6218.30.118.6DNS 派 联通123.125.81.6140.207.198.6cnnicDNS1.2.4.8210.2.4.82001:dc7:1000::1Go…...

C#:Krypton控件使用方法详解(第十三讲) ——kryptonDomainUpDown

今天介绍的Krypton控件中的kryptonDomainUpDown。下面介绍控件的外观属性和Item属性&#xff1a;Cursor属性&#xff1a;表示鼠标移动过该控件的时候&#xff0c;鼠标显示的形状。属性值如下图所示&#xff1a;Text属性&#xff1a;表示控件的显示文本内容&#xff0c;属性值为…...

Git设置SSH Key

一、git 配置 &#xff08;1&#xff09;打开 git 命令窗口 &#xff08;2&#xff09;配置用户名&#xff08;填自己的姓名&#xff09; git config --global user.name “xinyu.xia” &#xff08;3&#xff09;配置用户邮箱&#xff08;填自己的邮箱&#xff0…...

WireShark如何抓包,各种协议(HTTP、ARP、ICMP)的过滤或分析,用WireShark实现TCP三次握手和四次挥手

WireShark一、开启WireShark的大门二、如何抓包 搜索关键字2.1 协议过滤2.2 IP过滤2.3 过滤端口2.4 过滤MAC地址2.5 过滤包长度2.6 HTTP模式过滤三、ARP协议分析四、WireShark之ICMP协议五、TCP三次握手与四次挥手5.1 TCP三次握手实验5.2 可视化看TCP三次握手5.3 TCP四次挥手5.…...

熬夜30天吃透这九大Java核心专题,我收割了3个大厂offer

这次一共收割了3个大厂offer&#xff0c;分别是蚂蚁金服、美团和网易&#xff0c;特意分享这次对我帮助非常大的宝典资料&#xff0c;一共涉及九大核心专题&#xff0c;分别是计算机网络、操作系统、MySQL、Linux、JAVA、JVM、Redis、消息队列与分布式、网站优化相关&#xff0…...

DMHS搭建DMDSC 2节点集群同步到单库

DMHS搭建DMDSC 2节点集群同步到单库环境介绍1 安装DMOCI1.1 关闭数据库实例服务1.2 将DMOCI 复制到源端与目的端的数据库bin目录1.3 对数据库bin 执行目录文件更改用户属组和权限2 启动源数据库服务并配置数据库实例参数2.1 使用DMCSSM启动集群实例2.2 DMDSC源其中一个节点执行…...

一条sql执行很慢可能的原因,如何优化

文章目录 sql怎么会变慢呢?1、大多数情况下很正常,偶尔很慢,则有如下原因2、这条 SQL 语句一直执行的很慢,则有如下原因:慢sql优化数据库中设置SQL慢查询分析慢查询日志慢sql如何让优化索引sql语句1、分页查询优化2、优化insert语句数据库结构优化优化器优化架构优化总结s…...

【设计模式】适配器模式和桥接模式

适配器模式 适配器模式 : 就是将一个类的接口变成客户端所期望的另一种接口&#xff0c;使得原本因为接口不匹配而无法一起工作的接口可以正常工作。属于结构型模式 比方说我有一个A牌子的奶瓶&#xff0c;然后买了个B牌子的奶嘴&#xff0c;不能匹配怎么办? 再买一个转换器…...

被隐藏的过程——预处理

文章目录0. 前言1. 程序的翻译环境和执行环境2. 被隐藏的过程2.1 翻译环境2.2 编译3.2.1 预编译3.2.2 编译2.2.3 汇编2.3 链接2.4 运行环境3. 预处理3.1 预定义符号3.2 #define3.2.1 #define定义标识符3.2.2 #define定义宏3.2.3 #define替换规则3.2.4 #和##3.2.5 带副作用的宏参…...

strace 用法介绍

strace 是什么 strace 是一个可用于诊断和调试的 Linux 用户空间跟踪器。我们用它来监控用户空间进程和内核的交互&#xff0c;比如系统调用、信号传递、进程状态变更等。 strace 作为一种动态跟踪工具&#xff0c;能够帮助我们高效地定位进程和服务故障。它像是一个侦探&…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

从WWDC看苹果产品发展的规律

WWDC 是苹果公司一年一度面向全球开发者的盛会&#xff0c;其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具&#xff0c;对过去十年 WWDC 主题演讲内容进行了系统化分析&#xff0c;形成了这份…...

R语言AI模型部署方案:精准离线运行详解

R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...