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; } ```