資訊專欄INFORMATION COLUMN
摘要：聲明順序相關的屬性聲明應該以下面的順序分組處理盒模型排版外觀處在第一位，因為他可以使一個元素脫離正常文本流，并且覆蓋盒模型相關的樣式。關于完整的屬性以及他們的順序，請參考命名保持命名為全小寫，可以使用短劃線不要使用下劃線和命名。
文件名
均采用小寫方式， 以中劃線分隔, 如有復數結構時，采用復數命名法
目錄名：scripts,styles,images,data-models
文件名： example.js retina-sprites.css
Javascript 注釋 何時使用難于理解的代碼段
可能存在錯誤的代碼段
瀏覽器特殊的HACK代碼
想吐槽的產品邏輯, 合作同事
業(yè)務邏輯強相關的代碼
// 單行注釋斜杠后面要留有一個空格
/*
* 多行注釋最少三行，注釋內容與星標前保留一個空格
*/
var hello = ""; // 描述變量可以這樣寫在變量右邊
/*
* 描述方法（函數）必須使用多行描述
* 如有必要可以加上參數和返回值說明，參考 http://usejsdoc.org/
* @param {Object} balabalabala
* @return {Object} balabalabala
*/
function foo() {
// 描述下面代碼時做什么的，方法第一行不需要留空格
doSomething();
// 描述下面代碼時做什么的，上方需要留一個空行
afterDoSomething();
if (flag) {
// 描述下面代碼時做什么的，代碼塊的第一行也不需要留空格
drive();
}
}
語法
使用四個空格的 soft tabs — 這是保證代碼在各種環(huán)境下顯示一致的唯一方式。
一般情況下 有關鍵字的地方都要有空格
字符串使用單引號而不是雙引號：｀var str = "hello world";｀
單行長度，理論上不要超過80列，不過如果編輯器開啟 soft wrap 的話可以不考慮單行長度
接上一條，如果需要換行，存在操作符的情況，一定在操作符后換行，然后換的行縮進4個空格
這里要注意，如果是多次換行的話就沒有必要繼續(xù)縮進了，比如說下面這種就是最佳格式。
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對象
// Bad
var team = new Team();
team.title = "AlloyTeam";
team.count = 25;
// Good
var team = {
title: "AlloyTeam", // 冒號后需要跟一個空格
count: 25
};
創(chuàng)建Array對象
// Bad
var colors = new Array("red", "green", "blue");
var numbers = new Array(1, 2, 3, 4);
// Good
var colors = [ "red", "green", "blue" ]; // 中括號左右均需要一個空格
var numbers = [ 1, 2, 3, 4 ];
構造函數
/**
* 創(chuàng)建一個構造函數
*/
function Modal(options) { // 函數名使用大寫字母開頭，駝峰式命名
this.width = options.width; // 屬性在構造函數體中定義
this.height = options.height;
}
Modal.prototype.show = function() { // 方法定義在原型鏈上
// show
}
Modal.prototype.hide = function() {
// hide
}
// 實例化對象
var modal = new Modal({
width: 200,
height: 300
});
if 語法
// if else 前后留有空格，
if (flag) {
} else {
}
for 語法
// 普通for
var values = [ 1, 2, 3, 4, 5, 6, 7 ],
i, len;
for (i=0, len=values.length; i
switch 語法
// switch和括號之間有空格， case需要縮進， break之后跟下一個case中間留一個空行
switch (condition) {
case "first":
// code
break;
case "third":
// code
break;
default:
// code
}
// 沒有default的情況需要注釋特別說明
switch(condition) {
case "first":
// code
break;
case "second":
// code
break;
// no default
}
聲明
變量聲明
var _body = $(document.body); // 全局變量使用下劃線 _ 開頭
function foo() {
var result, // 一個代碼塊里的變量聲明只用一個var
length, // 一個變量一行，行末跟注釋
mainWrap;// 駝峰式命名法
}
常量聲明
使用全大寫字母＋下劃線的命名方式方式
var IMAGE_DOMAIN = "WWW.XXX.COM";
函數聲明
函數聲明統(tǒng)一使用function命令進行聲明
// good
function foo() { // 小括號前不需要空格，小括號與大括號間需要一個空格
doSomething(); // 函數調用括號前后不需要空格
return "hello world";
}
// bad
var foo = function() {
return "hello world";
}
// bad
var foo = new Function(
"return "hello world""
);
立即執(zhí)行函數的寫法, 最外層必須包一層括號
// Good
(function() {
"use strict"; // 使用嚴格模式
function doSomething() {
// code
}
function doSomethingElse() {
// code
}
})();
空行
說明：下面代碼中的注釋處代表著實際代碼中的空行
function foo1() {
}
// 方法之間加空行
function foo2() {
}
// 邏輯塊與方法之間加空行增加可讀性
for (var i=0; i<10; i++) {
}
// 邏輯塊之間加空行增加可讀性
if (flag) {
} else {
}
// 文件結尾留一個空行
雜項
只有字符串類型允許使用 == !=，如if(x == "a") 其他情況一律用嚴格比較條件 === !==
eval 非特殊業(yè)務， 禁用！！！
with 非特殊業(yè)務， 禁用！！！
CSS
語法
使用組合選擇器時，保持每個獨立的選擇器占用一行。
為了代碼的易讀性，在每個聲明的左括號前增加一個空格。
聲明塊的右括號應該另起一行。
每條聲明 : 后應該插入一個空格。
每條聲明應該只占用一行來保證錯誤報告更加準確。
所有聲明應該以分號結尾。雖然最后一條聲明后的分號是可選的，但是如果沒有他，你的代碼會更容易出錯。
逗號分隔的取值，都應該在逗號之后增加一個空格。比如說box-shadow
不要在顏色值 rgb() rgba() hsl() hsla()和 rect() 中增加空格
不要帶有取值前面不必要的 0 (比如，使用 .5 替代 0.5)。
所有的十六進制值都應該使用小寫字母，例如 #fff。因為小寫字母有更多樣的外形，在瀏覽文檔時，他們能夠更輕松的被區(qū)分開來。
為選擇器中的屬性取值添加引號，例如 input[type="text"]。 他們只在某些情況下可有可無，所以都使用引號可以增加一致性。
不要為 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;
}
聲明順序
相關的屬性聲明應該以下面的順序分組處理：
Positioning
Box model 盒模型
Typographic 排版
Visual 外觀
Positioning 處在第一位，因為他可以使一個元素脫離正常文本流，并且覆蓋盒模型相關的樣式。盒模型緊跟其后，因為他決定了一個組件的大小和位置。
其他屬性只在組件 內部 起作用或者不會對前面兩種情況的結果產生影響，所以他們排在后面。
關于完整的屬性以及他們的順序，請參考 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 命名）。短劃線應該作為相關類的自然間斷。(例如，.btn 和 .btn-danger)。
避免過度使用簡寫。.btn 可以很好地描述 button，但是 .s 不能代表任何元素。
使用 .js-* classes 來表示行為(相對于樣式)，但是不要在 CSS 中包含這些 classes。
/* Bad example */
.t { ... }
.red { ... }
.header { ... }
/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }
選擇器
使用 classes 而不是通用元素標簽來優(yōu)化渲染性能。
避免在經常出現的組件中使用一些屬性選擇器 (例如，[class^="..."])。瀏覽器性能會受到這些情況的影響。
減少選擇器的長度，每個組合選擇器選擇器的條目應該盡量控制在 3 個以內。
只在必要的情況下使用后代選擇器 (例如，沒有使用帶前綴 classes 的情況).
/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
不要使用 @import
與 標簽相比，@import 指令要慢很多，不光增加了額外的請求次數，還會導致不可預料的問題。替代辦法有以下幾種：
使用多個 元素
通過 Sass 或 Less 類似的 CSS 預處理器將多個 CSS 文件編譯為一個文件
HTML
語法
用兩個空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現的方法。
在屬性上，使用雙引號，不要使用單引號。
不要在自動閉合標簽結尾處使用斜線 - HTML5 規(guī)范 指出他們是可選的。
不要忽略可選的關閉標簽（例如， 和
嵌套的節(jié)點應該縮進（四個空格）。
字符編碼通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
引入 CSS 和 JavaScript根據 HTML5 規(guī)范, 通常在引入 CSS 和 JavaScript 時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值。
屬性順序HTML 屬性應該按照特定的順序出現以保證易讀性。
class
id
name
data-*
src, for, type, href, value , max-length, max, min, pattern
placeholder, title, alt
aria-*, role
required, readonly, disabled
Classes 是為高可復用組件設計的，理論上他們應處在第一位。Ids 更加具體而且應該盡量少使用（例如, 頁內書簽），所以他們處在第二位。
不要用JavaScript 生成標簽在 JavaScript 文件中生成標簽讓內容變得更難查找，更難編輯，性能更差。應該盡量避免這種情況的出現。
示例代碼
Example link
