`审查人：白占宁` `被审核代码负责人：张红桥&李伟&谢洋` `代码地址：https://192.168.1.240:8443/svn/repos/command-cabin/source` #### 1、CSS代码混杂到HTML中（已修改） 文件名：`pages/index.html`和`pages/sheqing.html`。 `pages/index.html`和`pages/sheqing.html`两个页面中有混杂部分CSS代码，建议将CSS代码从HTML中分离出来，单独写到css文件中。 #### 2、JS文件中多次重复定义相同的方法（已修改） 文件名：`scripts/index.js`和`scripts/sheqing.js`。 `scripts/index.js`和`scripts/sheqing.js`两个文件中都定义了重复的方法。 ``` var PAGE_WIDTH = 10368 var PAGE_HEIGHT = 3888 function zoom(){ var x = window.innerWidth / PAGE_WIDTH var y = window.innerHeight / PAGE_HEIGHT $('body').css('webkitTransform', 'scale(' + x + ',' + y + ')') //for Chrome || Safari $('body').css('msTransform', 'scale(' + x + ',' + y + ')') /* for Firefox */ $('body').css('mozTransform', 'scale(' + x + ',' + y + ')') /* for IE */ $('body').css('oTransform', 'scale(' + x + ',' + y + ')') /* for Opera */ } ``` 解决方案：删除掉重复的方法定义，使用`scripts/common`中的公用方法。 #### 3、mock数据引入问题（已修改） 文件名：`xinJiang/index.js`。 mock数据时候分模块和接口mock，然后将该模块下所有相关的mock都整合到一个js文件中，在业务代码中引入时候只引入一个文件。 ``` //Mock数据 require('popCatStaData') require('regPerDistributionData') require('vehDistributionData') require('perTypeRatioData') ``` 解决方案：`mockData/sheqing/xinJiang/`目录下新建`index.js`，将其他模块`require`进`index.js`文件中，在业务代码中只`require(index.js)`即可。 #### 4、不要多次声明相同的变量（已修改） 文件名：`xinJiang/index.js`。 ``` var time = 'year' //时间参数 bindEvent: function () { var self = this var person = require('../personFlow/index.js') var time = 'year' ``` 重复声明了`time`变量。 解决方案：同一个变量只声明一次，避免出现歧义的情况。 #### 5、不要声明没有使用到的变量及require位置（已修改） 文件名：`xinJiang/index.js`和`scripts/sheqing/personFlow/left.js`。 ``` bindEvent: function () { var self = this var person = require('../personFlow/index.js') ``` 声明的`person`变量没有使用到，另不要在方法执行过程中`require`任何资源。 解决方案：删除无用的变量； 建议所有`require`统一放到`define`模块最前面。 ``` define(function(require) { // 引入公用模块 require('d3') require('jQuery') //引入业务模块 var person = require('../personFlow/index.js') ...... }) ``` #### 6、调用的方法中不要再定义方法（已修改） ``` render: function () { var tpl = require('../../../templates/sheqing/xinJiang/index.tpl') $('.xinJiang').html(tpl) var date function gDate() { date = new Date() $('.date').text(formateDate(date.getHours()) + ':' + formateDate(date.getMinutes()) + ':' + formateDate(date.getSeconds())) } gDate() function formateDate(t) { if (t < 10) { return '0' + t } return t } ``` 这段代码问题很大： 1、`require('../../../templates/sheqing/xinJiang/index.tpl')`不要放到该方法中； 2、不要在方法中定义`gDate`和`formateDate`两个函数； 3、函数命名不规范，如`gDate`。 #### 7、注释不去或缺少部分函数的注释（未修改） 所有js文件。 关键的地方和所有函数，都需要有相应的注释。 #### 8、文件位置（已修改） 文件名：`popDistribute/map.js`。 ``` d3.json('../../sea-modules/chongqing.json', function(error, root) { if (error) { return console.error(error); } ``` `chongqing.json`不应该放到`sea-modules`目录下。 解决方案：`chongqing.json`移到对应的data目录下。 #### 9、所有D3组件统一放到charts目录下（已修改） `popDistribute/mapTool`，移动到`charts`目录下，所有D3组件统一放到`charts`目录中，方便后期统一管理和维护。 #### 10、数据可靠性验证（未修改） 涉及到所有模块的js代码。 优先级不高，后续需要特别注意。 ``` request.sendAjax(apiURL.popDistribute + time, function(data) { //默认渲染--全部人口 topList.render(data.all.areaCity.concat(data.all.mainCity)) map(data.all) ``` 对ajax返回的数据没有进行可靠性验证，上面的代码，如果`data为null`或`data.all为undefined`，程序则会报错。 解决方案：先做数据有效性校验，再使用数据渲染页面。