第四期:前端九条bug分享

时间 2020-08-25

标签第四前端九条 bug 分享繁體版

原文原文链接

本期

最近工做以及我的的事情都比较忙而且抽时间在学java，致使拖到如今才攒够9条合格的‘bug’，最近一直在用服务端渲染nuxt.js还有echarts，因此会有多处涉及这方面技术，此次最后会分享两个最近感悟出的观点还挺有意思的。html

1: 为何列表的数据不要让后端同窗返回对象，而应该返回数组？

返回对象咱们前端直接遍历有没问题啊，能够正常显示，那是由于你没有遇到下面描述的状况
bug现象1:前端

我明明把3这个key定义在了第二个位置，可是每次打印出来他都跑到了第三个位置，那么我是否是循环出的列表就有问题了

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <script>
    let obj = {
      '1':"数字1",
      '3':"数字3",
      '2':"数字2"
    };

   // 这三个都阵亡啦
    console.log(Object.keys(obj)) //  ["1", "2", "3"]
    console.log(Object.values(obj)) // ["数字1", "数字2", "数字3"]
    console.log(Object.entries(obj)) 
    /*
    (3) [Array(2), Array(2), Array(2)]
       0: (2) ["1", "数字1"]
       1: (2) ["2", "数字2"]
       2: (2) ["3", "数字3"]
    */

    // 老方法也有这个问题
    for(let item in obj){
      console.log(item) // 1 2 3
    }

    console.log(JSON.stringify(obj)) // {"1":"数字1","2":"数字2","3":"数字3"}

    console.log(obj) // {1: "数字1", 2: "数字2", 3: "数字3"}
 </script>
</body>
</html>

bug现象2:
123照样被排序，而带汉字的放到最后vue

let obj = {
       '1':"数字1",
       '3':"数字3",
       '2':"数字2",
       '0汉字':'数字0'
     };
     console.log(Object.keys(obj)) //  ["1", "2", "3", "0汉字"]

我把0换个位置java

let obj = {
       '0汉字':'数字0'，
       '1':"数字1",
       '3':"数字3",
       '2':"数字2",
     };
     console.log(Object.keys(obj)) //  ["1", "2", "3", "0汉字"]

bug现象3:node

那我加上汉语

使用下面的代码顺序就不会有问题啦，nginx

let obj = {
       '1汉字':"数字1",
       '3汉字':"数字3",
       '2汉字':"数字2"
     };

bug理解:
数组也是对象，那么对象对这种数组的形式是有一些特殊操做的，这个坑点必定要后端同窗明白，否则后期出现奇怪的bug还要转换数据形式就太苦恼了。git

2:echarts的图表如何显示“无数据”, 描述了一个思惟过程。

事情是这样的
我要画一张折线图，但这个折线图有两个状态显示，无数据的时候显示“暂无数据”，有数据的时候正常显示数据，因此有了以下的代码。编程

其中list就是折线图数据的数组，就是这个样子的[{},{},{}];

你能够分析一下下面的代码bugelement-ui

<template>
  <div v-if="list.length === 0" class="nodata">暂无数据</div>
  <div v-else ref="main" class="line"></div>
</template>
...
 mounted() {
    this.initLine(); // 初始化折线图
 }
 initLine() {
      this.myChart = echarts.init(this.$refs.main);
      //...
}

bug现象1:
很明显第一次this.initLine();会报错，由于list的初始值确定是空数组致使没有ref等于main的dom元素，这样固然会报错啦，因此有了下面这段代码。json

使用一个变量来控制是否显示暂无数据

<template>
  <div v-if="showNodata" class="nodata">暂无数据</div>
  <div v-else ref="main" class="line"></div>
</template>
data(){
  return {
    showNodata:false
  }
}
...
 mounted() {
    this.initLine(); // 初始化折线图
 }
 initLine() {
     //... 好比请求拿到返回值
     this.list = res.list;
     this.showNodata = res.list.length === 0; // 这里要严谨一点的话， 要处理请求出错的状况， 提早把this.showNodata赋值为false，这里我就只是举例子啦。
}

