前端代碼風(fēng)格

yzzz 發(fā)布于2019-08-30 13:14 / 2627人閱讀

摘要：聲明順序相關(guān)的屬性聲明應(yīng)該以下面的順序分組處理盒模型排版外觀處在第一位，因?yàn)樗梢允挂粋€(gè)元素脫離正常文本流，并且覆蓋盒模型相關(guān)的樣式。關(guān)于完整的屬性以及他們的順序，請(qǐng)參考命名保持命名為全小寫，可以使用短劃線不要使用下劃線和命名。

文件名

均采用小寫方式，以中劃線分隔, 如有復(fù)數(shù)結(jié)構(gòu)時(shí)，采用復(fù)數(shù)命名法

目錄名：scripts,styles,images,data-models

文件名： example.js retina-sprites.css

Javascript 注釋 何時(shí)使用

難于理解的代碼段

可能存在錯(cuò)誤的代碼段

瀏覽器特殊的HACK代碼

想吐槽的產(chǎn)品邏輯, 合作同事

業(yè)務(wù)邏輯強(qiáng)相關(guān)的代碼

// 單行注釋斜杠后面要留有一個(gè)空格

/*
 * 多行注釋最少三行，注釋內(nèi)容與星標(biāo)前保留一個(gè)空格
 */
 
 var hello = "";        // 描述變量可以這樣寫在變量右邊
 
/*
 * 描述方法（函數(shù)）必須使用多行描述
 * 如有必要可以加上參數(shù)和返回值說(shuō)明，參考 http://usejsdoc.org/
 * @param {Object} balabalabala
 * @return {Object} balabalabala
 */
 function foo() {
     // 描述下面代碼時(shí)做什么的，方法第一行不需要留空格
     doSomething();
     
     // 描述下面代碼時(shí)做什么的，上方需要留一個(gè)空行
     afterDoSomething();
     
     if (flag) {
         // 描述下面代碼時(shí)做什么的，代碼塊的第一行也不需要留空格
         drive();
     }
 }

語(yǔ)法

使用四個(gè)空格的 soft tabs — 這是保證代碼在各種環(huán)境下顯示一致的唯一方式。

一般情況下有關(guān)鍵字的地方都要有空格

字符串使用單引號(hào)而不是雙引號(hào)：｀var str = "hello world";｀

單行長(zhǎng)度，理論上不要超過(guò)80列，不過(guò)如果編輯器開(kāi)啟 soft wrap 的話可以不考慮單行長(zhǎng)度

接上一條，如果需要換行，存在操作符的情況，一定在操作符后換行，然后換的行縮進(jìn)4個(gè)空格

這里要注意，如果是多次換行的話就沒(méi)有必要繼續(xù)縮進(jìn)了，比如說(shuō)下面這種就是最佳格式。

if (typeof qqfind === "undefined" ||
    typeof qqfind.cdnrejected === "undefined" ||
    qqfind.cdnrejected !== true) {
    url = "http://pub.idqqimg.com/qqfind/js/location4.js";
} else {
    url = "http://find.qq.com/js/location4.js";
}

創(chuàng)建Object對(duì)象

// Bad
var team = new Team();
team.title = "AlloyTeam";
team.count = 25;

// Good  
var team = {
    title: "AlloyTeam",        // 冒號(hào)后需要跟一個(gè)空格
    count: 25
};

創(chuàng)建Array對(duì)象

// Bad
var colors = new Array("red", "green", "blue");
var numbers = new Array(1, 2, 3, 4);

// Good
var colors = [ "red", "green", "blue" ];  // 中括號(hào)左右均需要一個(gè)空格
var numbers = [ 1, 2, 3, 4 ];

構(gòu)造函數(shù)

/**
 * 創(chuàng)建一個(gè)構(gòu)造函數(shù)
 */
function Modal(options) {    // 函數(shù)名使用大寫字母開(kāi)頭，駝峰式命名
    this.width = options.width;    // 屬性在構(gòu)造函數(shù)體中定義
    this.height = options.height;
}

Modal.prototype.show = function() {    // 方法定義在原型鏈上
    // show
}

Modal.prototype.hide = function() {
    // hide
}

