`審查人：白占寧` `被審查代碼負責人：劉黎` `代碼地址：http://192.168.1.170/hyfe/demo-project/tree/master/demo-liuli` ### 存在的問題 #### 1、頁面細節問題 - 右邊值班人員姓名未垂直居中； - 地圖上面的圓圈是根據數據量大小變化的； - 頁面背景整體色調不對。 #### 2、封裝的toThousands方法功能不對 ``` function toThousands(num) { var result = '', counter = 0; num = (num || 0).toString(); for (var i = num.length - 1; i >= 0; i--) { counter++; result = num.charAt(i) + result; if (!(counter % 3) && i != 0) { result = ',' + result; } } return result; } ``` 輸入`toThousands(1011.01)`，輸出`1,011,.01`。 解決方案：直接使用toLocalString方法，或使用如下實現方式。 ``` function toThousands(number){ //判斷是整數還是小數parseInt(number)==number var n = 0; var re = ''; if(number){ if(parseInt(number, 10) == number){ re = /(\d{1,3})(?=(\d{3})+(?:$|\D))/g; }else{ re = /(\d{1,3})(?=(\d{3})+(?:\.|\D))/g; } var renumber = number.toString(); n = renumber.replace(re,"$1,"); return n ? n : 0; } return n; } ``` #### 3、所有圖表需要的數據都應該從index.js中通過參數傳遞給各個渲染的方法 ``` init: function() { caseClassfy.init(); investgatingCase.init(); caseNum.init(); cqMap.init(); leftContent.init(); } ``` 解決方案：在index.js中發送ajax請求，然后將通過參數將數據傳遞給各個init方法。 #### 4、方法使用不對 ``` $('.plice-order').append(orderHtml); $('.major-news').append(newsHtml); $('.on-duty').append(dutyHtml); ``` 解決方案：使用`html`方法代替`append`。 #### 5、除index.js外的其他模塊結構需要調整 ``` define(function(require,exports,module){ var init=function(){ $.get('../data/news.json', function (data) { var orderTpl = require('../components/pliceOrder.tpl'); var newsTpl = require('../components/majorNews.tpl'); var dutyTpl = require('../components/onDuty.tpl'); var orderTemplate = Handlebars.compile(orderTpl); var newTemplate = Handlebars.compile(newsTpl); var dutyTemplate = Handlebars.compile(dutyTpl); var orderHtml = orderTemplate(data.data); var newsHtml = newTemplate(data.data); var dutyHtml = dutyTemplate(data.data.onDuty); $('.plice-order').append(orderHtml); $('.major-news').append(newsHtml); $('.on-duty').append(dutyHtml); }) }; var result={init:init}; module.exports=result; }) ``` 解決方案：減少不必要的參數及定義的變量。 ``` define(function(require){ var moduleName= { init: function(data) { // 子模塊渲染方法 } } return moduleName }) ``` #### 6、使用ID比較 ``` if (name === '涪陵區') ``` #### 7、基本的代碼規范 ``` for(var i=0; i<pathLen; i++){ var gId = root.features[i].properties.id; for(var j=0;j<markCity.length;j++) { if(markCity[j].id == gId) { var selector = d3.select('.g' + markCity[j].id); drawDot(selector, root.features[i], projection) } } } ``` 解決方案：參考JavaScript編碼規范，要考慮到可讀性。 #### 8、使用D3畫圖的代碼不要和業務代碼混到一起，單獨寫到一個JS文件中。 #### 9、缺少數據切換的功能，即點擊今日/本周/本月按鈕中的任一個，頁面上數據要變化