bug现象2:
看起来好像没有大问题，可是测试提出了一个诡异的问题，在数据从有数据到无数据不断切换的时候， “暂无数据”与图表居然一块儿显示了出来，如图所示。

bug现象3:
明明是v-if控制的dom元素，怎么会同时出现两个。。。
这类问题第一反应确定是元素的复用问题啦，加个key就有了以下的代码

<template>
  <div v-if="showNodata" key="1" class="nodata">暂无数据</div>
  <div v-else ref="main" key="2" class="line"></div>
</template>

问题真的就解决了，可是明明俩个class 不一样，一个有ref一个没有，那么这个元素为啥还要重复啊？
bug现象4:
带着疑问去掉了class，同时去掉key，居然也能够消除bug

<template>
  <div v-if="showNodata">暂无数据</div>
  <div v-else ref="main"></div>
</template>

bug总结:
若是都有class的话，就会复用下面的dom，把这个dom的class换成nodata，可是这个dom被echarts处理过因此就致使折线图还在，因此若是想避免这个bug那就须要其中一个dom不加class或者乖乖加个key啦。

3:commit 了不想提交的内容，可是又commit其余的数据

bug现象:
周末加班不当心把一个.zip文件commit了上去， push时报的错误信息是内容过大，那好办我直接删除了这个文件再push，仍是包这个错误，那我修改.gitignore文件， push仍然报这个错误这就很恼火啦。
bug追查:
经过git log查出每一个commit的hash号码，而后git show打出来看看具体的commit信息，的确就是由于这个.zip文件出的问题，那么我如今就是须要取消那一次commit，可是那次提交以后我又进行了屡次提交，这可怎么办。
bug解决:
git reset 出错commit的前一个hash，运行git status你就会发现已经把.zip文件‘吐出来了’，固然这种回退并不会把咱们的文件删除，或者是把文件修改的内容回退，因此你们能够放心使用，要记住的是对于已经commit的文件，配置.gitignore文件是无效的。

4:为何每次时间都会变化

bug现象:
一个风和日丽的傍晚... 我写了一个毫无花哨表单, 可是诡异的事情正在缓缓到来，背景是咱们那个项目使用了nuxt.js, ui选用了Ant Design Vue, 这个表单里面使用了一个时间控件，就是那种能够选小时与分钟的，难以想象的是每次我提交的数据‘时间这一项都是错误’，好比我选的下午2点，可是提交的是上午3点，就是时间永远提交的是错的。。。
bug追查:

后台要求时间格式是 ‘23：03’这种字符串的格式
当时我没有用插件处理，而是直接把时间串slice截断了一下，取出小时部分
为了避免影响原数据，每次提交的时候我都会const form = JSON.parse(JSON.stringify(this.form))

由上面的内容分析了一下，我忽然想到Date对象不支持json序列化，会不会是序列化的时候致使了变异？
想到了就赶快试一试

不难看出原本是18：41：19，可是转换完毕变成了10：41：19，前面的小时数出现了变化。

但调用toString方法就不会使其变化

这么好玩的事情必定要追查下去啊，这个10究竟是什么，他的转换规则究竟是什么，当时没有这方面的只是储备，那么就把date对象身上的属性一个一个的试我就不行找不到

果真被找到了，如图

d.getUTCHours() 是什么？

getUTCHours() 方法可根据世界时 (UTC) 返回时间的小时。也就是说他是世界时间，而不是北京时间的小时
对世界时间有兴趣的能够看看这篇文章写的挺清楚的https://www.cnblogs.com/you-jia/p/4465690.html

为啥只有小时不一样，分钟和秒都同样

哈哈哈这个其实很好解释，就是联合国规定每一个时区之间的差别只能以小时为维度，因此才有了这个bug的状况，真是无用的知识又增长了感受本身棒棒的。
若是之后你们遇到了这种bug能够大胆的吹它一顿nb啦。