// 實(shí)例化對(duì)象
var modal = new Modal({
        width: 200,
        height: 300
    });

if 語(yǔ)法

// if else 前后留有空格，
if (flag) {

} else {

}

for 語(yǔ)法

// 普通for
var values = [ 1, 2, 3, 4, 5, 6, 7 ],
    i, len;
for (i=0, len=values.length; i
switch 語(yǔ)法
// switch和括號(hào)之間有空格， case需要縮進(jìn)， break之后跟下一個(gè)case中間留一個(gè)空行
switch (condition) {
    case "first":
        // code
        break;

    case "third":
        // code
        break;

    default:
    // code
}

// 沒(méi)有default的情況需要注釋特別說(shuō)明
switch(condition) {
    case "first":
        // code
        break;

    case "second":
        // code
        break;

    // no default
}

聲明
變量聲明
var _body = $(document.body); // 全局變量使用下劃線 _ 開(kāi)頭
function foo() {
    var result,    // 一個(gè)代碼塊里的變量聲明只用一個(gè)var
         length,    // 一個(gè)變量一行，行末跟注釋
         mainWrap;// 駝峰式命名法
         
}
常量聲明
使用全大寫字母＋下劃線的命名方式方式
var IMAGE_DOMAIN = "WWW.XXX.COM";     
函數(shù)聲明
函數(shù)聲明統(tǒng)一使用function命令進(jìn)行聲明

// good
function foo() {        // 小括號(hào)前不需要空格，小括號(hào)與大括號(hào)間需要一個(gè)空格
    doSomething(); // 函數(shù)調(diào)用括號(hào)前后不需要空格
    return "hello world";
}

// bad
var foo = function() {
    return "hello world";
}

// bad
var foo = new Function(
    "return "hello world""
);
立即執(zhí)行函數(shù)的寫法, 最外層必須包一層括號(hào)

// Good
(function() {
    "use strict";    // 使用嚴(yán)格模式

    function doSomething() {
        // code
    }

    function doSomethingElse() {
        // code
    }

})();
空行
說(shuō)明：下面代碼中的注釋處代表著實(shí)際代碼中的空行
function foo1() {
    
}
// 方法之間加空行
function foo2() {
    
}
// 邏輯塊與方法之間加空行增加可讀性
for (var i=0; i<10; i++) {
    
} 
// 邏輯塊之間加空行增加可讀性
if (flag) {
    
} else {
    
}
// 文件結(jié)尾留一個(gè)空行
雜項(xiàng)

只有字符串類型允許使用 == !=，如if(x == "a") 其他情況一律用嚴(yán)格比較條件 === !==

eval 非特殊業(yè)務(wù)， 禁用?。?！

with 非特殊業(yè)務(wù)， 禁用！??！


CSS
語(yǔ)法

使用組合選擇器時(shí)，保持每個(gè)獨(dú)立的選擇器占用一行。

為了代碼的易讀性，在每個(gè)聲明的左括號(hào)前增加一個(gè)空格。

聲明塊的右括號(hào)應(yīng)該另起一行。

每條聲明 : 后應(yīng)該插入一個(gè)空格。

每條聲明應(yīng)該只占用一行來(lái)保證錯(cuò)誤報(bào)告更加準(zhǔn)確。

所有聲明應(yīng)該以分號(hào)結(jié)尾。雖然最后一條聲明后的分號(hào)是可選的，但是如果沒(méi)有他，你的代碼會(huì)更容易出錯(cuò)。

逗號(hào)分隔的取值，都應(yīng)該在逗號(hào)之后增加一個(gè)空格。比如說(shuō)box-shadow

不要在顏色值 rgb() rgba() hsl() hsla()和 rect() 中增加空格

不要帶有取值前面不必要的 0 (比如，使用 .5 替代 0.5)。

所有的十六進(jìn)制值都應(yīng)該使用小寫字母，例如 #fff。因?yàn)樾懽帜赣懈鄻拥耐庑危跒g覽文檔時(shí)，他們能夠更輕松的被區(qū)分開(kāi)來(lái)。

為選擇器中的屬性取值添加引號(hào)，例如 input[type="text"]。 他們只在某些情況下可有可無(wú)，所以都使用引號(hào)可以增加一致性。

不要為 0 指明單位，比如使用 margin: 0; 而不是 margin: 0px;。


/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
    padding: 15px;
    margin: 0px 0px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 2px #C0C0C0, inset 0 1px 0 #F8F8F8
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
    padding: 15px;
    margin-bottom: 15px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #c0c0c0, inset 0 1px 0 #f8f8f8;
}
聲明順序
相關(guān)的屬性聲明應(yīng)該以下面的順序分組處理：

