網站開發之前端代碼規範

前端代碼規範

- 前言
- 一、唯一定律
- 二、前段代碼規範
- - （一）命名規範
  - - 1.1、項目命名
    - 1.2 、目錄命名
    - 1.3、檔案存放位置
    - 1.4、JS、CSS、HTML、PNG 等檔案命名
    - 1.4、命名嚴謹性
    - 1.5、代碼注釋
    - - 1.5.1、HTML單行注釋
      - 1.5.2、HTML子產品注釋
      - 1.5.3、HTML嵌套子產品注釋
      - 1.5.4、CSS單行注釋
      - 1.5.5、子產品注釋
  - （二）HTML 規範
  - - 2.1 、HTML 類型
    - 2.2 、縮進
    - 2.3、分塊注釋
    - 2.4、語義化标簽
    - 2.5、引号
    - 2.6、閉合标簽
    - 2.7、引入CSS和JavaScript
    - 2.8、屬性順序
    - 2.9、布爾型屬性
    - 2.10、減少标簽的數量
    - 2.11、減少 JavaScript 生成的标簽
    - 2.12、提示
  - （三） CSS 規範
  - - 3.1、命名
    - 3.2、選擇器
    - 3.3、盡量使用縮寫屬性
    - 3.4、選擇器及屬性獨占一行
    - 3.5、省略0後面的機關
    - 3.6、避免使用ID選擇器
    - 3.7、分号結尾
    - 3.8、省略 0.X前面的0
    - 3.9、十六進制值全部小寫
    - 3.10、屬性聲明順序
    - 3.11、重置樣式
  - （四）JavaScript規範
  - - 4.1、命名
    - 4.2、代碼格式
    - 4.3 、字元串
    - 4.4、對象聲明
    - 4.5、使用 ES6,7
    - 4.6、括号
    - 4.7、分号
    - 4.8、空格
    - 4.9、undefined 判斷
    - 4.10、條件判斷和循環最多三層
    - 4.11、慎用 console.log

前言

最近自己想開發一個網站，是以編寫了前端和java的響應的代碼規範，其實都是整合别人的覺得合适的規範。

本規範的目的是為了編寫靈活、穩定、高品質的代碼，讓每個團隊成員每天得心情都是愉悅的，一起開心的coding

一、唯一定律

無論有多少人共同參與同一項目，一定要確定每一行代碼都像是唯一個人編寫的。

二、前段代碼規範

（一）命名規範

1.1、項目命名

全部采用小寫方式，以中劃線分隔。

正例：

cust-relation-system

反例：

cust_relation_system

custRelationSystem

1.2 、目錄命名

全部采用小寫方式，以中劃線分隔，有複數結構時，要采用複數命名法，縮寫不用複數

正例：

scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc

反例：

script / style / demo_scripts / demoStyles / imgs / docs

1.3、檔案存放位置

檔案夾名稱	檔案夾含義
image	存放圖檔檔案
media	存放多媒體檔案
library	第三方依賴包
js	存放JavaScript腳本
css	存放CSS檔案

1.4、JS、CSS、HTML、PNG 等檔案命名

全部采用小寫方式，以中劃線分隔

正例：

render-dom.js / signup.css / index.html / company-logo.png

反例：

renderDom.js / UserManagement.html

1.4、命名嚴謹性

代碼中的命名嚴禁使用拼音與英文混合的方式，更不允許直接使用中文的方式。說明：正确的英文拼寫和文法可以讓閱讀者易于了解，避免歧義。注意，即使純拼音命名方式也要避免采用

正例：

shanghai / beijing / rmb 等國際通用的名稱，可視同英文。

反例：

DaZhePromotion [打折] / getPingfenByName() [評分] / int 某變量 = 3

杜絕完全不規範的縮寫，避免望文不知義：

反例：condition“縮寫”命名成 condi，此類随意縮寫嚴重降低了代碼的可閱讀性。

1.5、代碼注釋

代碼内文檔在軟體設計中起着至關重要的作用。注釋對于幫助開發人員了解系統和有效地工作是必不可少的，但是注釋的作用遠遠不止于此。文檔在抽象中也扮演着重要的角色;沒有注釋，就無法隐藏複雜性。最後，編寫注釋的過程如果處理正确，實際上将改進系統的設計。相反，如果沒有良好的文檔記錄，好的軟體設計就會失去很多價值。

