axureux中后台管理信息系统通用原型方案 v2_前端公共图表数据大盘方案

作者 | 马一文

d868f342dd51c467db69e25de22a9068.png

程序员中的一种,偶尔吟湿作对,润滑万物 ——子慕大诗人

前言

前端常常会在的业务中后台开发数据统计图表,对于类似 Echarts 这种配置性极强的库,需要花费很多时间查看文档, 一个项目中统计图表大多情况下只占少部分,平时写的不多容易忘记配置,重复开发的效率低。产品经理对于图表的设计个性化明显(今天看到一种样式的图表觉得也挺好,然后就想照搬到自己业务之中),同类型的图表可能样式不一,代码又得重新写。总归给人的感受就是开发效率低,产品设计效率低。

在文章的开始我们先来看看一个前端平常在开发各种数据图表时,可能经历的过程,以 Echarts 为例:

  1. 打开 echarts 官网。

  2. 查看实例界面,参考需要实现的类似的图例,找到合适的实例拷贝需要的实例代码。

  3. 打开业务项目复制代码,发现需要安装依赖,也许通过 html 中 script 引入,也许通过模块方式引入(这种情况下可能还需要配置一下 webpack 解决一些依赖优化的问题)。

  4. 发现细节上和 ui 或者产品原型不符,开始查找文档配置,比如:轴线颜色,刻度颜色,内间距,提示器,文案模版等等。

  5. 做第二个图表的时候,发现和第一个类似都是折线图,但是这次是一个图中有多个折线,ui 在细节上又发生了一些变化,然后重复上面步骤 4。

  6. 一段时间以后,另一个业务项目,再次需要做数据图表。这个时候,想到以前做过,然后找到老项目对比图表,拷贝类似的代码,进行修改,发现细节不一致的地方又开始步骤 4。

因为每次做的图表不一样重复步骤 4、5 几次以后,耗费的时间已经很多了,加上配置代码本身就比较多,2、3个图表就能让代码上一百行。经历过几次这样的折腾以后,可能稍微熟悉了一下 API,但是仍然会觉得每次开发的效率好低。于是就有了今天所做的分享,下面进入正文。

方案

针对公司各个业务中后台项目开发数据统计图表的应用场景,为了解决以上两个效率问题,我想到了通过下面两个方向来做处理:
  • 抽象代码减少应用代码量,傻瓜式配置避免每一个开发者花费时间重复阅读文档 —— 提升开发效率。
  • 统一图表使用风格,减少一定程度个性化,提供图表界面和对应组件代码 —— 提升产品设计效率。
简单来说,就是封装公共图表组件供团队使用,约定统一图表样式,提供可视化界面文档。优点:
  • 只关心更核心的配置、组件抹去配置细节、提升开发效率。
  • 提升产品设计效率、省去设计选择的时间。
缺点:
  • 缺少一定灵活性(抽离常用部分,牺牲灵活性,多用共性)。
  • 公共图表组件开发需要投入成本 。

实施

JS 组件库

目的和方向已经明确,我们可能会第一时间想到,那肯定就是基于三方图表库做一次组件封装,通过 npm 安装依赖,最后再写好文档就行了。现在称它为 JS 组件库方案,那我们来考虑考虑此方案组件库的一个实现和使用流程,以 Echarts 为例:
  1. 新建一个代码库,安装 echarts 依赖。
  2. 新建组件(比如一个折线图组件)。
  3. 封装组件参数,回调方法等。
  4. 如果要兼容 vue,angular,react,组件代码需要写三套兼容,或者通过代码优化和构建处理,一套代码生成多种框架组件。
  5. 定版本,发布组件库。
  6. 写一个网页文档并在网页上展示实例。
  7. 业务系统安装组件库使用。
  8. 如果代码需要升级或者修改 bug,需要重新修改组件库,并发新版本,业务系统重装依赖。
下图为此方案的示意图:

