11.1 20171009-李偉&舒曼 · 代碼審核結果

`審核人：謝洋` `被審核代碼負責人：李偉&舒曼` `代碼地址：https://192.168.1.240:8443/svn/repos/kunming` ### 存在的問題 #### 1、代碼可讀性優化（未修改）代碼應該空格的地方未留空，可讀性降低。這種情況在變量名或其他自定義名稱過長的情況下尤為明顯 ```javascript renderJQProportion:function(data) { var jingqingProportionChart = require('jingqingProportionChart') jingqingProportionChart.drawCharts('#jingqingProportionChart',data,{}) } ``` 解決方案： ```javascript renderJQProportion: function (data) { var jingqingProportionChart = require('jingqingProportionChart') jingqingProportionChart.drawCharts('#jingqingProportionChart', data, {}) } ``` > 注意：該項目中的代碼普遍存在這個問題，在編寫代碼的時候注意 #### 2、代碼規范問題（未修改） ```javascript diandongchetop5: function(data) { for (var i = 0, length = data.length; i < length; i++) { data[i].name = data[i].name.substring(0, data[i].name.indexOf('分局')) } var bar = new DiandongcheBar() bar.updateData(data) } ``` 存在的問題： 1、函數名未使用駝峰命名方式 2、在屬性或方法的級聯調用超過3層以上時，盡量采用換行的方式 3、此問題不止這一處解決方案： ```javascript dianDongCheTop5: function (data) { for (var i = 0, length = data.length; i < length; i++) { data[i].name = data[i] .name .substring( 0, data[i] .name .indexOf('分局') ) } var bar = new DiandongcheBar() bar.updateData(data) } ``` #### 3、注釋問題（未修改）注釋應該與代碼的縮進保持同步 ```javascript /** * 引用Mock數據 */ require('data/infocenter/overview/index.js') /** * 引入業務模塊 */ var alarmcount = require('./server.js') ``` 解決方案： ```javascript /** * 引用Mock數據 */ require('data/infocenter/overview/index.js') /** * 引入業務模塊 */ var alarmcount = require('./server.js') ``` #### 4、數據未做異常處理（未修改）在數據為none或undefined的時候容易引起報錯 ```javascript request.sendAjax(apiURL.map, function(data) { map.alarmcount(data.alarmcount) mapChart.updateData(data.map) }) ``` 解決方案：使用try catch或者使用if檢測數據的合法性 #### 5、函數名可讀性優化（未修改） ‘jjqs’這種函數名不利于管理和維護 ```javascript jjqs:function(data) { trendChart.drawCharts('#jiejingtrendChart',data,{}) } ``` 解決方案：建議使用可讀性更強的名稱 #### 6、變量優化（未修改）未使用到的引用或只需引入庫而不需要申明引用的變量不需要使用var保存 ```javascript var Map = require('../../../charts/map.js') var rectBar = require('../../../charts/takepolice/rectBar.js') ``` 解決方案： ```javascript require('../../../charts/map.js') var rectBar = require('../../../charts/takepolice/rectBar.js') ``` #### 7、css累贅（未修改）重復聲明了兩次 vertical-align 屬性 ```css .ove-ser-cartogram .value { display: inline-block; width: 160px; vertical-align: text-bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } ``` 解決方案：去掉前面的一個屬性，保留最后的一個同名屬性 ```css .ove-ser-cartogram .value { display: inline-block; width: 160px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } ``` #### 8、css縮進優化（未修改） ```css .ove-ser-cartogram .name { display: inline-block; width: 320px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; } ``` 解決方案：請保持所有同級的樣式使用相同的縮進 ```css .ove-ser-cartogram .name { display: inline-block; width: 320px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; vertical-align: middle; } ``` #### 9、css書寫順序優化（未修改） ```css .groupsales rect:first-of-type { transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; /*transform: skewY(30deg) translateY(-20px);*/ transform: skewY(10deg) translateY(-20px); -webkit-transform: skewY(10deg) translateY(-20px); } ``` 解決方案：通常將不帶前綴的css屬性寫在帶前綴的屬性之后，以保持瀏覽器的最佳兼容性 ```css .groupsales rect:first-of-type { -webkit-transform: skewY(10deg) translateY(-20px); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; transform: skewY(10deg) translateY(-20px); } ``` #### 10、存在錯誤的css代碼（未修改） ```css .distributed-control-time li { border-width: 1px solid; border-style: solid; border-color: rgb(24, 48, 80); border-radius: 3px; background: linear-gradient(-90deg, rgba(20, 54, 83, 0.43137) 0%, rgba(23, 43, 80, 0.54) 50%, rgba(5, 18, 38, 0.55) 52%, rgba(15, 45, 71, 0.65098) 100%); width: 62px; height: 62px; display: inline-block; line-height: 62px; text-align: center; font-size: 28px; color: #2c6377; cursor: pointer; position: relative; } ``` 解決方案： ```css .distributed-control-time li { border-width: 1px solid; } ``` 這種寫法瀏覽器無法解析，建議border的三個基本屬性都存在的情況下建議采用簡寫的方式： ```css .distributed-control-time li { border: 1px solid rgb(24, 48, 80); } ``` 另外注意background屬性過長時為了保持可讀性應該盡量換行 ```css .distributed-control-time li { background: linear-gradient( -90deg, rgba(20, 54, 83, 0.43137) 0%, rgba(23, 43, 80, 0.54) 50%, rgba(5, 18, 38, 0.55) 52%, rgba(15, 45, 71, 0.65098) 100% ); } ``` #### 11、建議不要在項目中出現情緒化的表現詞（未修改） ```css /*20170928-fuck*/ .right-wrap .alarm{ left:2354px; background: url(../../images/takepolice/alarm-bg-right.png) no-repeat; background-size: 100% 100%; } ``` 解決方案：雖然有時寫代碼會遇到情緒化（特別是在改需求的時候），但是建議不要在代碼中出現類似語句。一是影響不好，二是以后忘了刪，被其他人看見就不好了！！