自服务大屏踩坑实践

项目背景

客户自服务项目是为专网客户进行网络服务管理的Saas应用，旨在为客户提供便捷快速的网络服务支撑与展现，其中的可视化大屏做为客户端数据直观呈现的重要入口，产品侧但愿给予用户侧必定的私人自定义功能，于是本文简单介绍了下相关实现的一些思路以及代码实现过程当中一些比较有意义的bug回顾分析

项目方案

拿到产品需求的第一反应是low/no code实现方案，但业界较为常见的是H5页面的定制（ps：开源的大屏low code方案能够看一下小夕大佬的从零开发可视化大屏制做平台），而且其数据量不具备特殊性，基于产品的需求，这里只借鉴了其schema统一设定的方案（ps：这个很重要，大部分low code的自定义schema其实最后是先后端同构的，这样能够无缝处理，但要考虑到各个技术团队的不一样技术侧重，这种约定须要比较好的处理），对于其余的拖拽及网格编辑器等的方案会根据后续产品相关迭代进行逐步扩展

通用schema方案

业界常见的schema方案是将用户配置与自身配置进行分离，也就是对是否暴露给用户进行区分，这里选择将暴露给用户的schema定义为:

{
   requestParams: {

   },
   figureParams: [

   ]
}

这里的requresParams主要是向后端发送请求拿到对应数据的内容，而figureParams则是用户自定义的一些配置信息，其中包含了图形化的一些展现信息

响应式函数编程

可视化大屏每每和大数据分析与统计相关联，对于数据流的处理，使用函数式编程将数据处理进行转换，能够更好的进行响应式编程方案，这里参考了一些响应式RxJS的设计思想及函数式编程的链式处理、effect、pure Function等理念，对于后续大数据的处理也能够更好的和Flink等相结合，对于想了解RxJS与Flink相关扩展的同窗能够参考阿里同窗的这篇文章从 RxJS 到 Flink：如何处理数据流？

export const handleKpiGroupId = function(staticTypes) {
  const arr = staticTypes.map(staticType => staticType.split('-')[0]);
  return Array.from(new Set(arr));
}

export const handleKpiNameEns = function(staticTypes) {
  const arr = staticTypes.map(staticType => staticType.split('-')[1]);
  return Array.from(new Set(arr));
}

根据业务须要封装一些map及filter处理，后续会依据数据流进行相关的发布订阅的响应式处理

踩坑案例

从数组中删除位置数组中的元素

[bug描述] 在客户指标图表穿梭框组件中对已选择图形进行取消选择操做，这里是经过一个checked拿到对应左侧push的栈结构数据的位置，在删除过程当中使用了“占位符”进行splice替换，致使图形配置信息遗漏到大屏展现页面

[bug分析] 使用splice操做进行占位后再进行占位符过滤操做，用户快速点击提交致使子组件向父组件emit数据未能同步到变已做出提交，致使脏数据遗漏到大屏展现页面

[解决方案] 直接使用filter操做进行处理，避免splice的操做污染，须要注意filter会返回新数组，对原数组不作处理，于是vue监听时须要对数组进行从新的地址修改

复杂数据类型地址引用问题

[bug描述] 穿梭组件中对于向父组件派发的数据经过一个stack栈存储，而该栈中存储了echarts的options等复杂数据类型，结果致使了数据共享问题

[bug分析] js中负载数据类型，如：对象、数组是存放在堆内存中的，在栈内存中存储的仅仅是一个地址引用

[解决方案] 使用深克隆进行数据备份，从而实现数据的隔离

父组件异步数据经过props传递问题

[bug描述] 父组件异步请求获取数据后传递给子组件时，子组件拿到的数据没法当即在页面上实时渲染

[bug分析] 这里出现了两次，一次是父组件给子组件传递数据没有当即监听到，而页面须要当即渲染致使的bug，此时对传递的props进行了监听处理；另外一次是父组件中和子组件中都调用了一个接口，只是需求不一样，我但愿可以减小请求次数，结果致使了父组件传递的数据并未同步传递给子组件，props会受到上一次值的影响

[解决方案] vue的数据监听并不是同步渲染到dom上，这里会出现一个tick的延时，若是须要父组件中数据实时传递给子组件能够考虑在子组件中监听，以及使用$nextTick等

Object.keys返回数据排序问题

[bug描述] 大屏展现横坐标是时间维度，这里会从服务端拿到时间粒度的数据，而存储的key值为时间，于是须要对数据进行过滤整合处理，使用Object.keys对时间粒度返回的过程当中出现了时间粒度的乱序

[bug分析] js中的Object.keys会对不一样状况进行不一样的策略排序，更深层次的探索能够看腾讯IMWeb同窗分享的关于Object.keys排序的深层探究关于 JavaScript Object.keys() 排序问题的探索
[解决方案] 使用sort对排序规则进行肯定

总结

大屏可视化定制看似简单，但在实际开发过程当中仍是会出现不少的问题，尤为是涉及到了数据的分析与处理，整个定制的核心在于schema的肯定，需求的不一样也会致使schema的变更，于是对于大数据相关的开发与展现可能会是可视化方向的另外一个扩展方面，这里能够着重看一下响应式函数编程与大数据相关的结合，可能能碰撞出一些火花；另外就是对于bug进行不一样层次的深度剖析，在每次开发功能过程当中产生的bug，总有那么几个值得回味反补的闪光点存在，就像“错题本”同样，总会出现那么一两个值得咱们反复玩味的bug，从而让咱们对基本原理能有一个更深层次的理解，人都对不常见的问题印象深入，真正踩过几回坑，才能印象深入，所谓“痛则通，不痛则不通”，每一次的bug流的泪都是当初脑子进的水，但愿你们能在不断实践的过程当中反补本身技术基础的不足，从而把本身的技术打造的更为精湛与过硬，高手过招总在细节中体现功夫的深浅，共勉！！！

参考

• 从零开发可视化大屏制做平台
• 从 RxJS 到 Flink：如何处理数据流？
• 关于 JavaScript Object.keys() 排序问题的探索
• vue父组件异步获取数据传给子组件