网易有道425项目总结

学到的东西

vue技术栈，这一块是从入门到基本熟悉。期间夹杂着抽空写了一个个人的vue项目。
踩移动端的一些坑
- fixed和transform的恩恩怨怨
- -webkit-tap-highlight-color设成透明
- scrollTop的bug(很灵异，至今都不懂)
```
let myScroll = window.document.documentElement.scrollTop;
if (myScroll === 0) {
myScroll = document.body.scrollTop;
}
```
  在我和产品经理的两台电脑上的scrollTop不一样？而且都是chrome……
- 隐藏的iframe阻止表单提交跳页面？这个也许在网易云上边是个坑……至今没测……希望以后要尽量摒弃表单提交这种东西，全部ajax吧……
hash路由会被词典头图屏蔽掉，不兹词。
vue更新数组数据的方法关于这一块，近期在阅读深入响应式原理那一部分的原理，应该读完之后就知道怎么回事了……
公共组件

因为初学vue，所以很多地方做的不太好。代码结构很乱。

添加vendor(用于代替a标签)


<template>
<a
v-if="text"
:href="href"
:data-rlog="rlog"
>{{ text }}</a>
<a
v-else
:href="href"
:data-rlog="rlog"
><slot></slot></a>
</template>

- 倒计时
```html
<template>
  <div class="container">
    <div>
      距离开始还有
      <span>{{ days }}</span>
      天
      <span>{{ hours }}</span>
      小时
      <span>{{ minutes }}</span>
      分钟
      <span>{{ seconds }}</span>
      秒
    </div>
  </div>
</template>

<script>
export default {
  name: 'CountDown',
  props: ['endTime'],
  data() {
    return {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
    };
  },
  created() {
    this.countTime();
  },
  methods: {
    countTime() {
      setInterval(() => {
        const endTime = new Date(this.endTime);
        const all = (endTime - (new Date().getTime())) / 1000;
        const days = Math.floor(all / (60 * 60 * 24));// 天数
        this.days = days;
        const dS = all - (days * 24 * 60 * 60);// 时分秒所占的总过的秒数
        const hours = Math.floor(dS / (60 * 60));// 这个是所占的小时数
        this.hours = hours;
        const hS = dS - (hours * 60 * 60);// 这个是分秒一共占的秒数
        const minutes = Math.floor(hS / 60);// 这个是多少分钟
        this.minutes = minutes;
        const seconds = Math.floor(hS - (minutes * 60));
        this.seconds = seconds;
      });
    },
  },
};
</script>

<style scoped>
</style>

做的不好的地方

强行用了`vue`

其实这一块儿技术栈是自己很早之前就想了解。以前做过一些很辣鸡的demo不成气候。这次想真的尝试一下，但还是遇到了一些坑。不该在这么紧急的活里面用吧。其实自己下来利用课余时间可以看看。在这上面踩的坑虽然不多但是也拖慢了一些进度，导致最后测试同学陪我一起通宵，很很很抱歉。

需求不明确

这一点是真的没办法啊！！！！最开始从需求文档里面根本没想到后面会添加这么多状态……时间紧急的情况下，在不断修修补补里面，代码就成了这个样子……自己都看不懂了！！

导航栏

当时我是怎么算都感觉不对，知道可以估个值但是就是不想估啊！最后成了这样。。。。我自己都觉得很不爽。。。不过还是过去了（反正也不会再用这种代码的对吧）

以及。。我竟然用了touchmove这种东西来做

overflow-y: auto;
-webkit-overflow-scrolling: touch;

这个效果。。。脑子短路了

测试不是万能的

这一点真的是我最想说的，上线前一天我自己发现一个P1级别的bug，抢购商品的提交表单信息里面，我竟然没有带上时间和所抢商品的种类！这到时候我们后台怎么知道谁抢到了，抢到的是什么？天呐还好改了。

部分地方需要测试打通资源

这个页面第一次在网易云音乐上边投放，后来发现线上似乎把表单提交的请求给屏蔽掉了！（至今我都不知道是不是隐藏的iframe的问题），不过从中也看出来我们似乎测试这边跨部门的测试资源不足的问题。（希望以后能有充足的测试）

运营直接填JSON

~~好吧，这一块是我真的不想去写freemarker的模板，数据太多了。。。（出了点小问题，还好几分钟就纠正过来了）~~

xingbofeng / xingbofeng.github.io