2018第一季度工作总结-遇到的困难和解决

最新推荐文章于 2020-12-28 09:48:03 发布

baizaozao

最新推荐文章于 2020-12-28 09:48:03 发布

阅读量4.5k

点赞数 1

分类专栏：前端学习文章标签：工作

本文链接：https://blog.csdn.net/baizaozao/article/details/79643332

版权

前端学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

遇到的困难和解决办法

1. 两个组件之间数据同步

描述：篇章加工和整书加工都是对篇章的处理，区别是角度不同，一个是从篇章的角度，一个是从整书的角度
原来做法：两个组件的数据互相独立，自己操作自己的，自己管理自己的定时器
问题：每当其中一个tab对篇章进行过操作，篇章的状态就会发生变化，在被操作的这个tab页里面，是没有问题的，可以定时发请求，更新数据；但是要保证两个页面数据同步就难了
解释：因为是两个不同的组件放在了两个tab页中，这个问题就成为了组件与组件之间数据共享的问题
解决1：emit on，两个组件分别都是发布者和订阅者，利用vue自带的方法，当数据发生变化的时候，互相发送消息，从而更新数据。
这种解决办法其实有违了订阅者模式的初衷，如果双方之间互相都是发布者和订阅者就没有必要采用emit on的模式了，事实证明，我也没有搞成功，囧snow
解决2：vuex。当某个数据被多个组件（兄弟组件，父子组件）共享使用时，就可以使用vuex，vuex相当于是个中心管理者，谁需要数据，谁就可以从这儿拿。一拍脑袋，这不刚好适合我现在两个页面吗？而且事实证明这两个页面后来衍生出来的子组件，也是直接需要这个数据的

总结：因为之前部门老大说过vuex比较重量级，能不用就要用，尤其是对一些简单的单页面应用，最好是避免使用，然后就一直也没有往这个方面想。任何时候不要为了不去做一件事情就不去做一件事，也不要为了做某件事而去做某件事，任何过程任何技术手段的使用，都是由目的驱动的。

2. 路由切换与定时器的开启关闭的问题

描述：问题是这样来的
- 篇章加工页为例，里面会有很多的子功能，这些子功能都是前端发一个请求，后台首先去调用引擎执行任务，然后不断更新任务状态和引擎的返回结果
- 而前端需要做的就是在发送了请求之后，启动定时器，不断地去更新任务状态，并根据任务状态决定什么时候停止计时器
原来做法：没有考虑的很清楚，只考虑一本书刊下的任务，没有考虑切换书刊后，原来书刊的定时器应该停止
解决：其实这个问题是分两种情况的
- 第一种是同一个路由下切换，同一指的是只变化书刊id，不切换到除了篇章加工外的其他书刊上去
- 第二种是不同路由下切换，指的是切换到其他功能菜单下
针对第一种：
- 建立对 $route的监听，$ route里面包含了路由后面的参数配置，对$route的监听相当于对书刊id切换的监听。
- 在每次监听到变化时，关闭当前的计时器，并重新开启计时器，又关又开的目的是为了改变定时器中发送请求参数中的书刊id
针对第二种：
- 在beforeDestroy中清空相关的变量，然后关闭原来的定时器
- 在mounted或者created中开启定时器（定时器判断停止的逻辑写在开启后的内部，如果没有任务，则发一条之后会立即终止）
  
  总结：每当做好一个小功能点，到了一个节点之后，应该回过头来总结一下解决问题的方式，包括遇到的问题有没有什么相似性，有没有什么相似的解决办法，做好分类，做好归纳

3. 判断任务是否执行完毕的方法，是否需要关闭定时器

描述：因为任务会有很多种，但是对于前端显示和控制来说是类似的，所以就想着用一个组件通过传递不同的参数来控制
问题：每一种任务都有不同的名字，每种任务停止的判断条件都是不一样的，比如排版的终止就是“已排版或者排版失败”如果是“排版中”，就需要继续发送请求刷新状态值
原来做法：用一个map把所有任务存储起来，key是任务类型（排版），value是任务队列（list），每完成一项，删除一个list值，每完成一组任务，删除一个key value。如果map为空，则终止计时器
原来做法的问题：非常死板，容易出错，如果系统新打开之后有没处理完的任务，不会自动触发定时器，刷新状态
解决：思维提高一层，不将任务做划分，找到状态的规律，判断只要list中的状态没有“xx中”,，就关闭，反之，则定时器一直开启。简化了整个流程。

总结：是一种思维定势，还是要多借鉴别人的方法，别人的思维方式，尽可能不要将自己的思维固定在一个小范围，提升眼界，学会从大角度看问题

4.多个组件会import同一个子组件，在这个子组件中添加watch变量则会执行多次

描述：这个问题是偶然发现的，发现原来在篇章加工和整书加工中，对$route监控中的代码和请求会执行两次，而不是我预想中的一次
解决：尽可能将watch中的变量提升一级，不要将监听放在需要多次被引入的组件中。包括created和destroy中对定时器的控制，也应该写在父组件中，避免执行多次

5.element中的表格和tab一起用时，会带来一些问题

描述

问题1：切换tab页，切换后的tab中的表格会先将每一列的宽度缩为最小比例，闪一下才恢复到自适应宽度
问题2：表格初次加载会特别慢，尤其是数据量大的时候，特别特别慢

解决

问题1：闪一下是因为状态请求每个2s才会发送一次，所以每次切换tab的时候先发送一次getlist请求就可以
问题2：
- 添加v-loading指令，以及element-loading-text="正在加载数据，请给我一点时间"加载提示文本，友好用户体验
- list懒加载，每次加载20条，自定义loadmore指令
  v-loadmore="loadMore"

loadMore() {
        this.numSection = this.numSection + 10
      },

Vue.directive('loadmore', {
  bind(el, binding) {
    const selectWrap = el.querySelector('.el-table__body-wrapper')
    selectWrap.addEventListener('scroll', function() {
      // console.log('scroll')
      let sign = 100
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      if (scrollDistance <= sign) {
        binding.value()
      }
    })
  }
})

new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})