`审核人：张红桥` `被审核代码负责人：廖爽` `代码地址：http://192.168.1.170/hyfe/demo-project/tree/master/demo-liaoshuang` #### 1、class命名不规范（已修改） 文件名：`style/index.css` ```css .carTitle { width: 644px; height: 96px; background: url(../images/car_title.png) no-repeat; background-size: 100% 100%; padding: 25px 0 0 60px; } ``` 解决方案：class命名中间使用-隔开(eg: car-title)，css不建议使用驼峰命名，js使用驼峰命名 #### 2、JS文件命名不规范（已修改）  解决方案：JS文件在命名时，要结合实现的功能和具体业务模块相关，让维护的人看到文件名称就大概能猜到该文件中实现的功能包括哪些。 #### 3、JS文件头部注释错误（已修改） 文件名：`scripts/index.js` 文件名：`scripts/test.js` ``` /** * @Author: baizn * @DateTime: 2017-01-17 09:24:27 * @Description: 测试主JS文件 * @Last Modified By: baizn * @Last Modified Time: 2017-01-17 09:24:27 */ ``` 解决方案： 头部注释要注释清楚Author、time、描述该文件的主要功能 #### 4、js文件注释太少（已修改） 文件名：`scripts/page1.js` ``` define(function(require) { require('jquery') var request = require('request') var baseConfig = require('baseConfig') var carNum = require('carNum') require('carNumData') var roadFlow = require('roadFlow') require('roadFlowData') var brandDis = require('brandDis') require('brandDisData') var ruleNum = require('ruleNum') require('ruleNumData') var trafNum = require('trafNum') require('trafNumData') var Test = { /** * 初始化 * * 页面模块数据请求 执行绘制 * */ init: function() { request.sendAjax(baseConfig.carNum, function(data) { carNum(data) }) request.sendAjax(baseConfig.roadFlow, function(data) { roadFlow(data) }) request.sendAjax(baseConfig.brandDis, function(data) { brandDis(data) }) request.sendAjax(baseConfig.ruleNum, function(data) { ruleNum(data) }) request.sendAjax(baseConfig.trafNum, function(data) { trafNum(data) }) } } return Test }) ``` 解决方案： 建议注释清楚引入的每个图表是页面上对应的哪个图表，请求的数据是请求的具体哪部分的数据 #### 5、JS文件中的方法注释不全（已修改） 很多方法及关键逻辑处缺少注释。 解决方案：建议补全所有方法的功能注释，如: ```javascript /** * 绘制图表 * @param {string} id 容器id * @param {array} data 图表数据 * @param {object} opt 图表配置项 * * example: * [ * { * name: '江北区', * value1: 1140, * value2: 740 * } * ] */ drawCharts: function(id, data1, opt) { ... } ``` #### 6、JS语句尾部分号（已修改） JS文件中建议省略所有分号。 #### 7、图表Y轴取值不灵活（未修改，故意设置的额） 文件名：`charts/trafNum.js` ``` var tickValues = [-50, -40, -30, -20, -10, 0, 10, 20, 30, 40, 50]; // y轴要显示的刻度值 var tickValues1 = [-50, -40, -30, -20, -10, 10, 20, 30, 40, 50]; // 移除网格0位置的绘制 ``` 解决方案：这两组数组应动态从后端传的数据取值，要考虑到真实数据范围不会是固定的从-50到50之间 #### 8、函数长度太长 所有逻辑都写在了一个方法里面（已修改） 文件名：`charts/trafNum.js` charts里面的大部文件都有该问题，此文件较明显 解决方案：一个函数的长度控制在 50 行以内。将过多的逻辑单元混在一个大函数中，易导致难以维护。一个清晰易懂的函数应该完成单一的逻辑单元。复杂的操作应进一步抽取，通过函数的调用来体现流程。 #### 9、单行代码太长（已修改） 文件名：`charts/trafNum.js` ``` var yScale = d3.scale.linear() .domain([-50, 0, 50]) .rangeRound([(height - padding.top - padding.bottom), (height - padding.top - padding.bottom) / 2, 0]); ``` 解决方案：一行不超过80个字符，建议将rangeRound里面的取值先计算出来用一个变量保存起来然后直接使用 #### 10、对象里面创建了多个函数（未修改，学习中待考虑） 文件名：`charts/*.js` 该文件夹下面的文件都有些问题  这样创建方法会影响图表渲染性能，每次在调用的时候都要重新创建该方法 解决方案：建议将这些方法定义成对象里面的属性，如: ``` var draw = function(data) { temp: function(data) { // code ... }, drawSvg: function(valArr, inx, selec) { // code ... } } ``` #### 11、所有图表都未做update、enter、exit处理（未修改，待学习） 解决方案：可以先看下精通D3.js（4.5选择集的处理） #### 12、Mock数据字段定义不规范（已修改） 货船和客舱是是固定的两个字段，无需返回array，图片由前端自己切图，images字段不需要 文件名：`mockData/carNum.js` ``` 'carNum2': [{ 'name': '货船', 'images': Mock.Random.image('200x100', '#2688CF', '#FFF', 'Photo'), 'value|10-999999': 1 }, { 'name': '客船', 'images': Mock.Random.image('200x100', '#2688CF', '#FFF', 'Photo'), 'value|10-999999': 1 } ] ``` 解决方案：建议将carNum2改成object类型，images字段去掉