我們要保持良好的注釋習慣，保證程式的可閱讀性，好的程式應首先易于閱讀，其次才是效率高低的問題。

1.5.1、HTML單行注釋

一般用于簡單的描述，如某些狀态描述、屬性描述等

注釋内容前後各一個空格字元，注釋位于要注釋代碼的上面，單獨占一行

推薦：

<!-- Comment Text -->
<div>...</div>

不推薦：

<div>...</div><!-- Comment Text -->	
	
<div><!-- Comment Text -->
    ...
</div>

1.5.2、HTML子產品注釋

一般用于描述子產品的名稱以及子產品開始與結束的位置

注釋内容前後各一個空格字元，

表示子產品開始，

表示子產品結束，子產品與子產品之間相隔一行

推薦寫法：

<!-- S Comment Text A -->	
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
	
<!-- S Comment Text B -->	
<div class="mod_b">
    ...
</div>
<!-- E Comment Text B -->

不推薦寫法：

<!-- S Comment Text A -->
<div class="mod_a">
    ...
</div>
<!-- E Comment Text A -->
<!-- S Comment Text B -->	
<div class="mod_b">
    ...
</div>
<!-- E Comment Text B -->

1.5.3、HTML嵌套子產品注釋

當子產品注釋内再出現子產品注釋的時候，為了突出主要子產品，嵌套子產品不再使用

<!-- S Comment Text -->
<!-- E Comment Text -->

而改用

注釋寫在子產品結尾标簽底部，單獨一行。

<!-- S Comment Text A -->
<div class="mod_a">
		
    <div class="mod_b">
        ...
    </div>
    <!-- /mod_b -->
    	
    <div class="mod_c">
    	...
    </div>
    <!-- /mod_c -->
		
</div>
<!-- E Comment Text A -->

1.5.4、CSS單行注釋

注釋内容第一個字元和最後一個字元都是一個空格字元，單獨占一行，行與行之間相隔一行

推薦：

/* Comment Text */
.xiaoming {}

/* Comment Text */
.xiaoming {}

不推薦：

/*Comment Text*/
.xiaoming {
	display: block;
}
.xiaoming {
	display: block;/*Comment Text*/
}

1.5.5、子產品注釋

注釋内容第一個字元和最後一個字元都是一個空格字元，

占一行，行與行之間相隔兩行

推薦：

/* Module A
---------------------------------------------------------------- */
.mod_a {}


/* Module B
---------------------------------------------------------------- */
.mod_b {}

不推薦：

/* Module A ---------------------------------------------------- */
.mod_a {}
/* Module B ---------------------------------------------------- */
.mod_b {}

（二）HTML 規範

2.1 、HTML 類型

推薦使用 HTML5 的文檔類型申明：（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在浏覽器中的應用支援與優化空間都十分有限）。

語言屬性
規定字元編碼
IE 相容模式
規定字元編碼
doctype 大寫

正例：

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="UTF-8" />
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
  </body>
</html>

2.2 、縮進

前端縮進統一使用 2 個空格（可将一個html、css、js等檔案設定一個tab為兩個空格）

嵌套的節點應該縮進。

2.3、分塊注釋

在每一個塊狀元素，清單元素和表格元素後，加上一對 HTML 注釋。注釋格式

正例：

<body>
  <!-- header 頭部 start -->
  <header>
    <div class="container">
      <a href="#">
        <!-- 圖檔會把a标簽給撐開，是以不用設定a标簽的大小 -->
        <img src="images/header.jpg" />
      </a>
    </div>
  </header>
  <!-- header 頭部 end -->
</body>

2.4、語義化标簽

HTML5 中新增很多語義化标簽，是以優先使用語義化标簽，避免一個頁面都是 div 或者 p 标簽

正例

<header></header>
<footer></footer>

反例

<div>
  <p></p>
</div>

2.5、引号

