`审查人：白占宁` `被审查代码负责人：刘黎` `代码地址：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、缺少数据切换的功能，即点击今日/本周/本月按钮中的任一个，页面上数据要变化