3天3定制大屏,反向PUA

·  阅读 3010

摘要

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

前因

     没啥征兆突然接到说,要在下周完成2个大屏的定制开发,起初没提有动效,定时器等等内容的要求,只是说要根据美工的设计完成相关内容,并不觉得有啥难度,周末突发指令,要3D要3个大屏,给我顿时整傻了,挡了3d的无理要求,拗不过加码,3个大屏又附加了动效、定时器、翻牌器,流光等效果。
    总之是能动的都要动,经过一番心态炸裂的心理建设后,👽推掉了其他开发任务,对你没看错,还有3项任务排着队,(安安静静的写代码都是个奢望),周末为了缓解惆怅,试着找了找合适能加速开发过程的组件(主要是效果类),到此处可能会有人吐槽,模板多如牛毛找个模板不香嘛,此处补充一下,未定制稍微好说一些,定制的和常规的模板兼容可能还没手写的快,因此着重找了组件。

过程

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

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

收藏成功!
已添加到「」, 点击更改