网易有道425项目总结

[xingbofeng]

学到的东西

• 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>

<script>
export default {
  props: ['to', 'text', 'rlog'],

  name: 'WithVendor',

  data() {
    return {
      href: '',
    };
  },

  methods: {
    getParameter(name) {
      const r = new RegExp(`(\\?|#|&)${name}=([^&#]*)(&|#|$)`);
      const m = window.location.href.match(r);
      return decodeURIComponent(!m ? '' : m[2]);
    },

    transferLink(link) {
      if (link.indexOf('vendor') === -1) {
        if (link.indexOf('?') === -1) {
          return `${link}?vendor=${this.getParameter('vendor')}`;
          // eslint-disable-next-line
        } else {
          return `${link}&vendor=${this.getParameter('vendor')}`;
        }
      }
      return link;
    },
  },

  mounted() {
    this.$watch('to', () => {
      if (this.getParameter('vendor') === '') {
        this.href = this.to;
        return;
      }
      this.href = this.transferLink(this.to);
    }, {
      deep: true,
    });
    if (this.getParameter('vendor') === '') {
      this.href = this.to;
      return;
    }
    this.href = this.transferLink(this.to);
  },
};
</script>

<style scoped>
a:hover, a:visited, a:link, a:active {
  text-decoration: none;
  color: inherit;
}
</style>

• 倒计时

<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的模板，数据太多了。。。（出了点小问题，还好几分钟就纠正过来了）~~