使用雙引号(" ") 而不是單引号(’ ') 。

正例： “xiaoming”

反例： ‘xiaoming’

2.6、閉合标簽

不要在自閉合（self-closing）元素的尾部添加斜線( / ) –HTML5 規範中明确說明這是可選的
不要省略可選的結束标簽（closing tag）（例如，
或）

2.7、引入CSS和JavaScript

根據 HTML5 規範，在引入 CSS 和 JavaScript 檔案時一般不需要指定 type 屬性，因為 text/css 和 text/javascript 分别是它們的預設值。

正例

<link rel="stylesheet" href="index.css">
<script src="index.js"></script>

反例

<link type="text/css" rel="stylesheet" href="index.css">
<script type="text/javascript" src="index.js"></script>

2.8、屬性順序

HTML 屬性應當按照以下給出的順序依次排列，確定代碼的易讀性。

（1）class

（2）id, name

（3）data-*

（4）src, for, type, href, value

（5）title, alt

（6）role, aria-*

例子

<a class="" id="" data-ref="" href=""></a>
<input class="" type="text">
<img src="" alt="">

2.9、布爾型屬性

1）布爾型屬性可以在聲明時不指派。XHTML 規範要求為其指派，但是 HTML5 規範不需要。

2）元素的布爾型屬性如果有值，就是 true，如果沒有值，就是 false。

3）如果屬性存在，其值必須是空字元串或 […] 屬性的規範名稱，并且不要在首尾添加空白符。

簡單來說，就是不用指派。

2.10、減少标簽的數量

編寫 HTML 代碼時，盡量避免多餘的父元素。

2.11、減少 JavaScript 生成的标簽

通過 JavaScript 生成的标簽讓内容變得不易查找、編輯，并且降低性能。能避免時盡量避免。

2.12、提示

盡量遵循 HTML 标準和語義，但是不要以犧牲實用性為代價。任何時候都要盡量使用最少的标簽并保持最小的複雜度。

（三） CSS 規範

3.1、命名

類名使用小寫字母，以中劃線分隔
id 采用駝峰式命名

id 和 class 的名稱使用可以反應元素目的和用途的名稱，或其他通用的名稱，代替表象和晦澀難懂的名稱

不推薦：

.fw-800 {
  font-weight: 800;
}

.red {
  color: red;
}

3.2、選擇器

1)、css 選擇器中避免使用标簽名

從結構、表現、行為分離的原則來看，應該盡量避免 css 中出現 HTML 标簽，并且在 css 選擇器中出現标簽名會存在潛在的問題。

2)、很多前端開發人員寫選擇器鍊的時候不使用直接子選擇器（注：直接子選擇器和後代選擇器的差別）。有時，這可能會導緻疼痛的設計問題并且有時候可能會很耗性能。然而，在任何情況下，這是一個非常不好的做法。如果你不寫很通用的，需要比對到 DOM 末端的選擇器，你應該總是考慮直接子選擇器。

不推薦:

.content .title {
  font-size: 2rem;
}

3.3、盡量使用縮寫屬性

不推薦：

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;

3.4、選擇器及屬性獨占一行

不推薦：

button {
  width:100px;height:50px;color:#fff;background:#00a0e9;
}

推薦：

button {
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}

3.5、省略0後面的機關

不推薦：

div {
  padding-bottom: 0px;
  margin: 0em;
}

推薦：

div {
  padding-bottom: 0;
  margin: 0;
}

3.6、避免使用ID選擇器

不推薦：

#xiaoming {
  padding-bottom: 0px;
  margin: 0em;
}

推薦：

.xiaoming {
  padding-bottom: 0px;
  margin: 0em;
}

3.7、分号結尾

所有聲明語句都應當以分号結尾。最後一條聲明語句後面的分号是可選的，但是，如果省略這個分号，你的代碼可能更易出錯

3.8、省略 0.X前面的0

對于屬性值或顔色參數，省略小于 1 的小數前面的 0

例

.xiaoming {
  box-shadow: 0 1px 1px 1px rgba(0, 0, 0, .5);
}

3.9、十六進制值全部小寫

1）、十六進制值應該全部小寫，例如，#fff。在掃描文檔時，小寫字元易于分辨，因為他們的形式更易于區分

2）、盡量使用簡寫形式的十六進制值，例如，用 #fff 代替 #ffffff

3.10、屬性聲明順序

（1）文檔流相關屬性（display, position, float, clear, visibility, table-layout）

（2）盒模型相關屬性（width, height, margin, padding, border）

（3）排版相關屬性（font, line-height, text-align, text-indent, vertical-align）

（4）裝飾性相關屬性（color, background, opacity, cursor）

（5）文字排版（font, line-height, letter-spacing, color- text-align）

（6）生成内容相關屬性（background, border）

