標准：使用谷歌國際標准代碼規范。
書寫規范：增強語義化，增強閱讀性。
1. 只用小寫字母
所有的代碼都用小寫字母：適用於元素名，屬性，選擇器，特性。
<!-- 不推薦 --> <A HREF="/">Home</A> <!-- 推薦 --> <img src="google.png" alt="Google">
2. 增強語義
根據HTML各個元素的用途而去使用它們,使用語義化標簽。
使用元素要知道為什么去使用它們和是否正確。 例如，用heading元素構造標題， p 元素構造段落, a 元素構造錨點等。
禁止用行內元素包裹塊級標簽，最好不要在p標簽內嵌套別的標簽
-
<!-- 不推薦 --> <div onclick="goToRecommendations();">All recommendations</div> <!-- 推薦 --> <a href="recommendations/">All recommendations</a>
3. HTML結構、CSS樣式、JS分離
盡量確保HTML中只包含HTML結構， 把所有CSS都放到樣式表文件里，把所有JS都放到腳本文件里。
<!-- 不推薦 --> <!DOCTYPE html> <title>HTML sucks</title> <style type='text/css'> p{background:red;} </style> <h1 style="font-size: 1em;">HTML sucks</h1> <p>I’ve read about this on a few sites but now I’m sure:</p> <u>HTML is stupid!!1</u> <script type="text/javascript"> document.getElementsByTagName("u").innerHtml = 'HTML is stupid!!2'; </script> <!-- 推薦 --> <!DOCTYPE html> <title>My first CSS-only redesign</title> <link rel="stylesheet" href="default.css"> <h1>My first CSS-only redesign</h1> <p>I’ve read about this on a few sites but today I’m actually</p> <script src="default.js" type="text/javascript"></script>
格式規范：禁止看到參差不齊的格式
1. HTML格式
每個塊元素、列表元素或表格元素都獨占一行，每個子元素都相對於父元素進行縮進。
獨立元素的樣式，將塊元素、列表元素或表格元素都放在新行。
另外需要縮進塊元素、列表元素或表格元素的子元素（統一兩個空格縮進，不要使用 Tab 或者 Tab、空格混搭）。
-
<!-- 不推薦 --> <section> <div class=""></div> <h1></h1> <div> <span></span> <em></em> </div> </section> <!-- 推薦 --> <section> <div class=""></div> <h1></h1> <div> <span></span> <em></em> </div> </section>
2. CSS格式
依字母順序進行聲明。
都按字母順序聲明，很容易記住和維護。
忽略瀏覽器的特定前綴排序，但多瀏覽器特定的某個CSS屬性前綴應相對保持排序（例如-moz前綴在-webkit前面）。
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
代碼塊內容縮進，它能夠提高層次結構的清晰度。
-
@media screen, projection { html { background: #fff; color: #444; } }
聲明完結，所有聲明都要用“;”結尾。
-
/* 不推薦 */ .test { display: block; height: 100px } /* 推薦 */ .test { display: block; height: 100px; }
規則分行，每個規則獨立一行，兩個規則之間隔行
html { background: #fff; } . body { margin: auto; width: 50%; }
命名規范：嚴禁特簡化命名
1. ID和class的命名規范
為ID和class取通用且有意義的名字 /* 不推薦: 無意義 不易理解 */ #yee-1901 {} /* 不推薦: 表達不具體 */ .button-green {} .clear {} /* 推薦: 明確詳細 */ #gallery {} #login {} .video {} /* 推薦: 通用 */ .aux {} .alt {}
2. ID和class命名風格
非必要的情況下，ID和class的名稱應盡量簡短；但也要傳達ID或class是關於什么的。 /* 不推薦 */ #navigation {} .atr {} /* 推薦 */ #nav {} .author {}
3. 類型選擇器
非必要的情況下不要使用元素標簽名和ID或class進行組合;出於性能上的考慮避免使用父輩節點做選擇器. /* 不推薦 */ ul#example {} div.error {} /* 推薦 */ #example {} .error {}
4. 屬性縮寫
寫屬性值的時候盡量使用縮寫；CSS很多屬性都支持縮寫shorthand （例如 font 、background） 盡量使用縮寫，甚至只設置一個值。 /* 不推薦 */ border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0; /* 推薦 */ border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
5. 省略0后面的單位，省略0開頭小數點前面的0
-
.test { margin: 0; padding: 0; font-size: .8em; }
6. ID和class命名的定界符
ID和class名字有多單詞組合的用短破折號“-”分開。 /* 不推薦：“demo”和“image”中間沒加“-” */ .demoimage {} /* 不推薦：用下划線“_” */ .error_status {} /* 不推薦：用駝峰命名 */ .errorStatus {} /* 推薦 */ #video-id {} .ads-sample {}
Js語法規范：嚴格按照此中語言的語法要求進行編碼
1. 變量
小駝峰式命名法由小寫字母開始，后續每個單詞首字母都大寫 // 不好的命名方式 var max_count = 10; var TableTitle = 'LoginTable'; // 好的命名方式 var maxCount = 10; var tableTitle = 'LoginTable';
2. 函數
小駝峰式命名法由小寫字母開始，后續每個單詞首字母都大寫 // 是否可閱讀 function canRead() { return true; } // 獲取名稱 function getName() { return this.name; }
3. 常量
名稱全部大寫，使用大寫字母和下划線來組合命名，下划線用以分割單詞 var MAX_COUNT = 10; var URL = 'http://www.baidu.com';
4. 構造函數
大駝峰式命名法，首字母大寫，后續每個單詞首字母都大寫 function Student(name) { this.name = name; } var st = new Student('tom');
5. 類
公共屬性和方法：跟變量和函數的命名一樣。 私有屬性和方法：前綴為_(下划線)，后面跟公共屬性和方法一樣的命名方式。 function Student(name) { var _name = name; // 私有成員 // 公共方法 this.getName = function () { return _name; } // 公共方式 this.setName = function (value) { _name = value; } } var st = new Student('tom'); st.setName('jerry'); console.log(st.getName()); // => jerry：輸出_name私有變量的值
6.空格
二元運算符必須有一個空格，一元運算符與操作對象之間不允許有空格 var a = !arr.length; a++; a = b + c;
用作代碼塊其實的左花括號 “{“ 前必須有一個空格 if (condition) { //code } function funName() { //code }
關鍵詞if/else/for/while/function/switch/do/try/catch/finally后，必須有一個空格 if (condition) { //code } while (condition) { //code } (function () { //code })();
在對象創建時，屬性中的 “:”之后必須有空格，”:”之前不允許有空格 var obj = { a: 1, b: 2, c: 3 };
函數聲明、具名函數表達式、函數調用中，函數名和 “(“ 之間不允許有空格 function funName() { //code } var funName = function funName() { //code }; funName();
“,” 和 “;”前不允許有空格。如果不位於行尾， “,”和”;”后必須跟一個空格
callFunc(a, b);
行尾不允許有多余的空格
5. 換行
每個獨立語句結束后必須換行 每行不得超過120個字符（超長的不可分割的代碼允許例外，比如復雜的正則表達式，長字符串不在例外之列） 運算符處換行時，運算符必須在新行的行首 if (user.isAuthenticated() && user.isInRole('admin') && user.hasAuthority('add-admin') || user.hasAuthority('delete-admin') ) { //code } var result = number1 + number2 + number3 + number4 + number5;
在函數聲明、函數表達式、函數調用、對象創建、for語句等場景中，不允許在 “,” 或 “;” 前換行 var obj = { a: 1, b: 2, c: 3 }; foo( a, b, callback );
6. 語句
不得省略語句結束的分號 在if/else/for/do/while語句中，即使只有一行，也不得省略塊{…} if (condition) { callFunc(); }
函數定義結束不允許添加分號 function funName() { }
如果是函數表達式，分號不能省略 var funName = function () { };
注釋
推薦多寫說明注釋，HTML模塊說明注釋、函數方法說明注釋和組件用法說明注釋
1. HTML
-
<!-- HTML推薦注釋，左右各空一個空格，注釋說明，單行 --> <div class="sell"></div> <!-- HTML推薦注釋，注釋符號一上一下覆蓋整個要注釋的區塊，多行注釋 --> <!-- <div class="sell"> <p>多行注釋</p> <p>多行注釋</p> <p>多行注釋</p> <p>多行注釋</p> </div> -->
2. CSS
-
/* CSS推薦注釋，左右各空一個空格，區塊注釋說明 */ .sell { background: #000; } /* CSS推薦注釋，注釋符號一上一下覆蓋整個要注釋的區塊，多行注釋 */ /* .sell p { background: #000; font-size: 12px; } */
3. JS
// Js推薦注釋，注釋符號與注釋說明之間空一個空格，單行 var sellEle = document.querySelector('.sell'); // Js推薦注釋，注釋符號一上一下覆蓋整個要注釋的區塊，多行注釋 /* var sellEle = document.querySelector('.sell'); console.log(sellEle); */ /** * 函數說明 * 合並Grid的行 * @param {Grid} grid 需要合並的Grid * @param {Array} cols 需要合並列的Index(序號)數組；從0開始計數，序號也包含。 * @param {Boolean} isAllSome 是否2個tr的cols必須完成一樣才能進行合並。true：完成一樣；false(默認)：不完全一樣 * @return void * @author barry */ function mergeCells(grid, cols, isAllSome) { // Do Something }
使用@extends標記類的繼承信息 /** * 描述 * * @class * @extends Developer */ function Fronteer() { Developer.call(this); } util.inherits(Fronteer,Developer);
常量注釋 /** * 常量說明 * @const * @type {string} */ var REQUEST_URL = 'myurl.do';