web前端開發指南

前言

本文檔的目的在於指導前端工程師使用同一個規範和風格進行開發工作，使工作方式有本可依。

web項目結構與公共文件的命名：

傳統項目組織結構如下圖

project
  --index.html
  --css
    --common.css
    --base.css
  --js
    --common.js
  --imgs
  --templates
  --fonts

單頁面項目組織結構如下圖

公共文件命名

1. index.html為項目的入口。
2. base.css為框架級別的公共樣式文件，common.css為項目級別的公共樣式文件。
3. common.js為項目級別的公共類庫和函數庫。

UI實現指導原則

PC端項目

1. 一般情況下，子節點的位置不應該超出父節點的範圍。
2. 圖片盡量用背景的方式，如果圖片需要縮放，則用image標籤。
3. 非行內元素橫排，盡量用inline-block方式實現，文字環繞，則用float方式實現。
4. 圓角效果使用背景圖片實現，無法做到的，則不支持圓角。

移動端項目

模板引擎使用原則

1. 模板文件中可以包含結構跟樣式，可以包含外聯的script標籤，但是不能包含內聯的script。

模塊化引擎使用原則

UI組件封裝原則

文件夾及文件命名

1. 原則上，所有文件名都以basename+extension的形式構成。
2. basename中的單詞，用period（.）隔開。
3. 文件名中不能出現空格。
4. 同一個頁面元素的背景圖片，如果有多種狀態，圖片名應該反映出其代表的狀態，如phone.normal.jpg、phone.active.jpg、phone.disabled.jpg。
5. js文件的版本號用dash隔開，如my.plugin-1.2.js。

css類名命名：

1. 基本原則，BEM命名法為主，原子類命名法和狀態標記為輔。
2. DOM節點被分析為block和element兩類，element包含於block之內。
3. 將節點樹平面化，一般情況下，層次結構簡化成只有block和element兩級。
4. 對於極少數節點數比較多，邏輯關係比較複雜的block，可以分析成三級，即B-B-E。
5. 各個層級用dash（-）分隔開，即B-E。
6. 各個層級原則上只用一個單詞表示，如footer-logo。如果一個單詞難以清楚表達，則用詞組，詞組的各個單詞用underscore分隔開，如science_fiction-harry_potter。
7. 為了達到重用的目的，少量常用的樣式可以使用原子類，比如移動端項目中的背景圖片.background{background-size:100% 100%}。
8. 狀態標記是用來表明該元素在元素關係，或者UI邏輯中，所處的狀態。數量有限，且使用約定俗成的單詞，如active、firs、last、disabled、hidden、odd、even、checked。

javascript變量命名：

1. 基本原則，變量名+後綴。
2. 其中變量名是必須的，採用駝峰式命名。
3. 後綴為可選的，用以表明變量的數據類型。
4. 當變量名本身可能跟其他變量名相混的時候，就需要加上後綴，如studentName_s與studentName_j。
5. 後綴與其代表的數據類型，對應關係如下表。

變量後綴與數據類型對應關係表

後綴	數據類型
i	integer
n	number
s	string
j	jquery
e	element
d	date
o	object
a	array
f	function
cb	回調函數

javascript編程指導原則

1. 不應使用過時和廢棄的API，如jQuery的click、load等函數。
2. 頁面加載後的回調函數，寫成$(function)的形式，而不應寫成$(document).ready(function)的形式。
3. class屬性原則上用於控制樣式，附帶功能是作為javascript的選擇器。
4. id屬性不用於控制樣式，只用於javascript中的元素選擇。
5. 需要操作一組或者一個element時，如果沒有現成class選擇器可用，則需要添加class或者id，操作一組元素，用class，操作一個元素，用id。
6. script標籤只能放在body或head標籤裡面，不能放在二者的外面。

代碼風格

1. 使用prettify插件進行代碼格式化。
2. 使用tab進行縮進，而不是空格。
3. 單行注釋雙斜杠後面需加空格。
4. 單行注釋中間如果沒有逗號，則句末不用加句號。
5. 一行代碼末尾不應加空格。
6. if/else/for/while/try語句不應省略花括號。

FAQs

1. css類名，為何使用三種方式組合？