fab33bc836f06b49968a66debe6350c9.png

但是以上的方案带来了一些麻烦和问题:
  • 可能需要兼容多套框架,组件库开发成本增加。
  • 修改 bug 和库升级都需要发版本,每一个业务系统都有可能需要在一个版本之后更新依赖,维护成本增加。

Iframe 方案

而我最初的下手点是通过 iframe + postMessage 来实施了这套方案,下面介绍一下此方案。此方案最终把一个个组件输出为一个静态的页面,通过 iframe 的方式,嵌入到我们的业务系统之中,通过 postMessage 来传递数据、配置和事件绑定。先介绍一下大致开发和使用流程,而后对其优劣做分析。
  1. 新建代码库,安装 echarts 依赖。
  2. 新建页面组件(比如一个折线图组件)。
  3. 封装组件参数,回调方法等。
  4. 打包输出为一个个静态资源页面,发布到静态资源服务器。
  5. 写一个网页文档并在网页上展示实例。
  6. 业务系统不需要安装任何依赖,通过 Iframe 配置 url 引入组件,通过 postMessage 发送配置和数据。
  7. 如果代码需要升级或者修改 bug,重新修改组件库,打包更新静态资源,业务系统不需要重装依赖直接访问就更新。如果存在变化比较大的类似组件,可以考虑输出新版本,比如老版本是 xxx.com/v1/bar.html,新版可以定义为 xxx.com/v2/bar.html,互不影响。
下图为此方案的示意图:

20a6c82d4d01bba9f618613ba788f0c5.png

下面我们来对比一下两个方案:

c777292d03027f815811d948244bb95d.png

优化

稳定性

Iframe 有个比较需要特别谨慎的地方就在于其稳定性上的问题,由于所有业务系统的图表都指向到公共图表项目,都需要对其进行访问,如果出现了问题,那影响是很大的。由于业务系统是分散的,我们在发布新的公共图表项目版本的时候,需要进行一轮测试,测试新版本,首先需要满足的是不影响已有业务系统。于是,针对这两个问题,我们一方面需要严格保障公共图表项目的代码质量,在代码合并权限控制和人为 review 上需要格外重视;一方面可以同样通过 Iframe 的方式,在公共图表的文档网站页面加入一个页面菜单、嵌入所有中后台业务系统的相关页面。由于我们中后台统一接入了公司内部开发的 sso 权限登录系统,因此可以根据当前的登录用户和他的权限,看到他所能够看到的业务系统的图表统计相关的页面。那我们给一个测试用户配置所有业务的权限,就能通过公共图表系统本身查看到所有业务相关界面,以此来做测试验收。也因为如此,公共图表项目本身不仅提供了页面组件给业务中后台系统使用,也同时集合了所有业务系统的数据统计界面,变成了一个真正的数据大盘。到此我们的方案就是一个完整的公共图表数据大盘。

资源大小

在静态资源大小方面,每一个 html 组件,只引入了一个三方图表库和组件本身的一小段 js 代码,并没有引入任何框架,尽可能的减少文件大小。

迭代原则

首先做封装是有成本的,并不是一开始我们就写好所有的组件库,而更多应该是在开发需要某一种图表时,再考虑进行封装,封装的同时不仅要考虑当前版本使用,也要尽量考虑通用性和后期其他项目使用的情况。

纯个性化配置

当然很多情况下需要个性化配置我们的图表,既然当前已经有了公共系统,如果遇到个性化的图表,难道又要让业务系统去安装 Echarts 依赖,然后以旧的模式写配置吗?所以,在公共图表项目内部也提供一个纯个性化配置的图表,也就是没有任何多余封装的组件,配置信息完全需要业务方写好,组件直接调用生成,不做任何处理。这样我们依旧不需要管理依赖,仍然也只是关心配置。

界面优化和约定

如何统一用什么样式的图表,这需要产品、设计和研发一起商量做好约定,这块是需要投入成本的。

