theme: vuepress

摘要

本次分享一段无讨价还价余地的单人3天定制化大屏全过程（强调说拖拽屏的请绕道,和你想的不一样）,要动效、要地图、要流光。天坑的心理博弈到最终解决的过程及技术思路。

前因

没啥征兆突然接到说，要在下周完成2个大屏的定制开发,起初没提有动效,定时器等等内容的要求,只是说要根据美工的设计完成相关内容，并不觉得有啥难度，周末突发指令,要3D要3个大屏,给我顿时整傻了,挡了3d的无理要求,拗不过加码,3个大屏又附加了动效、定时器、翻牌器，流光等效果。

总之是能动的都要动,经过一番心态炸裂的心理建设后，👽推掉了其他开发任务，对你没看错，还有3项任务排着队，（安安静静的写代码都是个奢望）,周末为了缓解惆怅,试着找了找合适能加速开发过程的组件(主要是效果类),到此处可能会有人吐槽，模板多如牛毛找个模板不香嘛，此处补充一下，未定制稍微好说一些,定制的和常规的模板兼容可能还没手写的快,因此着重找了组件。

过程

可能是机缘到了运气好,顺手就找了一个符合要求的组件Vue 大屏数据展示组件库,想要的装饰、边框、翻牌器、排名轮播等都有,基本把动效问题解决了一大半,剩下的主要就是地图、图表及内容布局、定时器、数据流调整。

💪 合适的工具找到了,因为内容多,尽量提取卡片等边框组件化,某些可能有标题或者无标题,边框样式不同等,随时写随时加入参兼容,我的步骤是第一个尽量抽组件,第二个兼容扩展组件,第三个基本就不费什么时间了。
💪 解决布局问题,Layout每个UI组件基本都有,但有个问题需注意flex布局问题尽量先搞定gutter栅格间隔,的原理再去处理,避免随意的padding或者margin造成的时间浪费。
💪 echarts之前的社区貌似是被关闭了,很多老哥可能没有找到社区案例的地址，补充一下地图功能大略和以下差不多，主要就是SVG加载原理加上元素数据的组件。
💪定时器相关的内容，主要是每个区块触发的时间点要区分,因此存在很多的定时任务,关闭时容易遗漏，因此简单做了处理,销毁时统一销毁

/**
 * 调度器
 */
export default class dispatcher {
  constructor() {
    this.watcher = [];
  }
  startNew(callBack, timer) {
    var timer = setInterval(callBack, timer);
    this.watcher.push(timer);
  }
  destroyed() {
    //移除
    for (let index = 0; index < this.watcher.length; index++) {
      const element = array[index];
      clearInterval(element);
    }
  }
}

💪 数据流的处理,之前在文章里面吐槽了单端的问题，因此即便是前期的模拟数据，我也习惯梳理好数据流以待后来适配，并不会因为时间问题随意去搞,避免加重后期的工作量。
💪 最后初步成型后的好处，逐步反哺体现，细化的部分基本轻松就进行了调整,但你以为用组件就完了嘛，以上的组件原理很好，一些不太归纳的svg动画处理成组件后,的的确确增加了便捷性,但定制二字不是说说而已,还是得继承重写,重新定义部分动画。
💪 至此逐步进入尾声，也顺利完成和美工的切磋，加班？开玩笑吧，兽人永不为奴！！，至于后两天的时间，是专门挤出来给领导提意见修改的，“唉，卑微的程序猿！！”

题外话

行业及职业焦虑就像波光粼粼的水面，哪怕微风一吹,也会震颤不止，外加本段工作沉下来，且情况复杂，越来越发现做软件的特质跟人的问题相关性很强,注定 “江湖只能孤身一人”,正好又是世界杯，之前有讨论,说是中国团队项目对比“乒乓球”和“足球”,英雄主义特质明显,但一直在强调团队协作,工作里面这几年听到最多的是依旧是和人打交道最难，我的焦虑又在烦躁不堪的时候突然冒出头来。

之后,经历了一些事,又找到一个方向，疫情结束后的方向，在结束前是不是应该预测准备一些东西，于是，内心又莫名的斗志满满，也许焦虑的源头本质就是失去方向,对未来失去斗志和信心才反复的吧。

本文正在参加「金石计划 . 瓜分6万现金大奖」

文章版权归作者所有，未经允许请勿转载。

THE END