8.13 20171027-廖爽 · 代码审核结果

`审核人：谢洋` `被审核代码负责人：廖爽` `代码地址：http://192.168.1.170/hyfe/demo-project/tree/master/demo-liaoshuang` > 注：此文档只作为上一篇的补充，重复问题已省略 ### 存在的问题 #### 1、DOM结构优化（已修改） 1. 在标签内没有任何内容的时候，建议不要单独留出空行。 2. 建议不要采用内部样式表（内联样式表和内嵌样式表）的写法，尽量将样式写进单独文件，采用外联（外部样式）的方式，通过 <link /> 标签引入 HTML 结构中。另外，内部样式非常不利于维护。 3. 另外 css 命名不建议使用驼峰命名，虽然 HTML 对大小写不敏感，但 js 或 jsp 等对大小写是敏感的，容易造成‘一个小问题找半天’的情况。 ```html <section class="ruleNum"> <svg class="ruleSvg" height="600" width="1000"> </svg> </section> ``` 解决方案： ```css /*style.css*/ rule-svg { width: 600px; height: 1000px; } ``` ```html <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <section class="rule-num"> <svg class="rule-svg"></svg> </section> ``` #### 2、js句尾分号问题（已修改，哈哈）保持句尾分号的统一，要么全部使用分号，要么全部不用。建议全部不用。 > 友情提示：慢慢习惯吧，我也是这么走过来的！因为大家都不用，我也不好意思用了！ #### 3、画图时变量保存的问题（已修改）建议属性值使用变量保存，统一使用，最好加上变量的注释，这样随处可见数字的写法使得代码质量非常差，也非常不利于维护。 ```javascript cir.append("circle") .attr("class", "brandC1") .attr("cx", 500) .attr("cy", 300) .attr("r", 105) cir.append("circle") .attr("class", "brandC2") .attr("cx", 500) .attr("cy", 300) .attr("r", 117) //省略了部分重复的代码 ``` 解决方案： ```javascript // 圆的class var style = ['c1', 'c2'] // 圆的x坐标 var cx = 500 // 圆的y坐标 var cy = 300 // 圆的半径 var r = [105, 117] cir.append("circle") .attr({ "class": function (d, i) { return "brand-" + style[i] } "cx": cx, "cy": cy, "r": function (d, i) { return r[i] } }) ``` #### 4、Number类型和String类型不要混用（已修改）数字和字符串是js里面的两个基本类型，既然是两个独立的类型，在能传数字的地方尽量传数字，而不要选择字符串类型的数字，这个可以避免很多的坑：比如 ```javascript var num = 123 var str = '123' console.log(num == str) //true console.log(num === str) //false ``` 同时也可以避免在很多时候不必要的数据转换建议修改的代码： ```javascript circle("5", "#ff0", "none", "none", "tongbi") circle("5", "#ff0", "none", "none", "huanbi") ``` 解决方案： ```javascript circle(5, "#ff0", "none", "none", "tongbi") circle(5, "#ff0", "none", "none", "huanbi") ``` 如果可能，请节约传参的数量和保持传参的质量（"none"，"none"看起来很low） #### 5、mock数据优化（已修改） ```javascript 'carNum1': [{ 'name': '机动车总数', 'value|100000-9999999': 1 }, { 'name': '网约车总数', 'value|1000-9999999': 1 }, { 'name': '重点总数', 'value|10000-9999999': 1 }, { 'name': '货车总数', 'value|100-9999999': 1 } ] ``` 解决方案： ```javascript 'carNum1|4': [ { 'name|+1': ['机动车总数', '网约车总数', '重点总数', '货车总数'], 'value|100000-9999999': 1 } ] ``` #### 6、尽可能地验证数据（修改中）未验证的数据存在很大的安全隐患，也为后期增加了许多bug的风险 ```javascript request.sendAjax(baseConfig.trafNum, function(data) { trafNum(data) }) ``` 解决方案: ```javascript request.sendAjax(baseConfig.trafNum, function (data) { if (data) { trafNum(data) } ) ```