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

前提

  入职新公司,接手了前员工的一个前端项目,技术栈为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

你可能感兴趣的:(完全重构一个项目的前端代码)