首页手记投稿008期 | 我以为

投稿008期 | 我以为

标签：

JavaScript Vue.js vuex

我有很多东西想写。我想写我和策划哪些不可说的密码，但是考虑到公司的策划小姐姐可能暗中的关注着我；我也想写我和项目经理的情感纠葛，但是又害怕一个不留神被他看到“怀恨在心”；我甚至都想写和经理打游击的故事，但是考虑到我根基太浅怕一不留神被一脚踹出门去。事到如今，只好扒一扒我写前端项目的时候做的一件蠢事儿（Android项目犯蠢的事儿太多了），目的呢？只希望诸位读者朋友引以为鉴，千万不要犯我这样的低级错误。

一、事件起源

事件的起因呢？是年初的时候在写前端的一个直播项目的时候。页面存在有很多很多的数据展示，在页面初始化的时候，会将很多的页面数据都初始化进去。
请求数据的代码差不多就是这样（如果对我封装http的代码有兴趣的朋友，可以期待我接下来的文章哦）:

  this.$okhttp(apis.rosterApi.getstate,
          {lessonid: this.mylessonid}
        ).then(res => {
          // dosomething...
        }).catch(res => {
          this.$message.error(res)
        })

然后数据既然得到了，但是数据并不是单个组件在用，而是所有需要这份数据的组件共同需要需要，我一反应是使用全局事件，但是考虑到全局时间的穿透性和不可把控性，我还是放弃了，转向vuex。

  // action 逻辑
  saveTableData ({ commit }, tabledata) {
    commit(types.REFRESH_TABLE_DATAS, tabledata)
  }
  // mutations 逻辑
  [types.REFRESH_TABLE_DATAS](state, tabledata) {
    state.tableData = tabledata
    window.localStorage.setItem('tableData', JSON.stringify(state.tableData))
  }
  // 每次初始化vuex的时候
  state.tableData = JSON.parse(window.localStorage.getItem('tableData'))
  //使用：
  this.$store.dispatch('saveTableData', res)

基本的代码都贴在这里了，谈到为什么要这么做呢?

之前有一套需求是这么做的，具体是什么我忘记了。
为了减少http请求，因为这个接口的数据量还是有点大的（Android的缓存思想）。

二、问题出现了

由于项目匆匆忙忙的上线，我在本地也没有经过很长时间的推算就直接上去了。
第一周开直播的人数比较少，基本就是寥寥几个人，低空掠过~~
第二周同一时段的人开直播的小姐姐们多了起来，问题就出现了zzz

如果两个直播同时都打开的情况下，当用户切换直播间的时候依然播放的是上一个直播间的流地址。刷新之后，播放器恢复正常，播放新流地址。

三、排查问题

因为自己比较自信，我第一反应就是可能存在缓存没清理的关系。我首先去videojs官网去查询释放资源的接口，我发现官方有一个dispose的接口专门用来释放资源。于是我就添了一行代码：

beforeDestroy(){
	if(this.player){
		this.player.dispose();
	}
},

然后刷新了一下浏览器，发现恢复正常了。然后我就开始怀疑起了videojs这个插件。作为一个比较有心得的程序员这点傲气还是得有的吧。

然后刷了一遍文档，也逼着自己瞧了一个晚上的videojs源码，没有发现半点videojs的漏洞。心里虽然有着万般不愿意，痛骂着：狡猾的洋鬼子啥啥啥的。但还是沉下性子，乖乖的调试起来了代码。

首先我在网络请求返回值那里打印了一下–咦，新地址呀！看吧，肯定不是我写的后台的锅

然后转到videojs的播放器组件上面打印了一番—看吧，果然，我前端写的如此完美，肯定没问题

最后，我下定决心，一定是人家videojs的问题。突然莫名的兴奋，项目经理来问我这个问题，我也回复他说是人家videojs的问题，我一遍看着源码一遍撸着袖子准备给github上面提issue。

就这样，很多人都在我理直气壮的话语中刷新着。过了一段时间，有一天广东这边来了台风公司的网速不知道是不是太阳黑子加上所谓的龙卷风的淫威之下趋于平缓（简直是慢的可怕）。然后加上公司来了几个比较有名的教师，我正好有另外的bug在调试，需要不断的进出直播间。

然后问题就出现了：我发现上一个直播间的数据在新直播间一闪而过（当时为了调试另一个问题，把loadding去掉了），我突然就想起了什么。

讲师在后台打开直播间的时候才会去申请流地址的，所以未打开直播间的时候切换是没有问题的，当我打开直播间之后，原来是我每次都把上一次的数据保存到localStorage里面，等到下次再进入直播间的时候首先是使用上一次保存的流地址，然后就会呈现出那种状况，当页面刷新的时候就会再次使用前一次的流地址就会是正常的。
修改代码很简单：

分离出需要缓存的数据，用另一个字段进行存储
去掉 mutations 逻辑和初始化的时候中的缓存代码即可

//  window.localStorage.setItem('tableData', JSON.stringify(state.tableData))
 //  state.tableData = JSON.parse(window.localStorage.getItem('tableData'))

四：说在最后

其实这着实是一件很小的事情，但是着实让我羞愧了一大把。作为一个比较严谨的程序人，我们不仅要会学习，还要对自己的代码有严格的把关。有的时候，问题虽然很小但是映射出很多大的智慧。对自己写的代码自信是一件好事儿，但是盲目自信却能让别人对你的评价、整个团队的评价下一个档次。俗话说的好智者千虑、必有一失、人非圣贤、孰能无过，总之对于自己产出的代码还是要小心的求证，力求完美。

点击查看更多内容