說明、

上面并沒有列舉涵蓋所有的屬性，隻是一部分
分類之間使用一個空行分隔
并不一定嚴格遵循上述原則，因為這是一個最佳實踐，與标準和性能無關

例子

.xiaoming {
     /* 全局屬性 */
     display: block;
     float: none;
     list-style: none;
 
     /* 定位屬性 */
     position: absolute;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     z-index: 0;
 
     /* 基本屬性 */
     box-sizing: border-box;
     margin: 0 auto;
     padding: 0;
     width: inherit;
     min-width: none;
     max-width: none;
     height: inherit;
     min-height: inherit;
     max-height: none;
     border: none;
     border-radius: inherit;
 
     /* 基礎效果屬性 */
     font: '微軟雅黑';
     font-size: 12px;
     font-style: inherit;
     font-family: 'new york';
     font-weight: bold;
     line-height: 32px;
     text-align: center;
     vertical-align: middle;
     white-space: normal;
     letter-spacing: normal;
     word-spacing: normal;
     word-break: break-all;
 
     /* 背景屬性 */
     color: #000000;
     background: no-repeat;
     background-clip: inherit;
     background-color: #000000;
     background-origin: border-box;
     background-size: cover;
     background-position: left top;
 
     /* 渲染效果屬性 */
     opacity: inherit;
     outline: none;
     box-shadow: none;
     transition: all;
     transform: inherit;
     animation: .25s, 100ms;
 
     /* 其他屬性 */
     cursor: pointer;
 }

3.11、重置樣式

css重置樣式主要是為了讓各個浏覽器的CSS樣式有一個統一的基準，使HTML元素樣式在跨浏覽器時有一緻性的效果。

備注：浏覽器的相容問題，不同浏覽器對有些标簽的預設值是不同的，如果不對css初始化往往會出現浏覽器之間的頁面顯示差異。但是初始化樣式也會對SEO有一定的影響，故初始化時盡量使影響最小。

