8.11 20170908-譚俊 · 代碼審核結果

`審核人：白占寧` `被審核代碼負責人：譚俊` `代碼地址：http://192.168.1.170/hyfe/demo-project/tree/master/demo-tanjun` #### 1、HTML中標簽使用不當（未修改）文件名：`pages/index.html` ``` <i class="text" value="date">今日</i> <i class="text" value="week">本周</i> <i class="text" value="month">本月</i> ``` 解決方案：`i`標簽一般用于icon，普通文本建議使用`span`標簽。 #### 3、JS文件命名不規范（未修改） ![](https://box.kancloud.cn/97e7e16b7fc0b89ed7d028e0b9d78376_354x152.png) 解決方案：JS文件在命名時，要結合實現的功能和具體業務模塊相關，讓維護的人看到文件名稱就大概能猜到該文件中實現的功能包括哪些。 #### 3、JS代碼可讀性差（未修改）文件名：`scripts/page1.js` ``` getNowTime: function(){ //獲取最新時間 var times = { date:'', time: '' }; var now = new Date(); times.date = now.getFullYear() + '.' + ((now.getMonth()+1)>9?(now.getMonth()+1):'0'+(now.getMonth()+1)) + '.' + (now.getDate()>9?now.getDate():'0'+now.getDate()); times.time = (now.getHours()>9?now.getHours():'0'+now.getHours()) + ':' + (now.getMinutes()>9?now.getMinutes():'0'+now.getMinutes()); return times; } ``` 以上代碼可讀性較差，代碼是寫給人看的，偶爾讓機器執行一下而已。解決方案：拆分較長的變量拼接，通過使用局部變量簡化代碼。 #### 4、模板文件引入地方可優化（未修改）文件名：`scripts/page1.js` ``` renderTopTitle: function(){ var url = baseConfig.pageTitle; var pageT = require('../templates/topMenu.tpl'); renderRightContent: function(sTime,eTime){ var url = baseConfig.pageRight+'/'+sTime+'/'+eTime; var pageT = require('../templates/rightContent.tpl'); ``` 解決方案：建議所有模板文件都在文件最開始位置統一引入。 #### 5、JS語句尾部分號（未修改） JS文件中建議省略所有分號。 #### 6、緩存多次使用到的DOM元素（未修改）文件名：`scripts/page1.js` ``` if (!$('#rightBanner').length){ $('#temppage').append('<div id="rightBanner" class="right-banner"></div>') } if ($('#rightBanner').length){ $('#rightBanner').fadeOut('fast',function(){ $('#rightBanner').html(hPage(data)); $(this).fadeIn(); }) }else{ $('#rightBanner').html(hPage(data)); $('#rightBanner').fadeIn(); } ``` 解決方案：緩存`$('#rightBanner')`，將`$('#rightBanner')`存放到一個變量中，只獲取一次DOM元素。 #### 7、JS中模塊劃分不清晰（未修改）文件名：`scripts/page1.js` ``` renderGeo: function(sTime,eTime){ var url = baseConfig.cqGeoData+'/'+sTime+'/'+eTime; var pageT = require('../templates/cqGeo.tpl'); var hPage = Handlebars.compile(pageT); request.sendAjax(url, function(data){ if (!$('#cqgeo').length){ $('#temppage').append('<div id="cqgeo" class="geo-area">'); } data.total.num = data.total.num.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,'); if ($('#cqgeo svg').length){ $('#cqgeo svg').fadeOut('fast',function(){ $('#cqgeo').html(hPage(data)); cqGeo.init('#cqgeo',data); $('#cqgeo svg').fadeIn(); }); }else{ $('#cqgeo').html(hPage(data)); cqGeo.init('#cqgeo',data); $('#cqgeo svg').fadeIn(); } }) } ``` 類似以上代碼，將ajax請求、業務代碼及渲染等操作混雜到一起，非常不利用后期維護。解決方案：按具體模塊、具體功能詳細地劃分模塊，嚴格遵守函數單一職責，即每個函數只做一件事。 #### 8、元素樣式使用CSS實現（未修改）文件名：`scripts/page1.js` ``` body.style('background', "url(../images/bg.png) center center no-repeat")//設置body背景 .style('background-size','100% 100%'); ``` 解決方案：在CSS文件中設置body元素的樣式，禁止使用JS實現類似功能。 #### 9、JS代碼中注釋不完整（未修改）文件名：`scripts/page1.js` 很多方法及關鍵邏輯處缺少注釋。 #### 10、Mock數據引入問題（未修改）在業務代碼中，只引入Mock數據的主文件，其他mock數據都應該被包含到主文件中。