`审核人：张红桥` `被审核代码负责人：廖爽` `代码地址：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文件中建议省略所有分号。