BI 数据可视化平台建设（2）—筛选器组件升级实践

news2024/11/29 11:34:47

作者：vivo 互联网大数据团队-Wang Lei

本文是vivo互联网大数据团队《BI数据可视化平台建设》系列文章第2篇 -筛选器组件。

本文主要介绍了BI数据可视化平台建设中比较核心的筛选器组件， 涉及组件分类、组件库开发等升级实践经验，通过分享一些对交互和业务耦合度高的组件开发迭代的思考，希望可以给正在做组件重构解耦的读者带来启发。

往期系列文章：BI 数据可视化平台建设（1）—交叉表组件演变实战

一、引言

BI产品通常包含大量复杂的数据信息，需要对其进行快速和准确的处理和分析。筛选器可以帮助BI产品的用户快速地定位所需信息，并从海量数据中筛选出有用的数据，以便进行深入的分析和决策。敏捷BI作为公司内部用户数最多的可视化平台，随着平台的业务增长和版本迭代，其筛选器功能也越来越丰富和完善，旧的设计架构也显得越来越臃肿且难以维护，为了提高筛选器使用的稳定性和降低后续迭代维护成本，筛选器的架构升级已经不可避免了，本文主要给大家介绍一下筛选器组件的架构升级实践经验。

二、前期设计

2.1 组件选型

图片

前期筛选器组件的职责和交互比较简单，主要是对图表数据进行单向的数据过滤，并没有应用到其他的业务场景中，所以前期的组件设计主要以 业务组件 的思路进行开发实现。

2.2 组件分类

组件类型主要可以分为业务组件和通用组件两种，它们在组件的状态管理和界面渲染的设计和实现上是完全不同的。

图片

但无论是业务组件或者通用组件都具备组件本质所包含的三个性质 扩展、通用、健壮：

图片

  • 扩展性：在原有组件基础上可 二次封装 扩展成新的组件符合设计的开闭原则。

  • 通用性：根据组件接受的参数和组件中与业务的解耦比来衡量组件的通用性，并不是通用性占比100%的组件就是最好的组件，需要根据 不同的场景 分析。

  • 健壮性：避免组件中参数处理和函数执行过程可能出现的奔溃和错误导致程序的直接挂断，单测以对组件内部 做好边界处理，异常错误的捕获来衡量这一标准。

因此两种组件类型没有绝对优劣之分，重要的是在保证组件设计的基本原则不变的情况下，根据不同的业务场景和需求选择合适的类型 。无论哪种组件，随着不断扩展，使其通用性提升，必然就会降低组件的易用性质；而不断丰富一个组件，也会导致其组件代码过长、组件使命不单一、不易读、不易维护；因此组件设计除了要保证组件的基本性质，还要通过明确组件职责、组件拆分粒度以及良好的代码结构和Api设计规范对组件的迭代进行约束，避免代码逻辑的过度叠加和膨胀。

2.3 背景痛点

旧版筛选器组件设计存在维护成本高且问题BUG多等问题，主要由两个原因造成，第一个是业务发展，随着业务的快速增长，筛选器组件的功能也越来越丰富和完善，由原来的单一功能升级成可以支持数据预警、个性化分析等多种业务场景的核心模块；第二个是缺乏规范约束，主要是缺少良好的代码结构和清晰的组件职责等规范约束，导致业务逻辑过度叠加，粒度拆分不合理，文件多，且文件名不规范。最终导致了筛选器组件的稳定性越发不可控。

图片

图片

由于前期设计不合理和缺乏规范约束，筛选器组件经过了一段时间的野蛮式迭代扩展带来了以下的痛点问题：

  • 重复代码多，复用性差：相同的业务逻辑需要维护多份代码，导致出现bug的概率大大增加，后期维护成本增加；

  • 业务耦合度高，缺乏设计模式进行管理：更新迭代过程中处理逻辑需要兼容多种场景代码越来越复杂，导致问题难以跟踪，难以定位问题意味着你可能需要花大部分的时间处理问题；

  • 编码风格不一致，维护成本高： 项目主要技术栈是Vue，但是代码风格有大部分格使用的React的jsx形式进行开发；项目存在多人维护，个人技术参差不齐；导致后续学习成本增加；

  • 组件嵌套层级深，存在双向数据流：不符合Vue 单向数据流状态管理理念，无法追踪局部状态的变化，增加了出错时 debug 的难度，经常出现修改一个模块bug而引起其他模块bug的情况。