多图表库支持

上周在公司内部分享的时候,被问到可以支持多库吗?确实不排除后期需要多库的情况,或者某些图表库不支持我们想用的功能,因此在代码架构配置中做了处理,已经支持多三方图表库存在的情况,具体内容可以看 github 仓库。

Iframe 方案可能会被吐槽的一些问题

  • 阻塞父页面加载:由于单页面框架内使用 Iframe 大部分都是在框架本身生命周期中创建节点,所以并不会阻塞业务本身。
  • 安全问题:因为我们的图表项目是自己写的,并且是纯静态资源,没有接口的输入,也没有任何业务,因此没有任何攻击的价值。
  • 性能低下:因为在 PC 端这样的场景之下,Iframe 本身会带来的性能问题是微不足道的,并且一个界面之中的图表大部分情况下是不会超过 10 个的,即便有 10 多个,也都并不会导致卡顿。配合上缓存策略,图表的加载实际也很快。

代码展示

业务代码在使用组件时,只需要大致下面这些代码,不需要安装任何依赖。

29abab4b7cf76ccf092f6fac06e872d2.png

7e19f6435193a75d28f1ab72e0ad58b2.png

仓库演示

https://dashiren.cn/public-chart/dist/index.html

仓库地址

https://github.com/zimv/public_chart

结语

基于我们需要解决的问题,选择哪一种方案,其实都可以,只是刚好我偏向于 Iframe。从发现问题到解决问题,从提出想法到实施落地,以上便是全部内容,希望能给大家带来一些启发,今天的分享就到这里。

全文完


以下文章您可能也会感兴趣:

  • Mysql redo log 漫游

  • 一个 AOP 缓存失效问题的排查

  • 小程序开发的几个好的实践

  • Web 开发打印总结

  • 小程序中 Redux 的使用

  • 数据可视化过程不完全指南

  • 小型大写字母的用武之处

  • React Native 项目整合 CodePush 完全指南

  • 震惊!JavaScript 竟然可以类型推断!

  • ConcurrentHashMap 的 size 方法原理分析

我们正在招聘 Java 工程师,欢迎有兴趣的同学投递简历到 rd-hr@xingren.com 。

de8541bfe82dad8c3b8ab7c2501b84cf.png

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mac安装和卸载mysql_基于centos7系统卸载rpm安装的mysql

概述前面有介绍了怎么用rpm包去安装mysql,那么如果我们要卸载的话可以怎么弄呢?下面介绍下卸载mysql的流程。环境:centos7.31、 检查是否安装了MySQL组件。# rpm -qa | grep -i mysql2、卸载前关闭MySQL服务systemctl stop mysqld3、收集MySQ…

(转)Linux服务器磁盘空间占满问题

转自:https://www.cnblogs.com/cindy-cindy/p/6796684.html 下面我们一起来看一篇关于Linux服务器磁盘占满问题解决(/dev/sda3 满了),希望碰到此类问题的人能带来帮助。今天下班某电商技术部leader发现个问题,说他们服…

vue用阿里云oss上传图片使用分片上传只能上传100kb以内的解决办法

首先,vue和阿里云oss上传图片结合参考了 这位朋友的 https://www.jianshu.com/p/645f63745abd 文章,成功的解决了我用阿里云oss上传图片前的一头雾水。 该大神文章里有写github地址,里面的2.0分支采用vue2.0实现,只不过这个上传图…

计算机二级access选择题技巧,计算机二级access考试注意事项及解题技巧策略

