`审核人：白占宁` `被审核代码负责人：谭俊` `代码地址：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文件命名不规范（未修改）  解决方案：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数据都应该被包含到主文件中。