前端開(kāi)發(fā)規(guī)范手冊(cè)
/ 基本原則
基本原則
基本原則
結(jié)構(gòu)、樣式、行為分離
盡量確保文檔和模板只包含 HTML 結(jié)構(gòu)，樣式都放到樣式表里，行為都放到腳本里。
縮進(jìn)
統(tǒng)一兩個(gè)空格縮進(jìn)（總之縮進(jìn)統(tǒng)一即可），不要使用 Tab 或者 Tab、空格混搭。
文件編碼
使用不帶 BOM 的 UTF-8 編碼。
- 在 HTML中指定編碼
<meta charset="utf-8">； - 無(wú)需使用
@charset指定樣式表的編碼，它默認(rèn)為UTF-8（參考 @charset）；
一律使用小寫(xiě)字母
<!-- Recommended --><img src="google.png" alt="Google"><!-- Not recommended --><A HREF="/">Home</A>
/* Recommended */color: #e5e5e5;/* Not recommended */color: #E5E5E5;
省略外鏈資源 URL 協(xié)議部分
省略外鏈資源（圖片及其它媒體資源）URL 中的 http / https 協(xié)議，使 URL 成為相對(duì)地址，避免Mixed Content 問(wèn)題，減小文件字節(jié)數(shù)。
其它協(xié)議（ftp 等）的 URL 不省略。
<!-- Recommended --><script src="//www.w3cschool.cn/statics/js/autotrack.js"></script><!-- Not recommended --><script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>
/* Recommended */.example { background: url(//www.google.com/images/example);
}/* Not recommended */.example { background: url(http://www.google.com/images/example);
}統(tǒng)一注釋
通過(guò)配置編輯器，可以提供快捷鍵來(lái)輸出一致認(rèn)可的注釋模式。
HTML 注釋
模塊注釋
<!-- 文章列表列表模塊 --><div class="article-list">...</div>
區(qū)塊注釋
<!-- @name: Drop Down Menu @description: Style of top bar drop down menu. @author: Ashu(Aaaaaashu@gmail.com) -->
CSS 注釋
組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；
/* ==========================================================================
組件塊
============================================================================ *//* 子組件塊
============================================================================ */.selector { padding: 15px; margin-bottom: 15px;
}/* 子組件塊
============================================================================ */.selector-secondary { display: block; /* 注釋*/}.selector-three { display: span;
}JavaScript 注釋
- 單行注釋
必須獨(dú)占一行。// 后跟一個(gè)空格，縮進(jìn)與下一行被注釋說(shuō)明的代碼一致。
- 多行注釋
避免使用 /*...*/ 這樣的多行注釋。有多行注釋內(nèi)容時(shí)，使用多個(gè)單行注釋。
- 函數(shù)/方法注釋
- 函數(shù)/方法注釋必須包含函數(shù)說(shuō)明，有參數(shù)和返回值時(shí)必須使用注釋標(biāo)識(shí)。；
- 參數(shù)和返回值注釋必須包含類(lèi)型信息和說(shuō)明；
- 當(dāng)函數(shù)是內(nèi)部函數(shù)，外部不可訪問(wèn)時(shí)，可以使用 @inner 標(biāo)識(shí)；
/**
* 函數(shù)描述
*
* @param {string} p1 參數(shù)1的說(shuō)明
* @param {string} p2 參數(shù)2的說(shuō)明，比較長(zhǎng)
* 那就換行了.
* @param {number=} p3 參數(shù)3的說(shuō)明（可選）
* @return {Object} 返回值描述
*/function foo(p1, p2, p3) { var p3 = p3 || 10; return {
p1: p1,
p2: p2,
p3: p3
};
}- 文件注釋
文件注釋用于告訴不熟悉這段代碼的讀者這個(gè)文件中包含哪些東西。 應(yīng)該提供文件的大體內(nèi)容, 它的作者, 依賴(lài)關(guān)系和兼容性信息。如下:
/** * @fileoverview Description of file, its uses and information * about its dependencies. * @author user@meizu.com (Firstname Lastname) * Copyright 2015 Meizu Inc. All Rights Reserved. */
代碼驗(yàn)證
- 使用 W3C HTML Validator 來(lái)驗(yàn)證你的HTML代碼有效性；
- 使用 W3C CSS Validator 來(lái)驗(yàn)證你的CSS代碼有效性；
代碼驗(yàn)證不是最終目的，真的目的在于讓開(kāi)發(fā)者在經(jīng)過(guò)多次的這種驗(yàn)證過(guò)程后，能夠深刻理解到怎樣的語(yǔ)法或?qū)懛ㄊ欠菢?biāo)準(zhǔn)和不推薦的，即使在某些場(chǎng)景下被迫要使用非標(biāo)準(zhǔn)寫(xiě)法，也可以做到心中有數(shù)。