8.4 20170609-刘黎 · 代码审核结果

`审查人：白占宁` `被审查代码负责人：刘黎` `代码地址：http://192.168.1.170/hyfe/demo-project/tree/master/info-center-liuli` ### 存在的问题 #### 1、页面功能方面 - tr上面添加hover效果时，过滤掉thead； - 左边导航背景色不对。 ### 2、HTML中JS引入位置不对 ``` <body>  <script src="js/include/header.js"></script> <div id="content-wrapper">  <script src="js/include/left-menue.js"></script> <div id="right-content"> ``` 解决方案：将引入JS的语句放到body底部。 ### 3、避免在HTML中使用ID ``` <div id="right-content"> <div class="right-content"> ``` 解决方案：避免使用ID。 ### 4、不必要的标签嵌套 ``` <span><label>姓名</label><input type="text"></span> ``` 解决方案：删除span标签。 ### 5、HTML可读性差 ``` <div class="id-code"><span class="label-text">证件号码</span>1413-3419-9011-0266-70</div> ``` 解决方案：该换行时候就换行，注意标签缩进。 #### 6、清除/闭合浮动优化 ``` <div style="clear: both;height: 0;"></div> ``` 解决方案：避免不必要的标签，建议使用after伪类清除浮动。 ### 7、HTML中小图标的处理 ``` <td> <span class="td-btn"><img src="images/td-search.png" alt="搜索"></span> <span class="td-btn"><img src="images/td-cancle.png" alt="取消"></span> <span class="td-btn"><img src="images/td-delete.png" alt="删除"></span> </td> ``` 解决方案：使用i标签代替img。 ### 8、页面中混杂了JS代码解决方案：将JS文件单独封装到一个文件中，引入到HTML中。 ### 9、禁止使用document.write拼接DOM结构 ``` document.writeln("<div id=\'header\'>"); document.writeln(" <div class=\'header-left\'>"); document.writeln(" <div class=\'header-logo\'><a href=\'\'><img src=\'images/logo.png\' alt=\'logo\'></a></div>"); document.writeln(" <ul class=\'header-nav\'>"); document.writeln(" <li><a href=\'#\'>特色指挥系统</a></li>"); document.writeln(" <li><a href=\'#\'>生活指挥系统</a></li>"); document.writeln(" <li><a href=\'#\'>信息指挥系统</a></li>"); document.writeln(" <li><a href=\'#\'>特色指挥系统</a></li>"); document.writeln(" <li><a href=\'#\'>生活指挥系统</a></li>"); ``` 解决方案：使用Handlebars模板或直接使用HTML。 #### 10、CSS中避免使用`!important` ``` .no-mr { margin-right: 0!important; } ```