前端開發規範手冊：（一）基本原則
阿新 • • 發佈：2017-09-25
name ges rop scrip 有效 object sel 代碼 charset
1、結構、樣式、行為分離
盡量確保文檔和模版只包含HTML結構，樣式都放到樣式表中，行為都放到腳本裏。
2、縮進
統一兩個空格縮進（總之縮進統一即可），不要使用Tab鍵或者Tab和空格混搭。
3、文件編碼
使用不帶BOM的UTF-8編碼。
- 在HTML中指定編碼
<meta charset="utf-8">
- 無需使用
@charset指定樣式表的編碼，它默認為UTF-8（參考 @charset）；
4、一律使用小寫字母
<!-- Recommended --><img src="google.png" alt="Google"><!-- Not recommended --><A HREF="/">Home</A>
/* Recommended */color: #e5e5e5;/* Not recommended */color: #E5E5E5;
5、省略外鏈資源URL協議部分
省略外鏈資源（圖片及其它媒體資源）URL中的http/https協議，使URL成為相對地址，避免Mixed Content問題，減小文件字節數。
其他協議（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);}
6、統一註釋
通過配置編輯器，可以提供快捷鍵來輸出一只認可的註釋模式。
（1）HTML 註釋
-
模塊註釋
<!-- 文章列表註釋 --> <div class="article-list">...</div>
- 區塊註釋
<!-- @name: Drop Down Menu @description: Style of top bar drop down menu. @author: Ashu([email protected]) -->
（2）CSS 註釋
組件塊和子組件塊以及聲明塊之間使用一空行分隔，子組件塊之間三空行分隔；
/* ==========================================================================
組件塊
============================================================================ */
/* 子組件塊
============================================================================ */
.selector { padding: 15px; margin-bottom: 15px;}
/* 子組件塊
============================================================================ */
.selector-secondary { display: block; /* 註釋*/}
.selector-three { display: span;}
（3）JavaScript 註釋
- 單行註釋
必須獨占一行。
// 後跟一個空格，縮進與下一行被註釋說明的代碼一致。
- 多行註釋
避免使用 /*...*/ 這樣的多行註釋。有多行註釋內容時，使用多個單行註釋。
- 函數/方法註釋
- 函數/方法註釋必須包含函數說明，有參數和返回值時必須使用註釋標識。；
- 參數和返回值註釋必須包含類型信息和說明；
- 當函數是內部函數，外部不可訪問時，可以使用 @inner 標識；
/**
* 函數描述
*
* @param {string} p1 參數1的說明
* @param {string} p2 參數2的說明，比較長
* 那就換行了.
* @param {number=} p3 參數3的說明（可選）
* @return {Object} 返回值描述
*/
function foo(p1, p2, p3) {
var p3 = p3 || 10;
return {
p1: p1,
p2: p2,
p3: p3
};
}
- 文件註釋
文件註釋用於告知這個文件的讀者，這個文件中包含哪些東西。
應該提供文件的大體內容、作者、依賴關系和兼容性信息。
如下：
/**
* @fileoverview Description of file, its uses and information
* about its dependencies.
* @author [email protected] (Firstname Lastname)
* Copyright 2015 Meizu Inc. All Rights Reserved.
*/
7、代碼驗證
- 使用 W3C HTML Validator 來驗證你的HTML代碼有效性；
- 使用 W3C CSS Validator 來驗證你的CSS代碼有效性；
代碼驗證不是最終目的，真的目的在於讓開發者在經過多次的這種驗證過程後，能夠深刻理解到怎樣的語法或寫法是非標準和不推薦的，即使在某些場景下被迫要使用非標準寫法，也可以做到心中有數。
前端開發規範手冊：（一）基本原則