5:Failed to execute 'appendChild' on 'Node': This node type does not support this method

来龙去脉:
在使用nuxt.js框架编写项目的时候，遇到了一些实际的问题。

部署成本的增长，服务端可能要安装pm2，node，yarn。
每次更新代码太慢了，尤为实在联调阶段，每次更新代码要花费我5分钟左右（你能够想象遇到一个只在线上才会出现的bug我有多心累）。
莫名其妙的错误增长了学习成本，而且这些错误可能对咱们没啥提升。
每次编译速度极慢极慢，而且编译后有错误（在这里热更新就是个笑话），开发了一个月我甚至都已经习惯用鼠标点浏览器的刷新按钮，甚至甚至！！！！刷新一遍可能仍是错误的我要手动刷新第二遍才会正确（桌子都掀了，再摆回去）。
报错很夸张，可能我一个代码错误它报500....我一个取值错误它就白屏。
自身代理须要在每一个环境里面修改，好比测试环境服务启在3000，开发环境启在8080，上线又要变。

吐槽还有不少不少，可是我就不吐苦水了，你们想清楚若是真的真的须要服务端渲染再选择使用它，咱们项目一个后台管理系统使用它收益真的有点小。

bug现象:
在咱们不堪其扰的时候，团队终于决定使用静态包来部署， "generate":"nuxt generate",也就是这句神奇的命令，他会生成多个html文件来达到区别于spa技术的目的，而咱们部署起来方便多了，可是开发仍是很很不舒服，就在这个时候出现了这个问题，我在开发服务器上启动的服务跑的没问题，可是在测试服务上面的generate静态包出现了题目上的错误，难道这个错误与打包方式还有关？？？

bug解决:
解决方法说来也简单，我使用了一个<iframe>标签，这在他生成时候就乱了套了哎，因此我要用<no-ssr></no-ssr>标签dom结构包裹起来，让他不要走服务端渲染程序，这样就能够避免这个问题啦，归根结底仍是这个技术自己有问题。

6:在nuxt的静态打包时，前端path被占用

bug现象:
作好的项目放在新的测试服务器上，其中动态大屏的页面访问包nginx报403，这时候测试与后端同窗就来找我了，质问我作了什么致使nginx出了问题....我给他们的是静态包根本没有操做服务器的代码，那么问题已经就处在服务器环境或者后端同窗代码身上啦，虽然不是前端的工做，但正好是个学习的机会就来帮他们查一查吧。
在项目内用$router.push的方式跳过去没问题，点击刷新页面就会404.

bug追查:
nginx报错那么必定出在路径上，查看nginx配置文件里面是如何代理这个路径的，外部直接访问这个路径查找走到了那个代理，最后果真发现了这个路径被一个空的资源占据啦。

bug解决:

加上路径前缀也就是publicPath
前端给这个页面更名

最后为了最快时间解决，而且也是后端同窗实在忙不过来了只能妥协这个版本使用第二种方式。

7:echarts的几个不常见的问题罗列

知识点罗列:

让折线图堆叠与不堆叠
在使用折线图的时候，有时候会涉及到多折线，这个时候就可能须要这n条折线各自之间互补干涉，也可能让给他们成为堆叠的状态，如图所示：
经过设置每条线的stack属性相同达到堆叠效果，反之亦然

series: [
 {
            name: '紧急',
            type: 'line',
            smooth: true,
            stack: '紧急', // 不同就不堆叠了
            data: [1,2,3],
          },
          {
            name: '高危',
            type: 'line',
            smooth: true,
            stack: '高危',
             data: [5,6,7],
          },
          {
            name: '中危',
            type: 'line',
            smooth: true,
            stack: '中危',
              data: [8,9,10],
          },
  ]

使横线变成虚线
这个要求好诡异我找了半天才找到，不分享出来都感受对不起本身，对好比图：

代码以下