/* 淘寶的重置樣式代碼 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

（四）JavaScript規範

4.1、命名

1) 、采用小寫駝峰命名 lowerCamelCase，代碼中的命名均不能以下劃線開始，也不能以下劃線或美元符号結束

反例：

_name / name_ / name$

2) 、方法名、參數名、成員變量、局部變量都統一使用 lowerCamelCase 風格，必須遵從駝峰形式。

正例：

localValue / getHttpMessage() / inputUserId

其中 method 方法命名必須是動詞或者動詞+名詞形式

正例：

saveShopCarData /openShopCarInfoDialog

反例：

save / open / show / go

特此說明，增删查改，詳情統一使用如下 4個單詞，不得使用其他（目的是為了統一各個端）

add / delete / update / get

附：函數方法常用的動詞:

get 擷取/set 設定,
add 增加/remove 删除
create 建立/destory 移除
start 啟動/stop 停止
open 打開/close 關閉,
read 讀取/write 寫入
load 載入/save 儲存,
create 建立/destroy 銷毀
begin 開始/end 結束,
backup 備份/restore 恢複
import 導入/export 導出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脫離
bind 綁定/separate 分離,
view 檢視/browse 浏覽
edit 編輯/modify 修改,
select 選取/mark 标記
copy 複制/paste 粘貼,
undo 撤銷/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜尋,
increase 增加/decrease 減少
play 播放/pause 暫停,
launch 啟動/run 運作
compile 編譯/execute 執行,
debug 調試/trace 跟蹤
observe 觀察/listen 監聽,
build 建構/publish 釋出
input 輸入/output 輸出,
encode 編碼/decode 解碼
encrypt 加密/decrypt 解密,
compress 壓縮/decompress 解壓縮
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 連接配接/disconnect 斷開,
send 發送/receive 接收
download 下載下傳/upload 上傳,
refresh 重新整理/synchronize 同步
update 更新/revert 複原,
lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入,
submit 送出/commit 傳遞
push 推/pull 拉,
expand 展開/collapse 折疊
begin 起始/end 結束,
start 開始/finish 完成
enter 進入/exit 退出,
abort 放棄/quit 離開
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集

3) 、常量命名全部大寫，單詞間用下劃線隔開，力求語義表達完整清楚，不要嫌名字長。

正例：

MAX_STOCK_COUNT

反例：

MAX_COUNT

4.2、代碼格式

1) 、使用 2 個空格進行縮進

正例：

if (x < y) {
  x += 10;
} else {
  x += 1;
}

2)、不同邏輯、不同語義、不同業務的代碼之間插入一個空行分隔開來以提升可讀性。

說明：任何情形，沒有必要插入多個空行進行隔開。

4.3 、字元串

統一使用單引号(‘)，不使用雙引号(“)。這在js中建立 HTML 字元串非常有好處：

正例:

let str = 'foo';
let testDiv = '<div id="test"></div>';

反例:

let str = 'foo';
let testDiv = "<div id='test'></div>";

4.4、對象聲明

1)、使用字面值建立對象

正例：

let user = {};

反例：

let user = new Object();

2) 、使用字面量來代替對象構造器

正例：

var user = {
  age: 0,
  name: 1,
  city: 3
};

反例：

var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;

4.5、使用 ES6,7

必須優先使用 ES6,7 中新增的文法糖和函數。這将簡化你的程式，并讓你的代碼更加靈活和可複用。

必須強制使用 ES6, ES7 的新文法，比如箭頭函數、await/async ，解構， let ， for…of 等等

4.6、括号

下列關鍵字後必須有大括号（即使代碼塊的内容隻有一行）：if, else, for, while, do, switch, try, catch, finally, with。

正例：

if (condition) {
  doSomething();
}

反例：

4.7、分号

每句代碼後（必須）加";"

4.8、空格

左括号和後一個字元之間不出現空格；同樣，右括号和前一個字元之間也不出現空格
if/for/while/do 等保留字與左右括号之間都** （必須） **加空格，switch後無需加空格
function 後** （必須） 加空格，參數的反括号後 （必須） **加空格
聲明變量 = 前後** （必須） **添加空格
每個 ; 後** （必須） **加空格
任何運算符左右必須加一個空格。說明：運算符包括指派運算符=、邏輯運算符&&、加減乘除符号、三目運作符等
```
function add(xiaoming) {
  if (typeof xiaoming === 'undefined') {
    // code
  }
}
           
```

4.9、undefined 判斷

永遠不要直接使用 undefined 進行變量判斷；使用 typeof 和字元串’undefined’對變量進行判斷。

正例：

if (typeof person === 'undefined') {
    ...
}

反例：

if (person === undefined) {
    ...
}

4.10、條件判斷和循環最多三層

條件判斷能使用三目運算符和邏輯運算符解決的，就不要使用條件判斷，但是謹記不要寫太長的三目運算符。如果超過 3 層請抽成函數，并寫清楚注釋。

4.11、慎用 console.log

因 console.log 大量使用會有性能問題，是以在非 webpack 項目中謹慎使用 log 功能

網站開發之前端代碼規範

前端代碼規範

前言

一、唯一定律

二、前段代碼規範

（一）命名規範

1.1、項目命名

1.2 、目錄命名

1.3、檔案存放位置

1.4、JS、CSS、HTML、PNG 等檔案命名

1.4、命名嚴謹性

1.5、代碼注釋

1.5.1、HTML單行注釋

1.5.2、HTML子產品注釋

1.5.3、HTML嵌套子產品注釋

1.5.4、CSS單行注釋

1.5.5、子產品注釋

（二）HTML 規範

2.1 、HTML 類型

2.2 、縮進

2.3、分塊注釋

2.4、語義化标簽

2.5、引号

2.6、閉合标簽

2.7、引入CSS和JavaScript

2.8、屬性順序

2.9、布爾型屬性

2.10、減少标簽的數量

2.11、減少 JavaScript 生成的标簽

2.12、提示

（三） CSS 規範

3.1、命名

3.2、選擇器

3.3、盡量使用縮寫屬性

3.4、選擇器及屬性獨占一行

3.5、省略0後面的機關

3.6、避免使用ID選擇器

3.7、分号結尾

3.8、省略 0.X前面的0

3.9、十六進制值全部小寫

3.10、屬性聲明順序

3.11、重置樣式

（四）JavaScript規範

4.1、命名

4.2、代碼格式

4.3 、字元串

4.4、對象聲明

4.5、使用 ES6,7

4.6、括号

4.7、分号

4.8、空格

4.9、undefined 判斷

4.10、條件判斷和循環最多三層

4.11、慎用 console.log

繼續閱讀