<a href="#">前端編碼規(guī)范—— HTML 篇</a>
<a href="#css">前端編碼規(guī)范—— CSS 篇</a>
<a href="#js">前端編碼規(guī)范—— JavaScript 篇</a>
這幾天和團(tuán)隊(duì)開發(fā)了一個(gè)項(xiàng)目，由于編程的時(shí)候不怎么規(guī)范，代碼質(zhì)量不怎么高，所以后期維護(hù)起來會(huì)相當(dāng)浪費(fèi)時(shí)間，特寫一篇關(guān)于主要針對(duì)實(shí)驗(yàn)室的前端開發(fā)規(guī)范的文章，希望大家都能遵循這個(gè)規(guī)則，如果你有更好的建議，我愿意虛心請(qǐng)教。
HTML的命名規(guī)則
文件名稱命名統(tǒng)一用小寫的英文字母，數(shù)字和下劃線的組合，不得包含漢字空格和特殊符號(hào)，遵循兩個(gè)原則：
1.方便理解；2.方便查找。
不推薦
產(chǎn)品.html
index_%.html
about-us.html
1.html
推薦
product.html
index.html
aboutus.html
多媒體回溯
對(duì)于頁(yè)面上的媒體而言，像圖片、視頻、canvas 動(dòng)畫等，要保證有可替代的接入接口。比如圖片文件我們可采用有意義的備選文本（alt），視頻和音頻文件我們可以為其加上說明文字或字幕。
這樣的好處是什么。首先如果無法顯示圖像，瀏覽器將顯示替代文本，其次，對(duì)于盲人用戶如果沒有 @alt 的話就好比看天書啦。
（純裝飾性的圖片可以內(nèi)容為空這么做：alt=""）
不推薦
<img src="/img/logo.jpg" />
<img src="/img/girl.jpg" />
推薦
<img src="/img/logo.jpg" alt="logo" title="xxx 企業(yè)logo"/>
<img src="/img/girl.jpg" alt="" title=""/>
信息、外觀和行為的分離
這里的信息（HTML 結(jié)構(gòu)）、外觀（CSS）和行為（JavaScript）我們要盡可能的將它們分離開來，使它們成為可維護(hù)的干凈整潔的代碼。
- 不使用行內(nèi)樣式（<style>.no-good {}</style>）
- 不在元素上使用 style 屬性（<hr style="border-top: 5px solid black">）
- 不使用行內(nèi)腳本（<script>alert('no good')</script>）
- 不使用表象元素（<center>, <font>）
- 不使用表象 class/id 命名（ired, left, center）
<!DOCTYPE html>
<html>
<head>
</head>
<style>
b{font-size:20px;
}
</style>
<body>
<h1 style="font-size: 3rem"></h1>
<b>I'm a subtitle and I'm bold!</b>
<center>Dare you center me!</center>
<script>
alert('Just dont...');
</script>
<div class="red">I'm important!</div>
</body>
</html>
推薦
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
<!--css樣式統(tǒng)一放在一個(gè)文件中，然后將css文件引入到html中-->
</head>
<body>
<h1 class="title"></h1>
<!--避免將css樣式直接寫在標(biāo)簽里面-->
<div class="sub-title">I'm a subtitle and I'm bold!</div>
<!--避免使用center，b 等表象元素布局-->
<span class="comment">Dare you center me!</span>
<div class="important">I'm important!</div>
<!--class／id的命名不要使用表象元素的名稱命名，比如class="red"-->
<script async src="main.js"></script>
<!--js文件也是統(tǒng)一放在一個(gè)文件中，然后將js文件引入到html中-->
</body>
</html>
HTML 引號(hào)、縮進(jìn)和注釋
- 寫代碼一定要寫注釋
- 寫代碼一定要寫注釋
- 寫代碼一定要寫注釋
重要事說三遍！
- 使用雙引號(hào)("") 而不是單引號(hào)('')
- tab縮進(jìn)為兩個(gè)空格
- html注釋的格式統(tǒng)一為：
（對(duì)于一般性的解釋說明可以去掉start、end，如）
不推薦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
</head>
<body>
<header>
<nav class='header'>
<div class='container'></div>
</nav>
<nav class="main-nav">
<div class="container"></div></nav>
</header>
<footer>
<div class="container"></div>
</footer>
</body>
</html>
推薦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
</head>
<body>
<!-- 頭部 start-->
<header>
<!-- 頂部 start-->
<nav class='header'>
<div class='container'></div>
</nav>
<!-- 頂部 end-->
<!-- logo+導(dǎo)航 start-->
<nav class="main-nav">
<div class="container">
<h1>這是標(biāo)題1</h1>
<!---這是全文的正文標(biāo)題-->
</div>
</nav>
<!-- logo+導(dǎo)航 end-->
</header>
<!-- 頭部 end-->
<!-- 正文 start-->
<div class="container"></div>
<!-- 正文 end-->
<footer>
<div class="container"></div>
</footer>
</body>
</html>
命名規(guī)范
實(shí)驗(yàn)室的很多前端小伙伴初學(xué)編程都不怎么注意這些，只管實(shí)現(xiàn)效果就好了，其實(shí)我也是這么做的，但是經(jīng)過這次項(xiàng)目的折磨后，深刻體會(huì)到命名規(guī)范的問題，因?yàn)楫?dāng)你再回首查看自己的代碼時(shí)，發(fā)現(xiàn)自己竟然看不懂到底自己寫的是啥，如果別人也是命名不規(guī)范，把他的代碼給你修改一下，你會(huì)發(fā)現(xiàn)，這就是傳說的青云志中的天書，看都看不懂，哈哈。
命名遵循幾個(gè)要點(diǎn)：
- 語(yǔ)義化
- 簡(jiǎn)明化
- 用英文（視具體情況而定，不會(huì)英文百度翻譯）
附上常用命名英文翻譯：
其他
- 中文首選：宋體
- 英文和數(shù)字首選：verdana,arial
- 字體大?。?pt和11pt或12px和14.7px（黑體加粗或宋體加粗選用11pt和14.7px）
- 網(wǎng)站鏈接全部采用相對(duì)路徑（不懂的自行百度相對(duì)路徑和絕對(duì)路徑的區(qū)別）
- 用"javascript:void(null)"代替< a href="#"></a>中的#，可避免點(diǎn)擊的時(shí)候?qū)?dāng)前頁(yè)面重置到首端
- 使用table布局的時(shí)候要把thead,tbody,tfoot都要寫上，對(duì)于你來說可能顯得多余，但是對(duì)于以后的維護(hù)那是很重要的
- 能用背景色替代圖片就用背景色，盡量切小圖片進(jìn)行平鋪
- logo大小 一般是88x31 其他還有120x60和120x90大小的
<a id="css">CSS一般規(guī)范</a>
一般來說id是不應(yīng)該應(yīng)用于樣式的，盡量使用class,避免使用標(biāo)簽選擇器，如果一定要使用 請(qǐng)?jiān)谇懊婕右恢幌拗品秶腸lass選擇器，一般來說針對(duì)同一樣式的選擇器不超過三個(gè)為好。
不推薦
.p-1 {//命名不規(guī)范
font-weight: 600;
}
#content #title {//使用了id
font-size: 14px;
}
div.content > header.content-header > h2.title {//使用了標(biāo)簽名
font-size: 2em;
}
.container .nav ul li a{//選擇器太多
color:#000;
}
推薦
.content {
font-weight: 600;
}
.content .title {
font-size: 14px;
}
.content >.content-header >.title {
font-size: 2em;
}
.nav li a{
color:#000;
}
ps
??當(dāng)實(shí)驗(yàn)室是以團(tuán)隊(duì)開發(fā)一個(gè)項(xiàng)目時(shí)，如果是一個(gè)從0開始的項(xiàng)目，那么每個(gè)人都會(huì)有幾個(gè)頁(yè)面要寫，每個(gè)頁(yè)面請(qǐng)盡量都新建一個(gè)css的文件寫一份獨(dú)立的樣式，然后引入到html中，因?yàn)閷?shí)驗(yàn)室很多人都是剛開始接觸前端，所以不推薦一開始就學(xué)大公司的那種寫全局樣式的形式。
??如果是接手的一個(gè)中期的項(xiàng)目，當(dāng)大家分配幾個(gè)頁(yè)面時(shí)，css樣式一定要新建一個(gè)文件寫，不要在別人的樣式里寫，更不要寫在html中，這樣后期合并會(huì)相當(dāng)麻煩，最重要的一點(diǎn)就是寫css樣式的時(shí)候記得在最前面添加一個(gè)全局的獨(dú)有的class選擇器，(一般來說這種項(xiàng)目都是很規(guī)范的，會(huì)有公共樣式，重用樣式等)這里推薦以 功能+自己姓名的小寫字母開頭作為全局獨(dú)有的class選擇器，這樣做的好處是后期css合并為一個(gè)css文件時(shí)方便合并，不會(huì)擔(dān)心大家寫的樣式相互干擾。
不推薦
<div class="nav">
<ul>
<li>首頁(yè)</li>
<li>產(chǎn)品介紹</li>
<li>關(guān)于我們</li>
</ul>
<div>
／*----------針對(duì)接手的是中期項(xiàng)目而言 start----------*／
.nav li a{//這里的.nav假定為公共class，那后期合并會(huì)相互干擾
padding-top:10px;
}
／*----------針對(duì)接手的是中期項(xiàng)目而言 end----------*／
推薦
<div class="nav nav-hqg">
<ul>
<li>首頁(yè)</li>
<li>產(chǎn)品介紹</li>
<li>關(guān)于我們</li>
</ul>
<div>
／*----------針對(duì)接手的是中期項(xiàng)目而言 start----------*／
.nav-hqg .nav li a{//假如開發(fā)者叫花千骨
padding-top:10px;
}
／*----------針對(duì)接手的是中期項(xiàng)目而言 end----------*／
CSS的注釋和縮寫屬性
請(qǐng)大家盡量把注釋寫全，最好是分模塊寫注釋，假定現(xiàn)在寫的是header里面的css樣式，請(qǐng)使用
／*----------header start----------*／
這里是書寫header css樣式
／*----------header end----------*／
單行注釋請(qǐng)使用//注釋
//這是單行注釋
CSS為我們提供了各種縮寫屬性（如 padding ）應(yīng)該盡可能使用，使用縮寫屬性對(duì)于代碼效率和可讀性是有很有用的。
不推薦
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
推薦
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
排版規(guī)范
這是一個(gè)選擇器內(nèi)書寫CSS屬性順序的大致輪廓。這是為了保證更好的可讀性。
作為最佳實(shí)踐，我們應(yīng)該遵循以下順序（應(yīng)該按照下表的順序）：
結(jié)構(gòu)性屬性：
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
表現(xiàn)性屬性：
background, border etc.
font, text
不推薦
.box {
font-family: 'Arial', sans-serif;
border: 3px solid #ddd;
left: 30%;
position: absolute;
text-transform: uppercase;
background-color: #eee;
right: 30%;
isplay: block;
font-size: 1.5rem;
overflow: hidden;
padding: 1em;
margin: 1em;
}
推薦
.box {
display: block;
position: absolute;
left: 30%;
right: 30%;
overflow: hidden;
margin: 1em;
padding: 1em;
background-color: #eee;
border: 3px solid #ddd;
font-family: 'Arial', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
}
為了保證一致性和可擴(kuò)展性，每個(gè)聲明應(yīng)該用分號(hào)結(jié)束，每個(gè)聲明換行。
不推薦
.test {
display: block; height: 100px
}
推薦
.test {
display: block;
height: 100px;
}
屬性名的冒號(hào)后請(qǐng)使用一個(gè)空格。
不推薦
h3 {
font-weight:bold;
}
推薦
h3 {
font-weight: bold;
}
規(guī)則之間始終有一個(gè)空行（雙換行符）分隔。
不推薦
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
其他
- 省略“0px”值后面的px單位。不要在0值后面使用單位，除非有值
- 盡可能使用16進(jìn)制小寫字母表示顏色值，能簡(jiǎn)寫盡量簡(jiǎn)寫，如#000000；可簡(jiǎn)寫為#000；
- 避免使用CSS“hacks“
<a id="js">javascript 的命名空間規(guī)范</a>
當(dāng)開發(fā)項(xiàng)目的時(shí)候，請(qǐng)盡量將自己的全局變量寫在自己函數(shù)體內(nèi)，這樣團(tuán)隊(duì)合并項(xiàng)目的時(shí)候就不會(huì)造成重復(fù)命名。
不推薦
var i=0;
var j=on-off;
推薦
function project{//將自己的變量定義在自己項(xiàng)目的一個(gè)大的函數(shù)體內(nèi)
var i=0;
var j=on-off;
}
定義變量請(qǐng)加上var，不要忽略它，把賦值盡量寫在變量申明中，聲明變量時(shí)盡量都統(tǒng)一寫在最前面，這樣別人查看你的代碼時(shí)才會(huì)更清晰明了。
不推薦
(function(log){
'use strict';
a = 10; //忽略了var
var b = ;
b=10; //賦值盡量在定義時(shí)賦值
for(var i = 0; i < 10; i++) {
var c = a * b * i;
}
function f() {
}
var d = 100; //變量定義盡量放在最前面
var x = function() {
return d * d;
};
log(x());
}(window.console.log));```
**推薦**
(function(log){
'use strict';
var a = 10,
b = 10,
d= 100,
c,
i,
x;
function f() {
}
for(i = 0; i < 10; i++) {
c = a * b * i;
}
x = function() {
return d * d;
};
log(x());
}(window.console.log));}
如果項(xiàng)目的某一個(gè)變量是需要多個(gè)人調(diào)用的，這里建議是定義一個(gè)全局的對(duì)象global，在這個(gè)對(duì)象下面在再次定義一個(gè)你自己的特有的命名空間，然后在這個(gè)空間寫入你需要傳入的公用的變量，假如我現(xiàn)在是在寫home頁(yè)面的網(wǎng)頁(yè)，需要公用一個(gè)page的變量，那就可以這樣寫
var page=1;
global.home.page=page;
由于每個(gè)人的命名空間都是不一樣的，所以即使有多個(gè)page變量，也不會(huì)相互影響，如
/----------這是首頁(yè) start----------／
function home(){
var page=1;
global.home.page=page;
}
/----------這是首頁(yè) end----------／
/----------產(chǎn)品頁(yè)面 start----------／
function product(){
var page=1;
global.product.page=page;
}
/----------產(chǎn)品頁(yè)面 end----------／
**那這個(gè)global函數(shù)怎么寫呢，這里已經(jīng)為大家寫好了，大家放在自己的js文件中就好了**
/----------全局命名空間函數(shù)定義 start----------/
var global={};
global.register=function(namespase,obj){
var nsArray=namespase.split('.');
var regns=function(_parent){
var n=nsArray.shift();
if(_parent[n]===undefined){
_parent[n]={};
}
if(nsArray.length==0){
if(obj){_parent[n]=obj;}
return _parent[n];
}
return regns(_parent[n]);
};
return regns(parent);
};
/----------全局命名空間函數(shù)定義 end----------/
/----------獲取空間里變量的值 start----------/
//獲取命名空間
global.obtain=function(namespase){
var nsArray=namespase.split('.');
var getns=function(_parent){
var n=nsArray.shift();
if(_parent[n]===undefined){
console.log('命名空間'+namespase+'不存在！');
}
else if(nsArray.length>0){
return getns(_parent[n]);
}
else{
return _parent[n];
}
};
return getns(window);
};
/----------獲取空間里變量的值 end----------/
###使用方法
**假如現(xiàn)在我在寫一個(gè)login頁(yè)面，需要把temp變量傳給register頁(yè)面，我們可以這樣寫**
function login(){
var temp="off";
global.register ("login.temp","temp")//將temp變量傳給
g lobal.login.temp;
}
function register(){
var temp=global.obtain("login.temp");//相當(dāng)于把global.login.temp傳給temp變量
}
####其他
>- 如果可以，盡量使用總是使用 === 精確的比較操作符
- 不要忘記每行代碼結(jié)束后的分號(hào)
- 使用if else時(shí)記得還有三元條件判斷（如果三元條件判斷相對(duì)簡(jiǎn)潔的話）
- 注釋請(qǐng)使用具有模塊化的注釋如：
/----------功能 start----------/
這里是代碼
/----------功能 end----------/
- 單行注釋請(qǐng)使用//注釋
本人也剛開始學(xué)前端，有錯(cuò)誤的地方望您能指出，您有更好的建議我也會(huì)虛心學(xué)習(xí)
申明：文中內(nèi)容有參考網(wǎng)上部分資料，如有侵權(quán)，望聯(lián)系本人，謝謝