三、新版架构设计

3.1 设计思路

旧版的组件随着业务发展迭代，已经混杂着大量的业务逻辑，组件耦合严重，职责也越发不清晰，因此为了合理的划分组件职责和清晰代码结构，新的架构设计将基于 通用组件 的设计思路，将筛选器组件抽离出BI业务；从BI项目的架构、技术选型、文档使用等多个方面进行考虑，在原来的基础上改造太复杂，可行性低，所以搭建了一个新的项目，将之前所有的筛选器组件迁移到新项目上，稳定后替换BI项目上所有旧版筛选器组件，后续统一只需维护一个组件库（bi-filters）。

图片

3.2 实现方案

筛选器组件库（bi-filters）主要 基于Vue CLI 的 开发/构建目标/库 能力以及 Lerna 包管理工具 进行设计开发，这种组件库设计集成了以下特点：

  • 按需引入：每个UI组件都是一个npm包，多语言、工具和样式都是自成体系的npm包，可被业务或UI组件灵活引用，同时天然支持按需加载。

  • 配置简单：如果需要进行构建处理，那么每个npm包可单独进行构建配置，配置变得更加简单。结合Vue CLI的构件库能力，对于简单UI组件的构建几乎可以做到webpack零配置。

  • 独立部署：组件库的版本迭代可以更快，不需要进行整体构建，每个组件可单独快速发布。

1. 利用 Lerna工具进行多包管理，快速对组件库进行版本发布

图片

组件库目录结构：

图片

图片

2. 组件设计和实现

参考 装饰器设计模式，对组件进行抽象设计，从而达到业务状态与 UI 状态隔离，UI 状态与交互呈现隔离的目的。具体实现是先按功能将组件拆成展示层，逻辑层，容器层，达到组件分层可复用。再通过

$attrs/$listeners对antd组件进行二次封装，抽离成在筛选器组件库内的公共组件，达到交互可组合。最终使得组件边界清晰，符合设计规范中提到的开闭原则、单一职责原则、里氏替换原则。

以文本下拉筛选器组件（TextDropDownFilter）实现为例：

图片

（1）按功能将组件拆分成 容器层、逻辑层（搜索框逻辑层、 下拉列表逻辑层 ）、展示层（搜索框展示层、下拉列表展示层）：

图片

图片

（2）BI项目中使用 ：引入筛选器组件后， 在BI应用层处理业务场景，将处理业务后的状态信息通过 Vue 插槽(Slots)的方式传递给底层的筛选器组件 。

<!-- page.vue一 -->  
<TextDropDownFilter>
  <template #addonSearchAfter>
    <!-- 业务场景一 -->            
    <a-tooltip v-if="xxx">
       <BIIcon type="icon-jilian" class="btn-jilian" v-show="xxx"></BIIcon>
    </a-tooltip>
    <!-- 业务场景二 -->             
    <a-tooltip v-if="xxx">
       <AIcon type="warning" theme="filled" class="btn-warning"></AIcon>
    </a-tooltip>
  </template>  
</TextDropDownFilter>

（3）搜索框逻辑层：接收业务处理后的状态，进行不同的UI组合展示

<!-- SearchHandler.vue一 -->  
<template>
  <div class="bd-search" :class="{ 'active': inputActive }">
    <!-- 基础搜索框组件 一 --> 
    <Search
      v-bind="$attrs"
      :searchValue="searchValue"
      :placeholder="placeholder"
      @searchItem="handleSearchItem"
      @pressEnter="handlePressEnter"
      @focus="handleFocus"
      @blur="handleBlur"
    >
    </Search>
    <!-- 业务层传入的UI 一 -->  
    <slot name="addonSearchAfter"></slot>
  </div>
