`审核人：白占宁` `被审核代码负责人：李祁` `代码地址：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中实现，少定义一个方法，上一次方法调用。