Positioning

Box model 盒模型

Typographic 排版

Visual 外觀


Positioning 處在第一位，因?yàn)樗梢允挂粋€(gè)元素脫離正常文本流，并且覆蓋盒模型相關(guān)的樣式。盒模型緊跟其后，因?yàn)樗麤Q定了一個(gè)組件的大小和位置。
其他屬性只在組件 內(nèi)部 起作用或者不會(huì)對(duì)前面兩種情況的結(jié)果產(chǎn)生影響，所以他們排在后面。
關(guān)于完整的屬性以及他們的順序，請(qǐng)參考 Recess
.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
}
Class 命名

保持 Class 命名為全小寫，可以使用短劃線（不要使用下劃線和 camelCase 命名）。短劃線應(yīng)該作為相關(guān)類的自然間斷。(例如，.btn 和 .btn-danger)。

避免過(guò)度使用簡(jiǎn)寫。.btn 可以很好地描述 button，但是 .s 不能代表任何元素。

使用 .js-* classes 來(lái)表示行為(相對(duì)于樣式)，但是不要在 CSS 中包含這些 classes。


/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
選擇器

使用 classes 而不是通用元素標(biāo)簽來(lái)優(yōu)化渲染性能。

避免在經(jīng)常出現(xiàn)的組件中使用一些屬性選擇器 (例如，[class^="..."])。瀏覽器性能會(huì)受到這些情況的影響。

減少選擇器的長(zhǎng)度，每個(gè)組合選擇器選擇器的條目應(yīng)該盡量控制在 3 個(gè)以內(nèi)。

只在必要的情況下使用后代選擇器 (例如，沒(méi)有使用帶前綴 classes 的情況).


/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
不要使用 @import 
與  標(biāo)簽相比，@import 指令要慢很多，不光增加了額外的請(qǐng)求次數(shù)，還會(huì)導(dǎo)致不可預(yù)料的問(wèn)題。替代辦法有以下幾種：

使用多個(gè)  元素

通過(guò) Sass 或 Less 類似的 CSS 預(yù)處理器將多個(gè) CSS 文件編譯為一個(gè)文件


HTML
語(yǔ)法

用兩個(gè)空格來(lái)代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。

在屬性上，使用雙引號(hào)，不要使用單引號(hào)。

不要在自動(dòng)閉合標(biāo)簽結(jié)尾處使用斜線 - HTML5 規(guī)范 指出他們是可選的。

不要忽略可選的關(guān)閉標(biāo)簽（例如， 和 ）。

嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)（四個(gè)空格）。


字符編碼
通過(guò)明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
引入 CSS 和 JavaScript
根據(jù) HTML5 規(guī)范, 通常在引入 CSS 和 JavaScript 時(shí)不需要指明 type，因?yàn)?text/css 和 text/javascript 分別是他們的默認(rèn)值。
屬性順序
HTML 屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。

class

id

name

data-*

src, for, type, href, value , max-length, max, min, pattern

placeholder, title, alt

aria-*, role

required, readonly, disabled


Classes 是為高可復(fù)用組件設(shè)計(jì)的，理論上他們應(yīng)處在第一位。Ids 更加具體而且應(yīng)該盡量少使用（例如, 頁(yè)內(nèi)書(shū)簽），所以他們處在第二位。
不要用JavaScript 生成標(biāo)簽
在 JavaScript 文件中生成標(biāo)簽讓內(nèi)容變得更難查找，更難編輯，性能更差。應(yīng)該盡量避免這種情況的出現(xiàn)。
示例代碼


  
    
    
    
    
  
  
    
      Example link