</template>

（4）搜索框展示层：由 antd 基础组件组成，提供交互单一且可复用的UI组件

<!-- Search.vue一 -->    
<template>
  <AInput
    class="common-search-input"
    :placeholder="placeholder"
    :value="searchValue"
    allow-clear
    @change="change"
    v-on="$listeners"
 
    @pressEnter="$emit('pressEnter', $event)"
  >
    <AIcon slot="prefix" type="search" />
  </AInput>
</template>

3. 最后利用 Vue CLI 的构建库功能，对不同类型的筛选器组件进行单独构建打包

vue cli 的构建库能力可以通过 --target 选项指定不同的构建目标。它允许你将相同的源代码根据不同的用例生成不同的构建。

图片

图片

在组件库项目的 packages 目录下，每一个筛选器组件的目录下都需要创建 package.json文件，用于组件的构建信息配置：

{
  "name": "@bigdata/TextDropDownFilter",  //包名
  "version": "0.0.0",                     // 版本号
  "private": false,                       // 为true时不会被发布
  "main": "dist/编译文件名.umd.min.js",
  "scripts": {
    "build": "vue-cli-service build --target lib --name 编译文件名 --dest dist ./index.js",
    "lint": "",
    "test:unit": ""
  },
  "files": [
    "dist"
  ],
  "author": "",
  "license": "ISC",
  "description": ""
}

四、效果收益

1. BI项目整体代码量减少，组件目录结构清晰，只需要专注维护业务逻辑

图片

2. BI业务抽离后，筛选器组件可进行独立维护迭代，减少代码耦合，只需专注功能交互和性能优化，提高组件稳定性。

图片

五、总结

从上述的升级过程可以看出，组件的抽象与抽象粒度是没有一成不变的统一标准，也没有对与错。组件的设计更多的应该去关注如何适配不同的业务场景和需求要求，追求更多的是“适合”。有的时候，同样的业务场景，组件粒度的标准也会随业务场景变化而变化，甚至可能随场景增加而持续重构，因此为了代码更好的维护和分层，以及避免代码逻辑的过度叠加和膨胀，必须制定一些组件抽象的规范加以约束。总的来说，组件开发的方法论可能是相对中立和普适的，但组件库的整体建设方案，与所在的行业和业务有很大的关系。不同的行业领域，对交互展现的掌控程度是不一样的，因此设计组件库方案的时候，应该优先从产品项目的集成关系角度出发看待问题，这样可以保证业务的拓展和可用性尽可能不被技术方案限制。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1215865.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Redis分布式锁(上)

Redis分布式锁(上)

不论面试还是实际工作中&#xff0c;Redis都是避无可避的技术点。在我心里&#xff0c;MySQL和Redis是衡量一个程序员是否“小有所成”的两把标尺。如果他能熟练使用MySQL和Redis&#xff0c;以小化大&#xff0c;充分利用现有资源出色地完成当下需求&#xff0c;说明他已经成长…
阅读更多...
性能测试知多少---系统架构分析

性能测试知多少---系统架构分析

之前有对性能需求进行过分析&#xff0c;那篇主要从项目业务、背景等角度如何抽丝剥茧的将项目的需求抽离出来。在我们进行需求的时候也需要对被测项目的架构有一定的认识&#xff0c;如果不了解被测系统的架构&#xff0c;那么在后期的性能分析与调优阶段将无从下手。 简单系…
阅读更多...
亚马逊EC2服务器搭建Linux系统宝塔环境

亚马逊EC2服务器搭建Linux系统宝塔环境

目录 &#x1f4dd;摘要 &#x1f4a1;引言 一. 购买亚马逊服务器EC2 二. 安装Linux系统 三. 在终端安装宝塔 3.1 安装宝塔 3.2安装成功 四. 配置宝塔 五 应用场景 六 代码案例演示 七 为什么选择亚马逊EC2服务器部署&#xff1f; &#x1f4aa; 可靠性和高可用性 灵…
阅读更多...
jff2文件系统（一）