yAxis: {
          type: 'value',
          axisLabel: {
            color: 'white',
            fontSize: 14,
          },
          splitLine: { // 这个就是精髓
            show: true,
            lineStyle: {
              color: '#d8d8d8',
              type: 'dotted',
            },
          },
        },

让地图能够根据评分变成相应的颜色

这个也是我找了半天，官网里面说的都是inRange属性，可是这个属性无法让咱们去设置范围，后来我找到了dataRange这个属性如图：

以下的方式去使用就好啦

dataRange: {
            right: "2%",
            bottom: "3%",
            icon: "circle",
            align: "left",
            splitList: [{
                    start: 0,
                    end: 0,
                    label: '提示',
                    color: "#6ead51"
                },
                {
                    start: 0,
                    end: 250,
                    label: '低温',
                    color: "#92b733"
                },
                {
                    start: 250,
                    end: 500,
                    label: '中温',
                    color: "#c4aa29"
                },
                {
                    start: 500,
                    end: 750,
                    label: '高温',
                    color: "#ce6c2b"
                },
                {
                    start: 750,
                    label: '超高温',
                    color: "#c92626"
                }
            ]
        },

推荐论坛地址echarts论坛

8:写一个官网的注意事项

bug现象1:

全部关键的key与词语必须让用户搜索的到：

ui组件库的官网每一个实例下面，基本都有一个折叠代码的功能，可是当我想要ctrl+f搜索的部分就在这个被遮挡住的代码块中的时候怎么办？？那就很不方便找到了，因此说折叠代码的同时不要让这里的dom结构消失会更舒服，毕竟ui的官网应该以方便查询为主，而不是官网页面的性能。
这方面element-ui作的很棒。

bug现象2:

过于简短的介绍甚至无介绍：

不少官网对于一些用法都是一句话了事，举例子也就举其中的一段代码，致使咱们要付出更多的学习时间才能把他研究懂，官网你都作了为何不能附上完整的代码？与详细的介绍。
可能写这个的团队都是大神，怕写多了没有身份。
更有甚者， vue的一个插件他在介绍里面引入了个mixin 也不说mixin里面是啥代码。。。。

bug现象3:

不怕重点词的重复

其实某个知识点你虽说过，可是有些时候若是解释的话术不是不少的话，我仍是建议直接在使用的位置的旁边附上解释，不要为了找一个13个字就能说清楚的东西还要点三层链接去到大家的英文文档里面自行查阅，我认可你写的很规范很秀，可是不太好用。

9:面向人类编程（这里只是我的的观点）

代码不可是写给咱们本身的，也是写个全部人的

把本身写的代码当一个产品输出。
把同事当客户。
不要为了看着所谓的正规而丧失代码的可读性，有时候代码丑一些可是更实用。

过分封装

代码自己就是给人看给机器运行的，而咱们何不把写出的代码当成一个产品去设计，让用户用着舒服用着爽。
我看过太多代码作到了所谓的“高标准”，好比把请求所有集中起来，当我发现一个http请求出错的时候我要搜索这个http地址，而后再全局搜这个http地址对应的方法名，这样的两步走收益真的大么？这只是一个小例子吧。

本身明白就行？

作开发确定会遇到一块儿奇奇怪怪的需求与bug，当咱们梳理好了逻辑或是解决了怪异的问题能否直接在相关代码的旁边完整的写上逻辑关系以及为何这里写的比较奇怪，干吗每次别人梳理到这里还要来问你一次为啥这么写。

用着不爽硬坚持？

某些技术多是你总监提出来的或者cto亲推，可是实际使用起来就是不爽，那么咱们做为开发者也能够提出来，毕竟写代码是件开心的事。

固然时间紧任务重的话酌情

毕竟你们都会有十分十分忙的时候，此时没必要过度追求这些，都理解的哈哈哈。

end:

但愿文章可以对你有收获! 本次的分享就是这样，欢迎交流, 祝天天进步