說明

今天優化項目結構,發現有如下一個函數

const drawMqiPie = async (index) => {// 請求的參數let params = {lineNo: lineNo,direct: 1,driveway: 1,pageNum: 0,pageSize: 0,computeRange: 3,detectDate: $('#detectYear').val() + '-01-01'}// 請求的urllet url = conf.URL + 'system/linePqi/list';// 調用方法獲取數據let data = await mar.$post(url, params);let pieData = [0, 0, 0, 0, 0];// 處理數據if (data.code == 200) {optionPie.series[0].data = [];option.xAxis[0].data = [];option.series[0].data = [];for (var i = 0; i < data.data.list.length; i++) {var everydata = data.data.list[i];everydata.mqi = (0.08 * everydata.sci + 0.7 * everydata.pqi + 0.12 * everydata.bci + 0.1 * everydata.tci);if (everydata.mqi >= 90) {pieData[0] = pieData[0] + parseFloat(everydata.endNum - everydata.startNum);} else if (everydata.mqi > 80) {pieData[1] = pieData[1] + parseFloat(everydata.endNum - everydata.startNum);} else if (everydata.mqi > 70) {pieData[2] = pieData[2] + parseFloat(everydata.endNum - everydata.startNum);} else if (everydata.mqi > 60) {pieData[3] = pieData[3] + parseFloat(everydata.endNum - everydata.startNum);} else {pieData[4] = pieData[4] + parseFloat(everydata.endNum - everydata.startNum);}}optionPie.series[0].data.push({ value: pieData[0] / 1000, name: '優', itemStyle: { color: colors[0], fontSize: 18 } });optionPie.series[0].data.push({ value: pieData[1] / 1000, name: '良', itemStyle: { color: colors[1], fontSize: 18 } });optionPie.series[0].data.push({ value: pieData[2] / 1000, name: '中', itemStyle: { color: colors[2], fontSize: 18 } });optionPie.series[0].data.push({ value: pieData[3] / 1000, name: '次', itemStyle: { color: colors[3], fontSize: 18 } });optionPie.series[0].data.push({ value: pieData[4] / 1000, name: '差', itemStyle: { color: colors[4], fontSize: 18 } });optionPie.title.text = "公路技術狀況MQI餅狀圖";mar.echarts.draw($dom, optionPie);layer.close(index);}
}

說明:
1.上面的函數是調用echarts畫圖功能,畫一個餅狀圖
2.雖然注釋寫的比較清楚,但后面過幾天來看,還是會帶來一定的閱讀障礙.

優化

• 下面開始優化
• 仔細閱讀函數可以發現,該畫圖函數主要分為3點
  1.獲取數據: 包括data、和Option
  2.處理數據: 根據Ajax請求回來的數據,更改Option
  3.畫圖: 根據最后的Option和Dom畫圖.
• 更改后的函數如下

// 畫折線圖
const drawLine = async (index) => {// 獲取數據let { data, optionLine } = await getLineData();// 處理數據optionLine = handleLineData(data, optionLine);// 畫圖mar.echarts.draw($domLine, optionLine);// 關閉加載頁面layer.close(index);
}

• 當你看到上面這樣的函數的時候,是不是感覺不那么慌了,
• 其實就做了一點點改進.

異步請求數據的同步寫法

• 寫在Mar類的通用方法里面.
• 主要是對jquery的$post方法的封裝:

class Mar {constructor( conf ){const { jquery } = conf;this.$ = jquery;}async $post (url, params) {// 調用jquery的ajax方法return this.$.post(url, params, '', 'json');}
}

• 調用該方法

const Mar = require('./Mar');
const jequery = require('./jequery');
const mar = new Mar({ jequery });
const url = 'http://xxx:port/path';
const params = {pageSize: 0,pageNo: 0
};let data = await mar.$post(url, params);
console.log(data);

說明:
通過這種方式,可以很優雅的實現異步方法.從而擺脫回調地獄的困擾。使程序看起來更美觀,更方便后續的閱讀和維護.