`審核人：白占寧` `被審核代碼負責人：李祁` `代碼地址：http://192.168.1.170/hyfe/demo-project/tree/master/demo-liqi-es6` #### 1、定時刷新調用對應的請求方法（已修改） ``` if (update) { setInterval(() => { charts.render() }, duration) } ``` `request.js`中封裝了定時請求的API，在請求數據時候調用該API即可。 #### 2、CSS中各屬性的順序（僅建議） ``` .container { width: 100%; height: 100%; display: flex; flex-wrap: wrap; } ``` 參考《CSS編碼規范》，注意CSS中各屬性的建議順序。 #### 3、【嚴重】項目結構不對（未修改） 業務代碼統一放到`scripts`文件夾下面，不要在`apps/xxx/`下再新建charts文件夾，公用的圖表組件統一放到`src/charts`目錄下。 說明：可能以后會復用到的圖表組件，統一放到`src/charts`目錄下，demo項目中`src/charts`目錄下的組件如果不需要可以全部刪除掉。 #### 4、功能實現方式優化（已修改） ``` // 定義漸變元素 // ========== const hbGradient = svg.append('linearGradient') .attr('id', 'hb_gradient') hbGradient.append('stop') .attr('offset', '0%') .style('stop-color', '#e11d1d') hbGradient.append('stop') .attr('offset','50%') .style('stop-color', '#ed772b') ``` 類似創建漸變、過濾器等所有定義到defs中的內容，建議寫到模板里面，減少JS代碼量。 #### 5、不必要的中間變量（已修改） ``` const lineTBG = svg.append('g') const lineHBG = svg.append('g') this.lineTBG = lineTBG this.lineHBG = lineHBG ``` 修改為： ``` this.lineTBG = svg.append('g') this.lineHBG = svg.append('g') ``` 不局限于這兩行代碼，其他類似問題都做同樣的處理。 #### 6、一行不超過120個字符（已修改） ``` .attr('x2', this.config.axis.width + this.config.padding.left - this.scaleX.rangeBand() / 2) M0,242.55Q100,368.445,125,386.925C162.5,414.64500000000004,212.5,416.95500000000004,250,427.35S337.5,481.34625000000005,375,456.225S462.5,314.44875,500,259.875Q525,223.49249999999998,625,92.39999999999998 ``` 適當的換行，提供代碼可讀性。 #### 7、【嚴重】業務代碼和圖表組件代碼分離（已修改） ``` renderBelong() { fetch(url, d => { this.dataset = d this.drawAxis() this.drawLines() }) } ``` #### 8、【嚴重】update和enter部分設置公用屬性的代碼封裝成單獨的方法調用（已修改） D3中update和enter部分，處理樣式的代碼基本一致， 將這些能夠復用的代碼封裝成一個方法，減少代碼量，提升復用率。 #### 9、【嚴重】注釋不完善（已修改） 部分文件中注釋不全或缺少必要的注釋。 #### 10、【嚴重】命名不規范（已修改） ``` 'url': '/cars_count', ``` 存在URL命名不規范、圖片命名不規范的問題，在所有命名中，禁止出現下劃線形式，包括變量名、方法名、類名、文件名、圖片名、URL等。 #### 11、【嚴重】定義的變量沒有使用（未修改） ``` let that = this let update = this.pieG.selectAll('polyline').data(piedata) ``` 定義了that變量，后面的代碼沒有使用到該變量。 #### 12、【中等】數據傳參方式（未修改） ``` render(dataset) { this.dataset = dataset this.drawPie() } ``` 不用定義實例變量，將數據源作為參數傳遞給渲染方法，另外，`this.drawPie()`方法體可以全部在render中實現，少定義一個方法，上一次方法調用。