第二期前端九条bug分享

66次阅读

共计 9951 个字符，预计需要花费 25 分钟才能阅读完成。

本期

这次 9 个并不都是 bug, 其中有几个小优化, 虽然一个月的时间遇到很多 bug, 但并不是每个都有参考价值, 让我们看看这次我遇到的有趣问题吧.

1: git 报错 WARNING: POSSIBLE DNS SPOOFING DETECTED!

bug 现象:
一个平凡的清晨, 放下书包喝了口白开水, 习惯性的 git pull 了一下, 这个不速之客就出现在了命令行里面, 脑袋中竟然第一反应是希望这个 bug 有趣一点, 这样就可以写文章了, 这个 bug 是突然出现的本身肯定与我的操作无关, 当时问了下其他同事也遇到了这个问题, 但是我需要查一下如何解决它, 以及它的危害与预防.

bug 追查:
WARNING: POSSIBLE DNS SPOOFING DETECTED! 翻译成中文 警告：检测到可能的 DNS 欺骗！哦哦原来是 ” 信任 ” 方面的问题, 那我能想到的就是 ” 身份验证方面 ”, 有关身份我只做过全局的 gitlab 的账号邮箱设置, 权限设置, 还有就是 ssh 的设置, 那么怎么看都是 ssh 嫌疑最大, 最后还是去网上查到的解决方法.

bug 解决方案:
删除 known_hosts 文件
一台主机上有多个 Linux 系统，会经常切换，那么这些系统使用同一 ip，登录过一次后就会把 ssh 信息记录在本地的~/.ssh/known_hsots 文件中，
切换该系统后再用 ssh 访问这台主机就会出现冲突警告，需要手动删除修改 known_hsots 里面的内容。
有以下两个解决方案：

  1. 手动删除修改 known_hsots 里面的内容；
  2. 修改配置文件“~/.ssh/config”，加上这两行，重启服务器。
    StrictHostKeyChecking no
    UserKnownHostsFile /dev/null

优缺点：

  1. 需要每次手动删除文件内容，一些自动化脚本的无法运行（在 SSH 登陆时失败），但是安全性高；
  2. SSH 登陆时会忽略 known_hsots 的访问，但是安全性低；

2: 地图 geojson 绘制地图的具体操作(附上地图的代码)

需求:
项目内需要使用地图展示资产在全球的分布, 需要绘制 ’ 全球地图 ’, 有闪烁提示有悬停展示详情, 本功能只是一个小模块, 所以不许有明显的加载感, 后端会返回给我每个点对应的经纬度.

分析与准备:

本次并没有采用我们公司内部孵化的地图库, 因为它并不够轻量, 最后选用的是 echarts, 我也是第一次用 echarts 画地图.
说实话官网的例子挺不好的, 很多地方也没有说明白反正我第一次去学习的体验挺差.
地图需要画出各个国家的区域线条, 那就需要一个描述文件而这个文件一般都叫做 ”geojson” 文件, 而这个文件又分为 pc(以中心点绘制)、以经纬度绘制两种比较常见, 而本次我们采用的是经纬度的定位, 那就需要用经纬度的 geojson!! 这个非常重要, 具体的 json 这个网站里面挺全的, 但他都是 pc 绘制 geojson 文件库
下面是我简单做了下封装的组件
<template>
<div
  id="main"
  style="position: relative; width: 100%; height: 100%; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"
/>
</template>

<script>
import echarts from 'echarts';
import geoJson from '../assets/geojson/countries.geo.json';