计算机二级access考试注意事项及解题技巧策略2017年计算机考试将至,今天yjbys小编为大家带来了计算机二级access考试注意事项及解题技巧哦!快点行动起来吧~考试注意事项1.考试时间:120分钟(即2小时)2.考试类型:上机操作 (总分100分&#xff0…

计算机系统的部件名称作用,电脑配件与每个配件作用详细完整的解释

电脑各配件的具体功能和特性说起来很长,先简单介绍一下。一台个人台式电脑的主要配件有:1.主板:也叫母板,是连接CPU、内存、AGP等电脑配件的最主要最基本的载体,主板的结构类型决定电脑各配件的结构和类型,…

跟我一起玩Win32开发(20):浏览文件夹

最近忙于一些相当无聊的事情,还没忙完,不过,博客还是要写的,不然我头顶上会多了几块砖头。 在上一篇博文中,我们浏览了文件,今天我们也浏览一下目录,如何? 浏览目录我们同样有两个规…

k8s实战之从私有仓库拉取镜像 - kubernetes

1、实战目的 从私有docker仓库拉取镜像,部署pod。上一篇中,我们搭建了私有的镜像仓库,这一篇我们将与k8s结合实战使用私有仓库。 2、登录docker 为了完成本次实战,需要登录docker,如下: 3、为k8s集群创建Se…

李开复评价马斯克:他真正的目的是把人变成半机械人

本文来自AI新媒体量子位(QbitAI)李开复在昨日接受Quartz的采访时说,伊隆马斯克在用太阳能汽车和脑部医疗植入物做诱饵掩饰他真正的目的:改变从传统电力公司获得能源的方式,并且将人类变成半机械人。 △ 伊隆马斯克 李开…

c语言的翻译叫什么_什么是编译器?什么是集成开发环境?

我们平时所说的程序,是指双击后就可以直接运行的程序,这样的程序被称为可执行程序(Executable Program)。在 Windows 下,可执行程序的后缀有 .exe 和 .com(其中 .exe 比较常见);在类…

平板电脑硬件如何测试软件,先锋(Pioneer)G71平板电脑软件测试评测-ZOL中关村在线...

谷歌对旗下的智能操作系统Android采取了开源的做法,所以说也就造成了它相较于苹果iOS以及微软Windows系统严重的碎片化现象,当然我们也看到了像三星 TouchWiz UX,HTC Sense UI以及小米 MIUI这些非常成熟且易用的第三方固件,只是它…

WPF 中设置Combox下拉框Text 显示值

最近在写一个WPF客户端的一个小程序,其中有个小需求如下: 展示下拉列表里面有树形结构点击下拉子项时同时显示父级和子级文本也就是说在DisplayMember 中有两种显示方式 下拉列表显示时,显示的是DisplayMember 的值点击选中子项时&#xff0c…

简单的文件上传功能实现(java)

现在很多做后台系统的项目大部分都会用到文件上传这个功能,网上有很多例子,这边是自己用SSM框架技术做的一个简单的文件上传功能。 在写文件上传功能前首先要导入相应的jar包: commons-fileupload-1.3.1-jar ;commons-io-2.2-jar …

增量导出_[华为]一种实用的增量式深度CTR模型训练方法

今天给大家介绍一篇有关深度CTR模型增量训练的文章,来自华为诺亚方舟实验室。1、背景深度CTR模型需要大量的数据进行训练,同时需要不断的更新以适应最新的数据分布。如果模型没有及时更新,则有可能带来线上效果的衰减,如下图&…

win7如何添加终端服务器,Windows7系统超级终端的添加方法 win7如何添加超级终端...

有用户在刚升级到Windows7系统以后反映,在XP 操作系统里,超级终端是很好用的,但是却不知道为什么,升级为Windows7系统后却找不到超级终端在哪,出现这样的情况让用户非常的烦恼,其实找不到超级终端&#xff…

腾讯这家公司的核心竞争力是什么?为什么?

Andy Pan ,腾讯无线国际业务产品总监, 腾讯国际业务部... 我决定在国外出差的最后一晚晚点休息,在酒店静静的认真的回答这个问题。我尽量客观的负责的回答,不愤青,不炫耀,不攻击,用朴实的语言。只代表我个人的思考&…