前言
團隊中的每一個人嫡锌，對規(guī)范的理解是不統(tǒng)一的虑稼，任何團隊開發(fā)中都需要規(guī)范，有統(tǒng)一的代碼規(guī)范势木，肯定會事半功倍蛛倦，方便維護。做了如下總結啦桌，參考來自騰訊 alloyteam團隊 的代碼規(guī)范溯壶。
目錄、文件
項目命名
全部采用小寫方式甫男， 以下劃線分隔且改。
例：my_project_name
目錄命名
參照項目命名規(guī)則；
有復數(shù)結構時板驳，要采用復數(shù)命名法又跛。
例：scripts, styles, images, data_models
JS文件命名
參照項目命名規(guī)則。
例：account_model.js
CSS, SCSS文件命名
參照項目命名規(guī)則笋庄。
例：retina_sprites.scss
HTML文件命名
參照項目命名規(guī)則效扫。
例：error_report.html
VUE 組件命名
組件名首字母大寫駝峰，應該由多單詞組成直砂，除了一些內(nèi)置組件菌仁，如果是單個單詞，加上標識 V
例：ToDoItem.vue静暂、VTable.vue济丘、VDetail.vue
補充
alloyteam團隊規(guī)范 項目命名推薦用下劃線分隔，但在url中洽蛀，使用連字符有一定的優(yōu)勢摹迷，因為像google這樣的搜索引擎是會把連字符的單詞斷開，都作為關鍵詞郊供，而如果是下劃線的話峡碉，則會把整體作為關鍵詞（百度是兩種情況都一視同仁），所以如果有SEO的需要驮审，那建議url里的項目名稱使用連字符鲫寄。例：my-project-name
HTML
縮進使用soft tab（4個空格）吉执；
嵌套的節(jié)點應該縮進；
在屬性上地来，使用雙引號戳玫，不要使用單引號；
屬性名全小寫未斑，用中劃線做分隔符咕宿；
不要在自動閉合標簽結尾處使用斜線（HTML5 規(guī)范 指出他們是可選的）；
不要忽略可選的關閉標簽蜡秽，例：
</li>和</body>府阀；在頁面開頭使用這個簡單地doctype來啟用標準模式，使其在每個瀏覽器中盡可能一致的展現(xiàn)芽突；雖然doctype不區(qū)分大小寫肌似，但是按照慣例，doctype大寫诉瓦；
lang 屬性，根據(jù)HTML5規(guī)范：應在html標簽上加上lang屬性力细。這會給語音工具和翻譯工具幫助睬澡，告訴它們應當怎么去發(fā)音和翻譯；
字符編碼眠蚂，通過聲明一個明確的字符編碼煞聪，讓瀏覽器輕松、快速的確定適合網(wǎng)頁內(nèi)容的渲染方式逝慧，通常指定為'utf-8'昔脯；
IE兼容模式，用
<meta>標簽可以指定頁面應該用什么版本的IE來渲染笛臣；引入CSS, JS, 根據(jù)HTML5規(guī)范, 通常在引入CSS和JS時不需要指明 type云稚，因為 text/css 和 text/javascript 分別是他們的默認值；
例：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<title>Page title</title>
</head>
<body>
<img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
標簽屬性順序
- class
- id
- name
- data-*
- src, for, type, href, value , max-length, max, min, pattern
- placeholder, title, alt
- aria-*, role
- required, readonly, disabled
class是為高可復用組件設計的沈堡，所以應處在第一位静陈；
id更加具體且應該盡量少使用，所以將它放在第二位诞丽。
例：
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
標簽 boolean屬性
boolean屬性指不需要聲明取值的屬性鲸拥，XHTML需要每個屬性聲明取值，但是HTML5并不需要
例：
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
JS生成標簽
在JS文件中生成標簽讓內(nèi)容變得更難查找僧免，更難編輯刑赶，性能更差。應該盡量避免這種情況的出現(xiàn)懂衩。
減少標簽數(shù)量
在編寫HTML代碼時撞叨，需要盡量避免多余的父節(jié)點金踪；
很多時候，需要通過迭代和重構來使HTML變得更少谒所。
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
實用高于完美
盡量遵循HTML標準和語義热康，但是不應該以浪費實用性作為代價；
任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題劣领。
CSS姐军、 SCSS、 LESS
- 縮進使用soft tab（4個空格）尖淘；
- 嵌套的節(jié)點應該縮進奕锌；
- 分號，每個屬性聲明末尾都要加分號村生；
- 空格
- 以下幾種情況不需要空格：
- 屬性名后
- 多個規(guī)則的分隔符','前
- !important '!'后
- 屬性值中'('后和')'前
- 行末不要有多余的空格
- 以下幾種情況需要空格：
- 屬性值前
- 選擇器'>', '+', '~'前后
- '{'前
- !important '!'前
- @else 前后
- 屬性值中的','后
- 注釋'/'后和'/'前
- 以下幾種情況不需要空格：
- 換行
- 以下幾種情況不需要換行：
- '{'前
- 以下幾種情況需要換行：
- '{'后和'}'前
- 每個屬性獨占一行
- 多個規(guī)則的分隔符','后
- 以下幾種情況不需要換行：
- 注釋
- 注釋統(tǒng)一用'/**/'（scss中也不要用'//'）惊暴，具體參照右邊的寫法；
- 縮進與下一行代碼保持一致趁桃；
- 可位于一個代碼行的末尾辽话，與代碼間隔一個空格。
- 命名
- 類名使用小寫字母卫病，以中劃線分隔
- id采用駝峰式命名
- scss中的變量油啤、函數(shù)、混合蟀苛、placeholder采用駝峰式命名
- 顏色
- 顏色16進制用小寫字母益咬；
- 顏色16進制盡量用簡寫。
.element {
position: absolute;
top: 10px;
left: 10px;
.icon {
font-size: 16px;
}
}
/* not good */
.element {
color :red! important;
background-color: rgba(0,0,0,.5);
}
/* good */
.element {
color: red !important;
background-color: rgba(0, 0, 0, .5);
}
/* not good */
.element ,
.dialog{
...
}
/* good */
.element,
.dialog {
}
/* not good */
.element>.dialog{
...
}
/* good */
.element > .dialog{
...
}
/* not good */
.element{
...
}
/* good */
.element {
...
}
/* not good */
@if{
...
}@else{
...
}
/* good */
@if {
...
} @else {
...
}
/* Modal header */
.modal-header {
/* 50px */
width: 50px;
color: red; /* color red */
}
/* class */
.element-content {
...
}
/* id */
#myDialog {
...
}
/* 變量 */
@colorBlack: #000;
/* not good */
.element {
color: #ABCDEF;
background-color: #001122;
}
/* good */
.element {
color: #abcdef;
background-color: #012;
}
JavaScript
- 縮進帜平，使用soft tab（4個空格）幽告；
- 單行長度，不要超過80裆甩，但如果編輯器開啟word wrap可以不考慮單行長度冗锁。
- 分號
- 以下幾種情況后需加分號：
- 變量聲明
- 表達式
- return
- throw
- break
- continue
- do-while
- 文檔注釋
- 以下情況下使用：
所有常量、所有函數(shù)嗤栓、所有類
- 以下情況下使用：
- 引號, 最外層統(tǒng)一使用單引號蒿讥。
- 變量命名
- 標準變量采用駝峰式命名（除了對象的屬性外，主要是考慮到cgi返回的數(shù)據(jù)）
- 'ID'在變量名中全大寫
- 'URL'在變量名中全大寫
- 'Android'在變量名中大寫第一個字母
- 'iOS'在變量名中小寫第一個抛腕，大寫后兩個字母
- 常量全大寫芋绸，用下劃線連接
- 構造函數(shù)，大寫第一個字母
- jquery對象必須以'$'開頭命名
// 文檔注釋
/**
* @func
* @desc 一個帶參數(shù)的函數(shù)
* @param {string} a - 參數(shù)a
* @param {number} b=1 - 參數(shù)b默認值為1
* @param {string} c=1 - 參數(shù)c有兩種支持的取值</br>1—表示x</br>2—表示xx
* @param {object} d - 參數(shù)d為一個對象
* @param {string} d.e - 參數(shù)d的e屬性
* @param {string} d.f - 參數(shù)d的f屬性
* @param {object[]} g - 參數(shù)g為一個對象數(shù)組
* @param {string} g.h - 參數(shù)g數(shù)組中一項的h屬性
* @param {string} g.i - 參數(shù)g數(shù)組中一項的i屬性
* @param {string} [j] - 參數(shù)j是一個可選參數(shù)
*/
function foo(a, b, c, d, g, j) {
...
}
// 變量命名
var thisIsMyName;
var goodID;
var reportURL;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
// not good
var body = $('body');
// good
var $body = $('body');
- null
- 適用場景：
- 初始化一個將來可能被賦值為對象的變量
- 與已經(jīng)初始化的變量做比較
- 作為一個參數(shù)為對象的函數(shù)的調(diào)用傳參
- 作為一個返回對象的函數(shù)的返回值
- 不適用場景：
- 不要用null來判斷函數(shù)調(diào)用時有無傳參
- 不要與未初始化的變量做比較
- 適用場景：
// not good
function test(a, b) {
if (b === null) {
// not mean b is not supply
...
}
}
var a; // 未初始化
if (a === null) {
...
}
// good
var a = null;
if (a === null) {
...
}
- undefined
- 永遠不要直接使用undefined進行變量判斷担敌；
- 使用typeof和字符串'undefined'對變量進行判斷摔敛。
// not good
if (person === undefined) {
...
}
// good
if (typeof person === 'undefined') {
...
}
- jshint
- 用'===', '!=='代替'==', '!='；
- for-in里一定要有hasOwnProperty的判斷全封；
- 不要在內(nèi)置對象的原型上添加方法马昙，如Array, Date桃犬；
- 不要在內(nèi)層作用域的代碼里聲明了變量，之后卻訪問到了外層作用域的同名變量行楞；
- 變量不要先使用后聲明攒暇；
- 不要在一句代碼中單單使用構造函數(shù)，記得將其賦值給某個變量子房；
- 不要在同個作用域下聲明同名變量形用；
- 不要在一些不需要的地方加括號，例：delete(a.b)证杭；
- 不要使用未聲明的變量（全局變量需要加到.jshintrc文件的globals屬性里面）田度；
- 不要聲明了變量卻不使用；
- 不要在應該做比較的地方做賦值解愤；
- debugger不要出現(xiàn)在提交的代碼里镇饺；
- 數(shù)組中不要存在空元素；
- 不要在循環(huán)內(nèi)部聲明函數(shù)送讲；
- 不要像這樣使用構造函數(shù)奸笤，例：new function () { ... }, new Object；
// good
for (key in obj) {
if (obj.hasOwnProperty(key)) {
// be sure that obj[key] belongs to the object and was not inherited
console.log(obj[key]);
}
}
// not good
delete(obj.attr);
// good
delete obj.attr;
- 雜項
不要混用tab和space哼鬓；
不要在一處使用多個tab或space揭保；
換行符統(tǒng)一用'LF'；
對上下文this的引用只能使用'_this', 'that', 'self'其中一個來命名魄宏；
行尾不要有空白字符；
switch的falling through和no default的情況一定要有注釋特別說明存筏；
不允許有空的代碼塊宠互。
function Person() {
// not good
var me = this;
// good
var _this = this;
// good
var that = this;
// good
var self = this;
}