export default {
props: {mapData: Array, // 里面只有三个值, 经度, 纬度, 数量 用于打点},
data() {
  return {sanData: [],
    myChart: null,
    tooltip: { // 提示框
      trigger: 'item',
      formatter: (arg) => {if (arg.value) {return `${arg.name}: ${arg.value[2]}`;
        }
        return '';
      },
    },
    geo: { // 地图的底色样式
      map: 'all',
      zoom: 1,
      top: 30,
      left: 30,
      right: 30,
      bottom: 30,
      show: true,
      roam: false,
      label: {
        normal: {show: false,},
        emphasis: {show: false,},
      },
      itemStyle: {
        normal: {
          areaColor: '#47D1FF', // 板块颜色
          borderColor: '#3B5077', // 边线
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10,
        },
        emphasis: {areaColor: '#2B91B7', // 悬停},
      },
    },
    effect: { // 闪点样式
      name: '数量',
      type: 'effectScatter',
      showEffectOn: 'render', // render emphasis
      coordinateSystem: 'geo',
      hoverAnimation: true,
      legendHoverLink: true,
      symbolSize: () => 20,
      rippleEffect: {brushType: 'stroke',},
      itemStyle: {
        normal: {color: '#ff8003',},
      },
      label: {
        normal: {formatter(arg) {return arg.value[2];
          },
          position: 'inside',
          show: true,
        },
        emphasis: {show: false,},
      },
    },
    map: { // 地图的绘制数据
      type: 'map',
      name: '工程数',
      mapType: 'world', // 自定义扩展图表类型
      geoIndex: 0,
      itemStyle: {normal: { label: { show: true} },
        emphasis: {label: { show: true} },
      },
    },
  };
},
methods: {initMap() {this.myChart = echarts.init(document.getElementById('main'));
    const {myChart, sanData, effect, tooltip, geo, map,} = this;
    echarts.registerMap('all', geoJson, {});
    effect.data = sanData;
    const option = {
      geo,
      tooltip,
      series: [effect, map],
    };
    myChart.setOption(option);
  },
  // 组装成地图需要的打点数据
  initDian() {this.mapData.forEach((item) => {
      this.sanData.push({
        name: item.country,
        value: [
          item.lng,
          item.lat,
          item.value,
        ],
      });
    });
  },
},
mounted() {this.initDian();
  this.initMap();},
};
</script>
效果如下图(参考了网上大家的做法, 比官网还靠谱)

3: 样式一样的新老项目共用一个域名.

背景:
一个辗转了三个团队, 维护了快三年的老 vue 项目, 代码简直乱到令人发指的程度, 比如请求报错了 /api/home/list/ip 这样的地址报 401, 那么我去查找这个地址在哪里发出的请求, 全局也没搜索到这个地址, 一个小时后我才知道 这个地址被分成了类似这种 -> , const a = ‘api’, const b = ‘home’, const c = ‘list’, 请求的时候 axios.get(/${a}/${b}/${c}/ip), 不仅如此, 这个请求还被放在的 vuex 里面辗转反侧三个配置页面然后被各种重新命名之后不知所踪, 关键是连个文档也没有, 这个项目在我来到公司之前就已经是一个人人不愿碰的存在了.

我刚加入就接到了改造这个项目的任务
经过讨论这个项目是 ” 救不活了 ”, 但是我们可以另起一个一模一样的项目, 然后所有的新需求都放在新项目里面, 每次需求都把老项目的页面迁移过来一个, 这样一年半载之后就可以彻底使用新项目代替老项目

需要解决的问题:

  1. 两个项目域名相同
  2. 切换时尽量做到用户无感
  3. 共用一套登录系统
  4. 平稳迁移, 最终淘汰老项目

解决方案:

  1. 老项目地址 xxx/home, 新项目地址 xxx/new, 这个需要后端同学配置 nginx 代理, 监测到 xxx 后面的地址进行分配, 这样两个工程的静态资源也要做好代理的区分, 我们需要配置好 publicPath.
  2. 俩个工程的一级二级导航栏做到完全一样, 甚至悬停出现的弹框也要做到完全一致(视觉骗子), 还好这个项目导航方面并不是很复杂.
  3. 添加一个专门的 router 拦截函数, 老项目: 监测到 new 字段就跳转到新项目, 新项目检测到 home 路径就跳到老项目, 这样写对于 404 有 bug 最后我说解决的办法.
  4. 后台代码也跟我们一期一起重写, 这就要兼容新老后端代码.

404 问题:
如果监测到 new 字段就跳转到新项目, 检测到 home 路径就跳到老项目, 这个会有 bug, 比如我乱打一个 xxx/jjj 那么这个就会留在原地, 我们就需要在 ’ 新老 ’ 两个项目里面都写一个 ’404 页面 ’, 这一点想到了那么如果是这样 xxx/new/jjj 这又是一个 ’404 页面 ’ 但是他带 new 字段, 那么它跳到新项目又变成了 bug, 我想到的解决方案是 new 这个新项目只要检测到不是自己路由表里的地址, 就把这个连接指向老项目, 老乡维护一套新项目的路由地址 list, 只有在 list 内才会进行跳转新项目的操作, 这样 bug 就解决了, 可能你会有更好的方法哦可以一起交流.

401 与 303 前端 测试 后端:

这里是个交流沟通的问题
问题是这样的, 老项目接口未登录报 303, 新项目接口未登录报 401, 这个现象看起来很好办, 只要检测到 303 或是 401 统一跳登录页面, 但是问题来了, 这两个状态码的判断标准不一样, 出现了 ’ 循环跳转 ’ 的 bug.

比如说: 你在老项目里面不报 303 那么登录页面就把你转到 ’ 来时的 ’ 路径, 但是这个路径如果指向新项目, 但是新型项目里面报了 401, 导致新项目又跳回登录页面, 日复一年年复一年的循环跳转.

这种问题是沟通问题

只要出现循环的跳转, 测试就会来找到我们, 因为这看起来绝壁是前端问题啊, 你死循环管后端什么事, bug 提给我不管是不是我的问题, 有时间的话我都会帮着排查与修复, 我把这个原因搞清楚后去跟后端同学沟通, 这个过程挺慢的, 毕竟谁也不希望 bug 是自己的 …, 可是这个问题到第一次上线他们也没有去解决, 线上又报循环跳转测试仍让我紧急修复, 这个虽然能够理解但也挺无语, 后来用的技巧就是把问题在群里抛出来, 用简短的话把问题说清楚, 不能 ” 看着像前端问题就前端改 ”, 当然了我跟后台同学了解下 303 余与 401 的判断标准, 在前端侧也增加了一层登录判断, 虽然没啥大用但是也能帮后端同学解决 95% 的差异了, 可是剩下 5% 的问题我已经帮他们分析出解决方案, 可是也放在下个版本做了.

通过这些问题能够感受到, 前端不光是写代码, 也有统筹整个项目的责任在身上, 积极整合大家也是一种锻炼

4:element 表单隐藏 input

故事是这样的
作者接到了一个离职者的遗留工程的新增需求，需求很简单：在一个表单中根据某一项的选择情况来决定显示与隐藏一个 input，比如 ’ 类型下拉框 ’ 选择‘个人’就隐藏‘订单号’反之则显示并且为 ’ 必填 ’，这个需求简直简单到爆。

bug 描述
当先不选择 ’ 个人 ’，然后再选择 ’ 个人 ’ 选项时，‘订单号的 input’消失了但是报错提示信息 ’ 订单号为必填 ’ 还是存在。

bug 初步分析
element-ui 本身是否有缺陷，我用 v -if 控制输入框的隐藏它没有检测到。

bug 初步解决
在我隐藏这个输入框后，100 毫秒的时候调用一次表单的验证方法，虽然你能够解决但这个方法给人的感觉就是临时方案。

bug 深入分析
建一个 vue 工程把这个 bug 情况在纯净的新工程里面还原一次，结果并未复现，这就说明这 bug 跟人家 element 没有关系，定位在代码本身有问题就好了，问题的元凶就在 @change 这个事件里面，上一位同学是在行间这样写的。
@change="() => { updateDesc(); updateYtsUserType(); updateMonitoring() }"
而在 updateMonitoring 方法里面有一个对表单的校验，这个 updateMonitoring 方法还有 5 处地方在调用，所以并不建议修改这里，导致这一 bug 的原因是 @change 事件与 vue 的数据更新机制未衔接好，vue 更新一个值是要经过 diff 算法的，更新数据采用三种方案，1：事件的订阅发布 2：promise 3：settimeout 逐级兼容，change 事件恰好在这之前就调用了表单的验证，所以把这个检验放在下一个宏任务就不会出现这个 bug 了，也不会出现错误信息一闪而逝的情况。

想起了聚焦与失焦的问题（某些移动端有 bug）
之前做移动端项目有三个 input，我需要监控当前用户从某个 input 框里面填完再跳到某个 input 框的操作路径，并做一些相应的处理，具体的业务场景我记不清了，但是当时我发现，比如我再 inputa 里面输入内容后跳到 inputb 里面，有时候是先执行的 inputb 的聚焦 然后 才是 inputa 的失焦 并且这个时间不是固定的，因为当时我搞了个 0 秒延时器并不是 100% 奏效，这个点大家可以注意一下。
正常因该是 a 聚焦 -> a 失焦 -> b-> 聚焦 pc 端还挺好

5: 上传打包文件的小优化, 小而美提升工作体验

这种事情我也认为属于小 bug，毕竟程序员是追求高效的，而且减少操作步骤可以减少出错的概率。

公司项目组暂时由我们上传到服务器，自动化正在搭建。

之前上传代码
1: 打包
yarn build
2：压缩
把打包好的 dist 文件压缩为 zip 格式
3：scp 上传 dist.zip 文件
4：ssh 连接服务器
5: 进入指定目录，unzip 解压 dist

现在传代码
1: 打包
yarn build
2：scp 上传代码
scp -r dist/* root@1.1.1.1:/home/xxx/xxxt

反思
如果包并不是特别大的话或者网络很不好，建议使用第二种，不以优化小而不为，不以危害小而为之。

6: Cannot assign to read only property ‘exports’ of object ‘#<Object>’

这个又是接收了一个离职同学的老项目

bug 描述
拉新项目 -> 切分支 -> yarn 一切正常，打开地址就报这个错.
中文意思就是这个项目里面混合使用了 common 的规范与 es 的规范，需要我统一规范，就比比如使用了 module.exports 也使用了 import

bug 初步解决
使用插件让两者兼容就解决了
npm install babel-plugin-transform-es2015-modules-commonjs

babelrc 配置
{"plugins": ["transform-es2015-modules-commonjs"] }

思考
这个问题应该不会是个需要下载插件或者修改代码才能解决的问题，毕竟开发了很久，如果启动都有 bug 那怎么上线的，所以问题应该就存在于流程上，或者外部的环境上，比如它使用了我本地的全局 webpack 的话那就有可能是我 webpack 版本问题，但查了一下 package.json 文件并无这种情况，那问题就在操作流程上。

bug 解决
原因很简单，这个是个老工程使用 npm 管理版本，而我习惯性的用了 yarn，导致 yarn 命令并不能读取 package-lock.json 文件，那么我下载的版本与之前同学使用的版本可能出现了不同，删掉 node_modules 文件夹npm i，解决问题

反思：npm 与 yarn 的锁文件可否用插件兼容
npm：package-lock.json
yarn：yarn.lock
可否做一个小插件把这两种文件类型与数据相互的转换，我分别看了下这两个文件的格式如下

文件类型各不相同，还有一个问题就是这两个工具的源也有差异，可能会出现某个插件某个版本 yarn 可以安装，npm 里面没有等等问题，这就导致类似的兼容插件没有大的意义了。
总结
大家还是暂时老老实实使用过同一种包管理工具把。

7: 厉害的 hover

hover 思维的局限
刚入门的时候一个老师给我讲，标签的:hover 只能修改这个元素本身与这个元素内部的元素，所以当时写一个弹出菜单的话需要把这个 ’ 标题 ” 弹出框 ’ 写在一个 div 里面，hover 这个 div 的时候弹出框 block，但是其实 hover 可以选择兄弟元素，可以选择远方的兄弟元素，可以给兄弟元素增加条件
举例子

相隔的一个兄弟元素内部的 span
 <div class="home">
    <div class="main"> 被 hover 的元素 </div>
    <div class="content"> 相邻的元素 </div>
    <div class="content">
      <span> 远处的元素 </span>
      <p> 我不变色 </p>
    </div>
  </div>
    .main:hover +.content +.content >span {color: red;}

8:after 变色变文案

需求描述
比如我现在有 6 种数据类型，每种类型前面要有一个‘彩色的点’来快速表明他是什么类型如下图：

要解决的问题

  1. 这种修饰性的结构一般第一想法都是用 after 和 before 做。
  2. 圆内的文字需要动态传入
  3. 颜色能动态传入就完美了
  4. 因为这个数据可能上百条，所以不用真实 dom 很有必要。
  5. 不可以用 js 来修改，因为不想把简单问题弄得复杂，导致代码工程化被破坏。
  6. 模块化，最好其他地方加上一个 class 名就有了这个效果。

解决问题

  1. 这个要做成模块，中间的文字就要可配，我想到了 attr()函数。
  2. 颜色实在没想到动态的传入方式，只能退而求其次用 scss 老哥的 @each 助阵一下了，还好最多只有 6 种配色。
  3. 一个 class 还不够，需要 data-* 属性来配合。

上才艺，咳咳不是，是上代码

<div data-color="red"  data-title="1"> 动漫 </div>
    <div data-color="green" data-title="2"> 小说 </div>
    <div data-color="blue" data-title="3"> 狗狗 </div>
*[data-color]::after {content: attr(data-title);
  color: white;
  align-items: center;
  display: inline-flex;
  justify-content: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  margin-left: 10px;
  border-radius: 50%;
}

@each $color in red, green, yellow, blue {*[data-color="#{$color}"]::after {background-color: $color;}
}

注意
attr 只能在content 中生效。
如果 attr 不是只能在 content 里生效就好了，我们就可以完美解决这一问题，这方面现在也在提案中，但是暂时没有浏览器支持。

受限于 css 的本性，这里并不完美，颜色方面还是要传，如果大家有好的方法可以私信讨论一下。

9: 复制也很有意思

问题描述
我们前端工程师无时无刻都在与 json 打交道(或是一个大对象)，比如我们生成了一个很长的 json 或者是 ajax 获取到了一段很长的 json，我们想要把这个 json 拿出来单独作为一个文件本地引入，或者是在控制台看着累要拿到某些工具中进行解析，为了提升性能会出现很多 …, 除此之外还会出现对象类型需要手动打开等情况，说实话复制出来不是太方便

起因是一个晨会的知识分享

用鼠标复制还是处于网民阶段，成需要肯定是利用方法

同学 a：

使用 window.copy 方法把数据复制到剪切板里面就可以拿到了，对于开发环节来说又不用在乎兼容性，这个方法我试了一下也并没有长度限制挺好用的。

同学 b：

使用 js 直接把 json 数据生成在一个文件里面岂不是更方便，听到这个的时候就是感觉 js 不是不可以操纵用户的文件系统么。。。有点打破我的固有认知，但是试了一下他提供的方法，还真不错，下面我就介绍一下这个方法与原理：上才艺

(function(console){console.save = function(data, filename){if(!data) {console.error('Console.save: No data')

  return;

  }

  if(!filename) filename = 'console.json'

  if(typeof data === 'object'){data = JSON.stringify(data, undefined, 4)

  }

  var blob = new Blob([data], {type: 'text/json'}),

  e = document.createEvent('MouseEvents'),

  a = document.createElement('a')

  a.download = filename

  a.href = window.URL.createObjectURL(blob)

  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')

  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)

  a.dispatchEvent(e)

  }

})(console)

console.save({a:1})

// 这里是解释版，每个语句的意思都详细的解释

(function(console){console.save = function(data, filename){if(!data) { // 1：没东西没有意义，大部分可能是复制错了
      console.error('Console.save: No data')
     return;
  }
  // 2：名字肯定要有个
  if(!filename) filename = 'console.json'

  if(typeof data === 'object'){ // 3：转成字符串
    // 4：JSON.stringify
    // 第一个参数：就是数据了
    // 第二个参数：指定哪些 key 需要处理，undefined 就是都处理
    // 第三个参数: 层级之间的空格缩进数
     data = JSON.stringify(data, undefined, 4)
  }
  // 这个构造函数厉害了：Blob
  // Blob 类型的对象表示不可变的类似文件对象的原始数据。// Blob 对象是二进制数据，但它是类似文件对象的二进制数据，因此可以像操作 File 对象一样操作 Blob 对象
  // Blob 表示的不一定是 JavaScript 原生格式的数据（这句最关键）。File 接口基于 Blob
  // 第一个参数是数组，就是个拼接，这个自己拼也行
  // 第二个参数是配置，这里我们指定为 json 文件
  var blob = new Blob([data,data], {type: 'text/json'}),

  // 自定义一个事件
  e = document.createEvent('MouseEvents'),
  // a 标签没什么好说的
  a = document.createElement('a')
  // 必须定义，否则变成了跳转
  a.download = filename
  // URL 就是定义本地路径的 api，我们做一个上传组件 或是裁剪组件的时候，会用这种方式展示本地的图片
  a.href = window.URL.createObjectURL(blob)
  // dataset 就是获取属性的意思
  // 格式 ->> text/json: 文件名：blob 数据
  a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
  // 我们的自定义事件配置
  e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
  // 触发我们的自定义事件
  a.dispatchEvent(e)

  }
})(console)

console.save({a:21},'来段静态文件')

虽然用处真的不大，但是开阔了思路对未来的变成之路也是有好处的。

end

本次的分享就是这样，我深刻的感受到‘好的解决方法’很多，最缺少的是好的问题，欢迎交流, 祝每天进步

正文完
javascript
发表至： javascript
2020-06-03
 0
javascript实现腾讯AI开放平台，调用API时的接口鉴权，生成合法签名
结合js-Generator-函数来直观的感受下冒泡排序
vue 源码学习（一） 目录结构和构建过程简介
关于javascript:Promise详解