ジャバスクリプト---> [コード最適化]複合機能データ同期&&文言の非同期書き込み要求に

説明

今日構造最適化プロジェクトは、以下の機能を発見しました

const drawMqiPie = async (index) => {
  // 请求的参数
  let params = {
      lineNo: lineNo,
      direct: 1,
      driveway: 1,
      pageNum: 0,
      pageSize: 0,
      computeRange: 3,
      detectDate: $('#detectYear').val() + '-01-01'
  }
  // 请求的url
  let 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.
  2.データ処理：データ要求バックアヤックス、変更オプションに基づいて
  、最終的なドローとオプションドム：3.ペイント。
• この関数は、以下のように変更した後、

// 画折线图
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);

説明：
このように、地獄を取り除くために非常にエレガントな非同期コールバックメソッドすることができます。読んで維持するためのプログラムを見て、より美しく、より便利なフォローアップを行います。