`審核人：張紅橋` `被審核代碼負責人：廖爽` `代碼地址：http://192.168.1.170/hyfe/demo-project/tree/master/demo-liaoshuang-es6` #### 1、圖表組件的位置存放錯誤（已確認） 解決方案:所有圖表放在charts文件夾，Script文件夾放業務代碼 #### 2、new Object 不應該放在init方法里面，這樣會造成每次數據發生變化時都要new一次（已確認） `scripts/*.js` (index.js除外) ``` /** * 車輛管理-高速路口流量 * @param {object} data [后臺數據] * @return {none} none */ let init = (data) => { let road = new Road(data) road.init() // 執行實例 } ``` 解決方案：new Object只執行一次，init()方法只負責重新渲染數據 #### 3、ES5和ES6語法混用（已確認） `scripts/*.js` (index.js除外) ``` var paths = node.append('g') paths.selectAll('path') .data(self.dataArr()) .enter() .append('path') .attr('transform', `translate(${config.padding.left}, ${config.padding.top})`) .attr('d', function(d) { return linePath(d) }) .attr('fill', 'none') .attr('stroke-width', 2) .attr('stroke', function(d, i) { return config.color[i] }) ``` 解決方案：建議將function改為箭頭函數 ``` var paths = node.append('g') paths.selectAll('path') .data(self.dataArr()) .enter() .append('path') .attr('transform', `translate(${config.padding.left}, ${config.padding.top})`) .attr('d', (d) => linePath(d)) .attr('fill', 'none') .attr('stroke-width', 2) .attr('stroke', (d, i) => config.color[i]) ``` #### 4、定義變量使用let或const（已確認） `scripts/*.js` (index.js除外) 解決方案：將var 變改為let 或const #### 5.變量取值可使用解構賦值（已確認） `scripts/rafNum.js` ``` let self = this let config = self.config let left = config.padding.left let top = config.padding.top ``` 解決方案： ``` let self = this let config = self.config let { left, top } = config.padding ``` #### 6.svg通用js創建，通過配置項設置svg的屬性，增強組件的可復用性（已確認） `scripts/*.js` (index.js除外) ``` let svg = d3.select('.trafsvg') .attr('width', config.width) .attr('height', config.height) ``` 解決方案：svg在構造函數中創建，通過配置項設置屬性,如: ``` /** * Creates an instance of RectBar * @param {string} selector 容器元素選擇器 * @param {object} opt 圖表組件配置項 */ constructor(selector, opt) { // 獲取配置項 const defaultSetting = this.defaultSetting() const { width, height, itemStyle } = this.config // 創建svg元素 const svg = d3.select(selector) .append('svg') .attr('width', width) .attr('height', height) } ``` #### 7.constructor使用不恰當（已確認） `scripts/*.js` (index.js除外) ``` constructor(data) { this.config = { width: 1000, height: 600, padding: { top: 50, right: 50, left: 50, bottom: 50 } } this.data = data } ``` 解決方案：constructor函數應用來執行圖表的一些初始化操作，而不是保存配置項，配置項另用一個方法保存 #### 8.方法多余的注釋未刪除（已確認） `scripts/*.js` (index.js除外) ``` /** * x軸比例尺 * @example: [none] * @return {Function} [比例尺] */ xScale() { ... } ``` 解決方案：沒有example應該刪除@example: [none]注釋 #### 9.js文件中有多余分號（已確認） `scripts/rafNum.js` ``` // 額外設置網格線條寬度 d3.selectAll('.traf-yaxis1') .attr('style', `stroke-width: ${spac}px;`) ``` 解決方案： JS文件中建議省略所有分號。