jff2文件系统（一）

jff2概述 JFFS2全称jouranlling Flash File System Version2,即日志文件系统&#xff0c;是Redhat公司开发的开源闪存文件系统&#xff0c;其前身是JFFS, 最早只支持NOR Flash, 自2.6版以后开始支持NAND Flash&#xff0c; 在闪存上使用非常广泛&#xff0c;同时在嵌入式系统中…
阅读更多...
ChatGPT Plus暂停注册，用户激增压力太大！

ChatGPT Plus暂停注册，用户激增压力太大！

11月15日&#xff0c;OpenAI联合创始人兼首席执行官Sam Altman在社交平台宣布&#xff0c;暂停ChatGPT Plus注册。 Sam表示&#xff0c;在首次开发者大会上发布了自定义GPT、GPT-4 Turbo等一系列重磅产品后&#xff0c;用户激增对服务器产生了巨大压力&#xff0c;不得已才做出…
阅读更多...
Java 各种工具类的使用方法

Java 各种工具类的使用方法

1. 属性拷贝 属性名词和类型相同才能拷贝 import org.springframework.beans.BeanUtils; BeanUtils.copyProperties(dto,wmNews); //dto, wmNews 是两个实体类 dto为源对象&#xff0c;wmNews为目标对象2. list集合转换为string类型 import org.apache.commons.lang3.String…
阅读更多...
分布式教程从0到1【1】分布式基础

分布式教程从0到1【1】分布式基础

1 分布式基础概念 1.1 微服务 微服务架构风格&#xff0c;就像是把一个单独的应用程序开发为一套小服务&#xff0c;每个小服务运行在自己的进程中&#xff0c;并使用轻量级机制通信&#xff0c;通常是 HTTP API。这些服务围绕业务能力来构建&#xff0c;并通过完全自动化部署…
阅读更多...
ECRS工时分析软件：全面提升生产效率和产能管理的利器

ECRS工时分析软件：全面提升生产效率和产能管理的利器

在当今高度竞争的商业环境中&#xff0c;企业需要不断提升生产效率和产能管理以保持竞争优势。ECRS工时分析软件作为一款专业的工具&#xff0c;通过自动导出各种表格和图表&#xff0c;全面涵盖了生产过程中的各种分析和改善活动&#xff0c;为企业提供了提升生产效率和产能管…
阅读更多...
数据库.创建表

数据库.创建表

创建表结构 -- 创建表结构create table tb_user(id int comment ID,唯一标识,username varchar(20) comment 用户名,name varchar(10) comment 姓名,gae int comment 年龄,gender char(1) comment 性别)comment 用户表;
阅读更多...
Freeswitch中CHANNEL_HANGUP外呼挂断事件

Freeswitch中CHANNEL_HANGUP外呼挂断事件

1.CHANNEL_HANGUP外呼挂断事件 事件详细 ################## 外呼挂断&#xff1a;############################# [EslMessage{contentTypecommand/reply, headers3, body0 lines}] 2023-11-16T03:41:33.5140800 INFO c.e.c.v.s.c.i.FsServerEventHandler - eventReceived:…
阅读更多...
洗地机哪个牌子好？2023热门洗地推荐

洗地机哪个牌子好？2023热门洗地推荐

随着科技的不断发展&#xff0c;智能家居产品成为现代生活的一部分。在这个日新月异的时代&#xff0c;人们追求更便捷、高效的生活方式。洗地机作为一款时尚生活必备的清洁家电产品&#xff0c;正逐渐受到人们的关注和喜爱&#xff0c;面对满目琳琅的洗地机&#xff0c;我们该…
阅读更多...
京东联盟flutter插件使用方法

京东联盟flutter插件使用方法

