一纸泡、 引言
對于一個多人團隊來說，制定一個統(tǒng)一的規(guī)范是必要的鸠项，因為個性化的東西無法產(chǎn)生良好的聚合效果饼暑，
規(guī)范化可以提高編碼工作效率婚被，使代碼保持統(tǒng)一的風格狡忙，以便于代碼整合和后期維護。
二址芯、 HTML/CSS規(guī)范
2.1 瀏覽器兼容
根據(jù)公司業(yè)務(wù)要求而定灾茁，一般：
主流程測試：Chrome 30+、IE9+谷炸；
完整測試： Chrome 21北专、IE8+、360瀏覽器旬陡、微信webview/QQ手機瀏覽器逗余。
2.2 html代碼規(guī)范
2.2.1聲明與編碼
1、html頭部聲明統(tǒng)一：
<!DOCTYPE html>
2季惩、頁面編碼統(tǒng)一：
<meta charset="UTF-8"> <!-- ie6也支持，無須擔心 -->
2.2.2格式縮進
html編碼統(tǒng)一格式化顯示腻格，使用一個Tab鍵進行分層縮進 (2個空格寬度)画拾，使整個頁面結(jié)構(gòu)層次清晰，方便閱讀和修改菜职。
2.2.3 模塊注釋
html較大獨立模塊之間注釋格式統(tǒng)一使用：
<!-- start: XXX模塊 -->
…
<!-- end: XXX模塊 -->
或者：
<!-- XXX模塊 -->
…
<!-- /XXX模塊 -->
2.2.4標簽與屬性
1青抛、由于html標簽和屬性不區(qū)別大小寫，所有建議都采用小寫酬核，尤其是自定義標簽和屬性名蜜另，否定js中取不到，如：
<div data-bgColor="red"></div>
$('div').data('bgColor'); // 取不到嫡意，已自動被瀏覽器轉(zhuǎn)成了data-bgcolor
2举瑰、所有html屬性必須添加雙引號（非單引號）。
// 禁止
<div id=mainframe> 或 <div id='mainframe'>
// 推薦
<div id="mainframe">
3蔬螟、所有標簽必須采用合理嵌套此迅。
// 禁止
<p><b></p></b>
// 推薦
<p><b></b></p>
// 禁止inline級標簽嵌套block級標簽
<span><div></div></span>
4、所有<、&耸序、>等特殊符號（非標簽一部分）用編碼表示忍些。< 編碼成< ，>編碼成>坎怪，&編碼成&
5罢坝、img標簽中必須添加alt屬性。如：
6搅窿、標簽在運用時嘁酿，應(yīng)盡量使用語義化標簽，如:
<h1>標題<h1>
<lable for="user">用戶名：</lable>
<input name="username" id="user">
在語義不明顯戈钢，既可用div也可用p時痹仙，應(yīng)優(yōu)先考慮p標簽。
2.3 CSS代碼規(guī)范
2.3.1 CSS引用規(guī)范
1殉了、所有CSS均為外部調(diào)用开仰，不得在頁面書寫任何內(nèi)部樣式或行內(nèi)樣式；
2薪铜、html頁面引入樣式文件：
統(tǒng)一使用link標簽众弓，少用@import（原生import有加載性能問題），sass隔箍、less谓娃、vue.js等文件使用import命令除外（因為最終前端構(gòu)建工具會將引入文件編譯成一個css文件）。
<link rel="stylesheet" href="xxx.css"> <!-- type="text/css"可以省略蜒滩，清爽 -->
2.3.2 CSS注釋規(guī)范
1滨达、css頭部文檔注釋( 統(tǒng)一加上@charset聲明 )，如下：
@charset "utf-8";
/**
* @created : 2017/09/15
* @author : Mr.Wang
* @version : v1.0
* @desc : XX模塊
*/
關(guān)于"version"俯艰，如果對代碼有修改更新version版本號捡遍，并添加相關(guān)注釋。
2竹握、內(nèi)部模塊之間注釋（建議 @模塊英文名画株，好查找）：
/* @info 商品信息區(qū)
----------------------------------------------------------------*/
.infoArea{}
/* 單行注釋 */
.specArea{}
/* @price 商品價格區(qū)
----------------------------------------------------------------*/
.price{}
2.3.3 CSS書寫規(guī)范
1、樣式書寫不做強約啦辐，可分行或單行
推薦單行谓传，理由：直觀、模塊之間分隔鮮明芹关，有全局感续挟。
2、樣式中屬性排序規(guī)則：先外部 > 再自身 > 后內(nèi)部侥衬，推薦工具( CSScomb )
A.）影響文檔流的屬性（display, position, float, clear, visibility, table-layout等）
B.）自身盒模型的屬性（width, height, margin, padding, border等）
C.）排版相關(guān)屬性（font, line-height, text-align, text-indent, vertical-align等）
D.）裝飾性屬性（color, background, opacity, cursor等）
E.）生成內(nèi)容的屬性（content, list-style, quotes等）
2庸推、所有CSS屬性和值必須采用小寫的形式常侦。如：FONT-SIZE:12PX必須改為font-size:12px；
3贬媒、關(guān)于css背景圖片(關(guān)鍵字：合并聋亡，縮寫，去引號), 引號不是必須的际乘，而且在某些瀏覽器上加引號反而出錯：
// 不推薦
.canbox{
background-color: #ff6600;
background-image: url("/img/xxx.png");
}
// 推薦(合并坡倔、去除引號)
.canbox {
background: #f60 url(/img/xxx.png);
}
4、屬性為0值脖含，去除單位罪塔。
// 不推薦
.wrap{
margin: 0px 0px 5px 8px;
}
// 推薦
.wrap {
margin: 0 0 5px 8px;
}
5、所有CSS的命名應(yīng)語義化养葵，如：回復框征堪，.replyBox{…}，禁止用拼音縮寫命名关拒，如.hfk{…}佃蚜。
6、清除浮動時用.clearfix着绊，禁止用無語義的<p style="clear:both"></p>清除谐算。
7、用來顯示動態(tài)文本輸入的地方归露，樣式里必須加上強制英文換行：
word-break: break-all; word-wrap: break-word; overflow-x: hidden;
如果要顯示省略號加上：text-overflow: ellipsis;
8洲脂、上下相鄰的兩模塊盡量避免混用margin-bottom，margin-top剧包，否則會產(chǎn)生重疊現(xiàn)象恐锦。
三、 JavaScript規(guī)范
3.1 JS文件引用
1疆液、引入格式：
腳本語言發(fā)展至今踩蔚，也只有js混的最好了，所以type="text/javascript"類型指定可以省去枚粘。
<script src="model.js"></script>
2、引入位置： body標簽內(nèi)最后部（非body外面）, 減少因載入腳本而造成其他頁面內(nèi)容阻塞的問題（js單線程）飘蚯。
<html>
<body>
<div>頁面內(nèi)容….</div>
<script src="model.js"></script>
</body>
</html>
3馍迄、引入方式：html頁面中禁止直接編寫js代碼，統(tǒng)一使用<script>外部引用方式局骤，以便打包壓縮和緩存攀圈。
3.2 JS代碼縮進
3.2.1 整體層次
使用 Tab 鍵進行代碼縮進 (4個空格寬度) 。
(function() {
var i = 0;
function innerFun() {
var j = 0;
……
}
});
運算符（=峦甩、==赘来，&&现喳、+/-等）兩側(cè)應(yīng)各空一個格，塊級{}左側(cè)也應(yīng)該空出一格
3.2.2 局部間隔
// 不推薦
var arr=[1,2],str='hello'+'Lucy';
var myfun=function(arg){
//todo…
}
// 推薦
var arr = [1,2],
str = 'hello' + 'Lucy';
var myfun = function(arg) {
//todo…
}
3.3 JS注釋規(guī)則
3.3.1 文件頭部注釋
/**
* @created : 2017/09/21
* @author : datura_lj
* @version : v1.0
* @desc : 當前js模塊功能描述
* @e.g. : 方法用例犬辰，如：$('.title').tip();
*/
3.3.2 方法注釋及單行注釋
1嗦篱、對于一個較復雜的方法和函數(shù)，可用采用多行注釋幌缝，以便作詳情的描述灸促。
/**
* 此方法是用于解析tpl模塊
* 通過分析html中結(jié)構(gòu)…
*/
2、單行注釋
var funName = function(arg1, arg2) {
this.arg1 = arg1;
// 單行注釋說明(上面添加一空行, //與說明之間空一格)
this.arg2 = arg2;
};
3.4 命名規(guī)則
變量名應(yīng)由 26 個大小寫字母（A..Z涵卵，a..z）浴栽，10 個數(shù)字（0..9），和“_”（下劃線）組成轿偎。
1典鸡、通常, 使用”駝峰式”寫法，對象坏晦、函數(shù)和實例時尤其如此萝玷。
// 不推薦
var is_my_object = {};
var is-my-object = {};
// 推薦
var isMyObject = {};
2、構(gòu)造函數(shù)或類時使用駝峰式大寫
// 不推薦
var bad = new user({
name: 'nope'
});
// 推薦
var good = new User({
name: 'nope'
});
3英遭、常量大寫间护，并用下劃線分隔，形式如：NAMES_LIKE_THIS
3.5 編碼模式
為了規(guī)范代碼嚴謹風格挖诸，推薦嚴格模式(Strict Mode)汁尺，即總是在模塊頂部聲明 'use strict';
(function(){
'use strict';
function innerFun(){
var j = 0;
……
}
});
嚴格模式的一大目標是顯性的拋出錯誤，讓你能更方便更快的調(diào)試一些隱性的錯誤多律。
1痴突、防止意外的創(chuàng)建了全局變量。
非嚴格模式下狼荞，為一個未申明的局部變量賦值時會自動創(chuàng)建一個同名的全局變量辽装，這是Js程序中最容易出現(xiàn)的錯誤之一，在嚴格模式下這么做會顯性的拋出異常相味。
// 嚴格模式下會拋出異常
(function() {
some = 'foo';
}());
2拾积、防止函數(shù)中的this指針意外指向全局。
非嚴格模式下丰涉，函數(shù)中未被定義或為空( null or undefined)的this會默認指向全局環(huán)境(global)拓巧。
window.color = 'red';
function getColor() {
console.log(this.color);
}
// 在嚴格模式中會報錯, 非嚴格模式中則提示red
getColor();
3、防止重名一死。
當編寫大量代碼時肛度，對象屬性和函數(shù)參數(shù)很容易一不小心被設(shè)置成一個重復的名字。嚴格模式在這種情況下會顯性的拋出錯誤
// 重復的變量名投慈，在嚴格模式下會報錯承耿。
function doSomething(value1, value2, value1) {
//code
}
// 重復的對象屬性名冠骄，在嚴格模式下會報錯。
var object = {
foo: 'bar',
foo: 'baz'
};
4加袋、對只讀屬性修改/刪除時會拋出異常凛辣。
ES5中可為對象特定屬性設(shè)為只讀或讓整個對象不可修改。 但在非嚴格模式中嘗試修改一個只讀屬性只會默不做聲的失敗锁荔。
var person = {};
Object.defineProperty(person, 'name' {
writable: false,
value: 'Nicholas'
});
// 在非嚴格模式時蟀给，沉默的失敗，在嚴格模式則拋出異常
person.name = 'John';
5阳堕、不要在全局環(huán)境下啟用嚴格模式跋理。
為了兼容第三方代碼可能沒有為嚴格模式做好準備而引發(fā)的問題，最好把開啟嚴格模式的指令作用于自己獨立的模塊/函數(shù)里恬总。
3.6 推崇建議
—— 變量
聲明變量必須加上 var 關(guān)鍵字. 否則變量就會暴露在全局上下文中, 這樣很可能會和現(xiàn)有變量沖突（es6中l(wèi)et修復了這個問題）前普。
—— 逗號
不要加多余的逗號，這可能會在IE下引起錯誤壹堰，同時如果多一個逗號某些ES3的實現(xiàn)會計算多數(shù)組的長度拭卿。
// 不推薦
var hero = {
firstName: 'Kevin',
lastName: 'Flynn',
};
// 推薦
var hero = {
firstName: 'Kevin',
lastName: 'Flynn'
};
—— 分號
如果僅依靠語句間的隱式分隔, 有時會很麻煩.而且有些情況下, 漏掉分號會很危險.
;(function(){
var i = 0;
function innerFun(){
var j = 0;
……
}
});
—— {},[]
// 不推薦
var item1 = new Object(), item2 = new Array();
// 推薦
var item1 = {}, item2 = [];
（解釋：new關(guān)鍵字的使用 除了在需要實例化一個對象，或罕見的需要延時加載數(shù)據(jù)的情況外贱纠，基本上不需要使用new關(guān)鍵字峻厚。
在Javascript里分配大量的new變量地址是一項很慢的操作，為了效率起見谆焊，應(yīng)該始終使用對象符號惠桃。）
—— 字符串，統(tǒng)一用單引號
// 不推薦
var name = "Bob Parr";
// 推薦
var name = 'Bob Parr';
—— === 和 !== 操作符
使用 === 和 !== 操作符會相對好點辖试。== 和 != 操作符會進行類型強制轉(zhuǎn)換辜王。 特別是， 不要將 == 用于與錯值比較（false罐孝，null呐馆，undefined，“”莲兢，0汹来，NaN）。
—— 塊
// 不推薦
if (test)
return false;
// 推薦
if (test) return false;
// 或
if (test) {
return false;
}
// 不推薦
function() { return false; }
// 推薦
function() {
return false;
}
—— 不要使用eval()
只用于解析序列化串 (如: 解析 RPC 響應(yīng))
eval() 會讓程序執(zhí)行的比較混亂, 當 eval() 里面包含用戶輸入的話就更加危險.
可以用其他更佳的, 更清晰, 更安全的方式寫你的代碼, 所以一般情況下請不要使用 eval().
當碰到一些需要解析序列化串的情況下(如, 計算 RPC 響應(yīng)), 使用 eval 很容易實現(xiàn).
—— js常見參數(shù)命名建議
元素：elem, 參數(shù)：arg改艇，對象：obj收班，數(shù)組：arr, 指令：ret，長度：len
四遣耍、 jQuery性能優(yōu)化
——總是從ID選擇器開始繼承
jQuery中最快的篩選器是ID篩選器，這是因為它直接和JS原生方法getElementById()對應(yīng)炮车。
——在class前使用tag
第二快是tag選擇器舵变， 因為它和JS原生方法getElementsByTagName() 對應(yīng)酣溃。jQuery中class選擇器是最慢的，因為在IE瀏覽器下它會遍歷所有的DOM節(jié)點纪隙。
綜上兩點：
1赊豌、如果查找$('. class')，應(yīng)使用$('#id > tag. class')來縮小DOM Tree的搜索范圍绵咱。
2碘饼、#id 前面不要用tag來修飾。寫成$('div#id')會降低性能悲伶，因為JS會遍歷所有的div元素來查找id為'id'的哪一個節(jié)點:
3艾恼、#id1也不需要由#id2來修飾。寫成$('#id2 #id1') 是畫蛇添足麸锉，降低性能钠绍。
——緩存JQuery對象
要養(yǎng)成將jquery對象緩存進變量的習慣，避免進行多次查找花沉，另外為了區(qū)分普通的JS對象和jQuery對象柳爽，建議在變量首字母前加上$符號。如:
var $box = $('#wrap').find('.box');
$box.addClass('class');
$.ajax({
$box.html('text');
});
——合理使用鏈式操作
可以減少對DOM Tree的訪問以及代碼量碱屁。如代碼:
$('div').addClass('className').html('html code').click(function(){
alert(1);
});
——使用子查詢
使用children(), find(), filter()來進行子查詢磷脯。如代碼:
$('div p').click(function(){
……
});
// 上面替換成如下
$('div').find('p').click(function(){
……
});
——減少DOM操作
當要進行DOM插入時，將所有元素在內(nèi)存中封裝成一個元素娩脾，一次性插入赵誓。
——自定義數(shù)據(jù)屬性
dom結(jié)構(gòu)上添加自定義屬性：
<div id="wrap" data-foo="123"></div>
// 取數(shù)據(jù)：
$('#wrap').data('foo');
// 存數(shù)據(jù)：
$('#wrap').data('foo', {a:1,b:2} );
附錄
命名規(guī)則
1、所有文件夾命名晦雨，如需要兩個單詞表示的架曹，使用"-"中劃線連接（如：img-plug）。
2闹瞧、所有文件（.html绑雄、.css、.js奥邮、圖片）命名万牺，如需要兩個單詞表示的，使用"_"下劃線連接符（如：index_info.html）洽腺。
3脚粟、所有素材圖片應(yīng)將文件名第一個單詞命名為圖片分類，第二個單詞為圖片名稱蘸朋，第三個單詞可以是數(shù)字或其它內(nèi)容核无，以下為圖片命名細則：
icon_xxx.gif //圖標文件名
btn_xxx.gif //按鈕文件名
corner_xxx.gif //邊角文件名
banner_xxx.gif //廣告條文件名
bg_xxx.gif //背景圖片文件名
flash_xxx.gif //flash文件名
temp_xxx.gif //臨時測試用文件名
