web前端開發規範 規範概述 一個人走的更快，一群人可以走的更遠，前提是統一的策略，還要不斷地反省和優化。不管有多少人共同參與同一項目，儘可能確保每一行代碼都像是同一個人編寫的 開發目錄規範 開發環境規範 開發編碼規範 一、目錄及文件命名規範 (一)、例靜態專題頁目錄 - src / html 源代 ...
web前端開發規範
規範概述
一個人走的更快，一群人可以走的更遠，前提是統一的策略，還要不斷地反省和優化。不管有多少人共同參與同一項目，儘可能確保每一行代碼都像是同一個人編寫的
- 開發目錄規範
- 開發環境規範
- 開發編碼規範
一、目錄及文件命名規範
(一)、例靜態專題頁目錄
- src / html 源代碼
- img / image / images 圖片資源
- js JavaScript腳本
- dep / development / package 第三方依賴包
（二）、例管理端項目目錄
- project
-- static / public 靜態文件
-- js
-- css
-- tpl
-- index.html
...
-- src 源代碼（邏輯）
-- common 公共資源
-- img
-- css
...
-- component 組件
-- home
-- login
...
-- api 介面請求
-- view / page 模板文件
（三）、命名規範
- 目錄，文件名稱統一小駝峰命名法。 productDetail.html
二、環境要求
- Node.js 8.9 或更高版本，你可以使用 nvm 或 nvm-windows 在一臺電腦中管理多個 Node 版本
- 使用VS Code進行代碼編寫
- 規定 Tab 大小為 2 個空格，保證在所有環境下獲得一致展現(settings.json文件修改"editor.tabSize": 2)
- 安裝插件 Vetur（ Vue開發擴展及 Vue 文件代碼格式化）
- 使用 Chrome 瀏覽器並安裝 Vue.js devtools 進行調試
三、編碼規範
（一）、HTML / Template 編碼規範
- HTML換行縮進：採用 tab空格
- 儘量減少標簽層級
- 雙標簽必須閉合，單標簽用斜線閉合
- 行內元素裡面不可使用塊級元素
- 避免使用已過時標簽，如：font
- 對於屬性的定義，使用雙引號，不要使用單引號
- 為每個 HTML 頁面根元素添加 lang 屬性
- 通過聲明一個明確的字元編碼，讓瀏覽器輕鬆、快速的確定網頁內容渲染方式，通常指定為'UTF-8' .....
<a href="../test">
<div></div>
</a>
<html lang="zh-CN">
<!-- ... -->
</html>
【語義化】儘量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價；任何時候都要儘量使用最少的標簽並保持最小的複雜度
（二）、css / Less / Sass 編碼規範
- 類名使用小寫字母，以中劃線分隔
- id 採用駝峰式命名
- Less / Sass 中的變數、函數、混合等採用駝峰式命名
- 所有聲明語句都應當以分號結尾 最後一條聲明語句後面的分號是可選的，但是，如果省略這個分號，你的代碼可能更易出錯,尤其壓縮打包出錯
- 選擇器不要超過4層（在Less / Sass中避免嵌套超過4 層）
- 縮進使用兩個空格代替 Tab
- 為選擇器分組時，將單獨的選擇器單獨放在一行
- 每條樣式聲明應該獨占一行
- 儘可能不要使用行內（inline）樣式
- 組件之間的完全解耦，不會造成命名空間的污染，如：.mod-xxx ul li 的寫法帶來的潛在的嵌套風險。
- 選擇器權重（樣式覆蓋）
- 非通用樣式使用嵌套方式進行編寫，避免影響其他自己不瞭解樣式，造成樣式覆蓋
- Vue 中樣式謹慎使用 scoped，會影響樣式選擇器性能，請使用第一點進行特有樣式編寫
- 樣式需要修改時，儘量找到原樣式聲明進行修改
- 屬性的書寫順序, 舉個例子
- 定位相關, 常見的有：display position left top float 等
- 盒模型相關, 常見的有：width height margin padding border 等
- 其他屬性
- 常量建議還是使用大寫字元+下劃線命名。 const PRICE_MAX=10000;
- 函數按職責命名，一般都是動詞開頭。 function setUserInfo(){}
- 變數不要先使用後聲明
- 不要在同個作用域下聲明同名變數
- 在必要的地方添加非空判斷以提高代碼的穩健性
- 使用===代替==，!==代替!=（==會自動進行類型轉換，可能會出現奇怪的結果）
- 使用三目運算代替簡單的 if-else
- 正確使用 null
- 不要用null來判斷函數調用時有無傳參
- 不要與未初始化的變數做比較
- 正確使用 undefined
- 不要直接使用 undefined 進行變數判斷
- 使用typeof和字元串 'undefined' 對變數進行判斷
- 不要給變數賦值 undefined（undefined 本身就表示一個變數未定義）
- 普通函數：首字母小寫，駝峰式命名，統一使用動詞或者動詞+名詞形式,如：fnGetVersion()
- 對象方法與事件響應函數：對象方法命名使用fn+對象類名+動詞+名詞形式,如：fnAddressGetEmail()
- 事件響應函數：fn+觸發事件對象名+事件名或者模塊名，如：fnDivClick()
- 公共組件需要在文件頭部加上註釋說明：
- 註釋單獨一行，不要在代碼後的同一行內加註釋：
.box {
/* 定位 */
display: block;
position: absolute;
left: 0;
top: 0;
/* 盒模型 */
width: 50px;
height: 50px;
margin: 10px;
border: 1px solid black;
/ *其他* /
color: #efefef;
}
（三）、JavaScript 編碼規範
let count = 100;
count = seat < 5 ? 20 : seat < 10 ? 60 : 90;
【常用的動詞】
get 獲取/set 設置,
add 增加/remove 刪除
create 創建/destory 移除
start 啟動/stop 停止
open 打開/close 關閉,
read 讀取/write 寫入
load 載入/save 保存,
create 創建/destroy 銷毀
begin 開始/end 結束,
backup 備份/restore 恢復
import 導入/export 導出,
split 分割/merge 合併
inject 註入/extract 提取,
attach 附著/detach 脫離
bind 綁定/separate 分離,
view 查看/browse 瀏覽
edit 編輯/modify 修改,
select 選取/mark 標記
copy 複製/paste 粘貼,
undo 撤銷/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 減少
play 播放/pause 暫停,
(四)、 編寫註釋
/**
*文件用途說明
*作者姓名、聯繫方式（旺旺）
*製作日期
**/
// 個人信息
