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) } ) ```