目录 1.京东联盟官网注册申请步骤略~2.安卓端插件配置&#xff1a;3.IOS端插件配置4.其它配置5.京东OAuth授权 文档地址&#xff1a;https://baiyuliang.blog.csdn.net/article/details/134444104 京东联盟flutter插件地址&#xff1a;https://pub.dev/packages/jdkit 1.京东联…
阅读更多...
静态共享代理和静态独享有哪些区别？怎么选择？

静态共享代理和静态独享有哪些区别？怎么选择？

在软件开发中&#xff0c;静态共享代理&#xff08;Static Proxy&#xff09;和静态独享&#xff08;Monostatic&#xff09;是两种常见的软件设计模式。这两种模式在实现方式、使用场景以及优缺点上存在一定的差异&#xff0c;下面将详细介绍它们的区别以及如何进行选择。 一、…
阅读更多...
如何批量在文件名中加标点符号？

如何批量在文件名中加标点符号？

如何批量在文件名中加标点符号&#xff1f;标点符号在文件名中的作用通常是用来分隔不同部分的内容&#xff0c;或者用来表示特定的含义。例如&#xff0c;下划线"_" 可以用来连接文件名的不同部分&#xff0c;使得文件名更易于阅读和理解。另外&#xff0c;使用连字…
阅读更多...
新生儿腿纹不对称：原因、科普和注意事项

新生儿腿纹不对称：原因、科普和注意事项

引言&#xff1a; 新生儿身上出现腿纹不对称的现象在一些家庭中可能引起担忧&#xff0c;然而&#xff0c;了解这一现象的原因以及如何正确处理是非常重要的。本文将科普新生儿腿纹不对称的原因&#xff0c;提供相关信息&#xff0c;并为父母和监护人提供注意事项&#xff0c;…
阅读更多...
通往优秀软件架构师之路：掌握技术核心，修炼基础原理【文中送书，十本任选】

通往优秀软件架构师之路：掌握技术核心，修炼基础原理【文中送书，十本任选】

通往优秀软件架构师之路&#xff1a;掌握技术核心&#xff0c;修炼基础原理 《高并发架构实战&#xff1a;从需求分析到系统设计》《架构师的自我修炼&#xff1a;技术、架构和未来》《中台架构与实现&#xff1a;基于DDD和微服务》《分布式系统架构&#xff1a;架构策略与难题…
阅读更多...
elementui 实现树形控件单选

elementui 实现树形控件单选

实现&#xff1a; <!--author: itmacydesc: 树节点单选 --> <template><div class"about"><el-tree :data"data"ref"tree":props"defaultProps"node-key"id"show-checkboxcheck-strictlycheck-change…
阅读更多...
2-10岁女童冬季穿搭怎么选？麻麻们看这里

2-10岁女童冬季穿搭怎么选？麻麻们看这里

分享适合女宝的羽绒服穿搭 这种黄色真的超好看 吸睛显白怎么穿都好看 长款连帽设计&#xff0c;精致走线 冬天穿时尚又好看&#xff01;&#xff01;
阅读更多...
某个订单项目记录，涉及MQ消息处理、分布式问题、幂等性等问题解决设计

某个订单项目记录，涉及MQ消息处理、分布式问题、幂等性等问题解决设计

文章目录 消息队列&#xff08;Message Queue&#xff09;什么场景下&#xff0c;使用消息队列&#xff1f;消息队列 概述 RabbitMQ 消息队列RabbitMQ 概念名词 概念RabbitMQ 流程 RabbitMQ 安装RabbitMQ 页面介绍Exchange 交换机类型Spring Boot 整合RabbitMQAmqpAdmin 与 Rab…
阅读更多...
Angular 由一个bug说起之二：trackBy的一点注意事项

Angular 由一个bug说起之二：trackBy的一点注意事项

trackBy是angualr优化项目性能的一种方法, 通过返回一个具有绑定性的唯一值, 比如id&#xff0c;手机号&#xff0c;身份证号之类的&#xff0c;来让angular能够跟踪数组的项目&#xff0c;根据数据的变化来重新生成DOM, 这样就节约了性能。 但是如果是使用ngFor循环组件&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023