前提
入職新公司，接手了前員工的一個前端項目，技術棧為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插件），比較麻煩，但是后面真是一勞永逸的工作。