編碼規范:http://www.css88.com/doc/codeguide/
## 一、語義化
語義化優點:提升可讀性便于后期閱讀維護,提升搜索引擎SEO優化。
### 1、標簽語義化
標題(H1~H6)、列表(li)、段落(p)、文字(span)、表頭(thead)、表體(tbody)等等
### 2、css類名語義化
頭部(header)、主體(container)、底部(footer)、側邊欄(sidebar)、廣告條(banner)等等
~~~
<div class="module-header"></div>
<div class="module-container"></div>
<div class="module-footer"></div>
~~~
## 二、命名規范
### 1、css的class命名
多單詞時通常用“-”隔開,如:.note-container、.note-panel、.note-panel-title等
### 2、css的id命名
多單詞時通常駝峰形式,如#userName、#consNo等
### 3、單詞命名
在命名class、id、js變量名等盡量要與當前含義一致的英文單詞,如果英語不好的話可通過在線翻譯網站查詢那就的英文。
**推薦:** 快來查查大神們是怎么命名自己的變量的https://unbug.github.io/codelf
可篩選不同語言的變量名稱、可安裝成瀏覽器或IDE的插件實現快速變量翻譯https://github.com/unbug/codelf/wiki
## 三、html聲明規范
1. 以`<!DOCTYPE html>` 開始,不區分大小寫,前面不要有任何內容。否則IE將以**雜項的文檔模式**解析html.
2. `<meta charset="utf-8">`聲明文檔使用的字符編碼。如果是jsp則每個jsp文件頂部都是引用
~~~
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
~~~
3、優先使用 IE 最新版本或 IE里的Google Chrome Frame插件
~~~
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
~~~
4、雙核瀏覽器(如360)使用優先使用Chrome
~~~
<meta name="renderer" content="webkit">
~~~
## 四、數據綁定規范
### 1、不規范用法一
~~~
<a href="javascript:query('userName','1234');">查詢</a>
或
<a href="javascript:void(0);" onclick="query('userName','1234')">查詢</a>
<script>
window.query(userName,userNo) = function(){
alert(userName+userNo);
}
</script>
~~~
**說明:** 由于在加載慢等情況下,html已加載完成,而js里的query函數還沒執行到,此時點擊查詢按鈕則出現query函數未定義的錯誤。
### 2、不規范用法二
~~~
<a href="javascript:void(0);" userName='用戶名' userNo='1234' id="queryBtn">查詢</a>
或
<a href="#" vaule='userName-1234' id="queryBtn">查詢</a>
<script>
$(function(){
$("#queryBtn").click(function(){
var userName=$(this).attr('userName');
var userNo= $(this).attr('userNo');
或
var userName=$(this).attr('vaule').split('-')[0];
});
})
</script>
~~~
**說明:** 給標簽加自定義屬性在低版本IE會報錯,把若干個值用‘-’隔開放在value里再split用法不夠清晰也不易維護。
###3、正確用法
~~~
<a href="javascript:void(0);" data-userName='userName' data-userNo='1234' id="queryBtn">查詢</a>
<script>
$(function(){
$("#queryBtn").click(function(){
var userName=$(this).data('userName');
var userNo=$(this).data('userNo');
return false;//阻止事件冒泡
});
})
</script>
~~~
**說明:** data-屬性 允許我們在DOM元素上綁定任意類型的數據,避免了循環引用的內存泄漏風險。提升了讀取速度,降低操作過程的內存開銷。