1.Naming Project
1.1【強制】專案命名
1）物業合夥人
property_partner
2）資料視覺化
data_visual
1.2【強制】目錄名
1.images（存放圖片檔案）；
2.styles（存放css檔案）；
3.components（存放元件檔案）；
1.3【強制】JavaScript檔案命名
1.4【強制】CSS檔案命名
1.5【強制】HTML檔案命名
2.HTML
2.1【強制】語法
1）使用四個空格的soft tabs —這是保證程式碼在各種環境下顯示一致的唯一方式。
2）在屬性上，使用雙引號，不要使用單引號。
3）不要忽略可選的關閉標籤（例如，</li>和</body>）。
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>複製程式碼2.2【強制】HTML檔案中id的命名
1）頁面結構id命名
2）導航類id命名
導航：nav
3）功能類id命名
2.3【強制】HTML5 doctype
<!DOCTYPE html>
<html>
<head>
</head>
</html>複製程式碼2.4【強制】引入CSS和JavaScript
<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- In-document CSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>複製程式碼2.5【推薦】減少標籤數量
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">複製程式碼2.6【推薦】使用語義化標籤
3.CSS
3.1【強制】語法
1）使用四個空格的soft tabs —這是保證程式碼在各種環境下顯示一致的唯一方式。
2）為了程式碼的易讀性，在每個宣告的左括號前增加一個空格。
3）儘可能使用短的十六進位制數值，例如使用#fff替代#ffffff。
4）不要為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 #CCC, inset 0 1px 0 #FFFFFF
}
/* 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 #ccc, inset 0 1px 0 #fff;
}複製程式碼
3.2【強制】CSS類名命名規範
1.如果多人協作，可以考慮使用不同的字首予以區分：內容fl-content；
2.命名技巧:
(1)
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }複製程式碼(2)字型大小,直接使用”font+字型大小”作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }複製程式碼(3)對齊樣式,使用對齊目標的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }複製程式碼(4)
.bar-news { }
.bar-product { }複製程式碼
3.3【強制】屬性簡寫
· padding
· margin
· font
· background
· border
· border-radius複製程式碼/* Bad example */
.element {
margin: 0 0 10px;
}
/* Good example */
.element {
margin-bottom: 10px;
}複製程式碼3.5【推薦】選擇器
1）使用classes而不是通用元素標籤來優化渲染效能。
2）避免在經常出現的元件中使用一些屬性選擇器,(例如，[class^="..."])。瀏覽器效能會受到這些情況的影響。
3）減少選擇器的長度，每個組合選擇器選擇器的條目應該儘量控制在3個以內。
4）只在必要的情況下使用後代選擇器(例如，沒有使用帶字首classes的情況)。
/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }複製程式碼3.6【推薦】雜項
1）不允許有空的規則
2）去掉小數點前面的0
3）元素選擇器用小寫字母
4）儘量少用'*'選擇器
5）選擇器不要超過4層
4.JavaScript
4.1【強制】縮排,分號,單行長度
1）一律使用4個空格
2）語句之後一律以分號結束， 不可以省略
3）單行長度，理論上不要超過80列，不過如果編輯器開啟soft wrap的話可以不考慮單行長度
4.2【強制】變數命名,宣告
1）標準變數採用駝峰標識，使用let宣告。
2）常量採用大寫字母，下劃線連線的方式，使用const宣告。
3）建構函式，大寫第一個字母。
4）字串使用單引號。
5）在函式作用域頂部宣告變數。
let thisIsMyName;
const MAX_COUNT = 10;
function Person(name) {
this.name = name
}複製程式碼4.3【強制】物件，陣列宣告
*統一使用字面量宣告
// Bad
var team = new Team();
team.title = "AlloyTeam";
team.count = 25;
// Good semi colon 採用 Followed by space 的形式
var team = {
title: "AlloyTeam",
count: 25
};
// 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 ];複製程式碼4.4【推薦】註釋規範
1）雙斜線後，必須跟註釋內容保留一個空格；
2）可獨佔一行,前邊不許有空行,縮排與下一行程式碼保持一致；
3）可位於一個程式碼行的末尾，注意這裡的格式。
// Good
if (condition) {
// if you made it here, then all security checks passed
allowed();
}
var zhangsan = "zhangsan"; // 雙斜線距離分號四個空格，雙斜線後始終保留一個空格複製程式碼
1）最少三行,格式如下；
2）前邊留空一行。
/*
*註釋內容與星標前保留一個空格
*/複製程式碼
4.5【強制】undefined
1) 永遠不要直接使用undefined進行變數判斷，使用typeof和字串’undefined'對變數進行判斷。
// Bad
if(person === undefind) {
doSomething();
}
// Good
if(typeof person === 'undefined') {
doSomething();
doSomethingElse();
}複製程式碼4.7【強制】if else花括號前後留有空格
if(condition) {
doSomething();
} else {
doSomethingElse();
}複製程式碼4.8【強制】條件表示式和等號
1）
2）使用快捷方式:
// Bad
if(name === '') {
doSomething();
}
// Good
if(name) {
doSomething();
doSomethingElse();
}
// Bad
if(name.length > 0) {
doSomething();
}
// Good
if(name.length) {
doSomething();
doSomethingElse();
}複製程式碼
4.9【推薦】雜項
1）不要混用tab和空格。
2）對上下文this的引用只能使用’_this', 'that', ‘self’其中一個來命名。
3）行尾不要有空白字元。
4）不允許有空的程式碼塊。
5）語句結束後一定要加分號;。
6）不希望其他人修改的函式在名稱前加下劃線_。
7）花括號前必須有一個空格。
8）使用函式引數預設值。
// Bad
function test(arg) {
let val = arg || {}
}
// Good
function test(arg = {}) {
let val = arg
}複製程式碼