完全重构一个项目的前端代码

前提

  入职新公司，接手了前员工的一个前端项目，技术栈为vue。刚进入公司的时候，让我添加一个小功能，从首页点击选项跳转到对应页面，并携带点击点的参数，然后开启了我的痛苦修改bug阶段。

对之前的vue代码稍微理一下

• 所有文件组件代码都放在了views文件夹下，view文件夹内没有其他任何文件夹了
• 发送异步请求使用了vue-resource和axios两种方式
• 所有接口都是直接使用绝对地址，进行跨域请求
• ui组件库同时使用了elment-ui和iview
• 路由配置组件没有尽心按需加载
• 图标组件库同时使用了echarts和d3
• 使用了jquery操作DOM
• 所有无用代码依然保留在项目当中
• 一个一年左右的项目，我已经是第七任接手的前端开发人员了

  同时，新任领导，正在与局方洽谈项目二期开发，然而在当前版本上，我已经没有办法继续进行新一期的开发了。
  所有一切综合在一起，所以跟领导申请进行项目重构。这才导致连续一个多月，没有进行任何文章的更新了。经过前端重构，测试重新测试，项目在今天终于准备上线了，利用上线之前这一段时间，稍微总结一下，这一项目的重构。
  重构的目的是可以进行新一期的继续开发，修改发现的bug，减少无谓的数据请求，由于该项目是没有设计图的，所以还得考虑页面布局。

---

重构之后的技术栈

• 依然是vue项目
• UI库采用element-ui
• 发送请求使用axios
• 取消所有的跨域请求
• 路由按需加载
• 图标库使用echarts
• 删除jquery

  至于过程和修正业务逻辑部分不做任何表述。主要稍微简要介绍一些用户体验方面的修改。
1.关于echarts图标绘制，首先确定所有基础项配置属性，最起码在页面出来的时候，绘制出来图形基础。直接配置option。

init () {
  this.$nextTick(function () {
    if (!this.myChart) this.myChart = this.$echart.init(this.$refs.ref)
    this.myChart.setOption(this.option)
  })
}         

这块其实很容易理解，初始化图标，需要在当前组件DOM绘制完成之后。
然后数据请求回来之后，对数据进行处理。

const series = ...
this.myChart.setOption({series})

这里需要理解echarts的实例方法setOption

设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
此时，echarts图表绘制基本完成，考虑到用户体验，还需要监听浏览器resize事件，此时，echarts也提供了echarts的实例方法resize，所以只要监听了window.onresize，然后调用echrtsInst.resize()即可。

window.addEventListener('resize', () => {
  if (this.myChart) this.myChart.resize()
}, false)

前后也就三行代码，给人的体验是完全不一致的。
剩下的其实就是代码规范之类的。

---

建议

代码组织，按照vuejs官方风格指南。
代码规范，采用eslint进行约束，虽然第一次使用，需要配置idea开发工具（因为我们基本上都会装上prettier插件），比较麻烦，但是后面真是一劳永逸的工作。

转载于:https://www.cnblogs.com/zhuhuoxingguang/p/11433248.html