web前端工程師編碼規範

命名規範

1. 語義化：包括檔案名，變量名，方法名，參數名、css選擇器、path路徑名，語義時應根據業務優先考慮通用的、熟知的、簡潔的英文。如

• 登入子產品通常用login、logout、userName、phone、password、register、inviteCode等命名
• 權限子產品通常用user、role、function、menu等命名
• 擷取清單資料，常用getXXXList、getXXXs、getXXXData等命名
• 擷取詳情資料：常用getXXX、getXXXInfo、getXXXDetail等命名
• 表單送出方法通常用submit、save等命名

1. 駝峰或下劃線：多個英文需用駝峰或下劃線

• 方法名、css選擇器名稱偏向于用駝峰
• 變量名、參數名偏向于使用下劃線。如apple_price、apple_count、map_center、 map_level
• 檔案名、path路徑名，偏向于使用非駝峰、非下劃線式命名

1. 前後端命名規範最好保持一緻
2. 生僻英文命名應考慮加入注釋

目錄規範

• 全局公共元件應放至src目錄下的component檔案内
• 局部公共元件應放至該局部子產品下面的component檔案内
• 全局方法統一放在src/utils/index.js檔案内
• 靜态資源統一放在src/assets/目錄下
• 全局配置檔案應在src下

層級清晰

1. 根據業務子產品，把代碼分子產品。子產品下仍有多個業務時，繼續分子產品
2. Vue項目裡的接口子產品、Store狀态管理子產品、Views視圖子產品、router路由子產品
3. Html代碼縮進，div父元素、子元素命名可采用層級命名，如( orderList > orederItem )

代碼封裝

1. 多個(兩個以上)元件共用的代碼需封裝為公共元件，減少代碼的重複率
2. 多個元件共用的方法可上升至全局方法，如日期格式化、深克隆、去重
3. 使用頻率高的公共元件應在main.js全局引用

ES6+的使用

1. 編碼時優先考慮ES6的使用，如let、const、解構指派、箭頭函數、async await
2. 字元串String、數組Array、對象Object中新增的ES6+方法可使代碼更為簡潔
3. css3的彈性盒（display:flex）可使頁面布局實作很簡單
4. 項目根目錄下加入Eslint規則檢查

其它

1. 圖檔規範（了解四種常用圖檔格式jpg、svg、png、webp）
2. json規範 (設計時注意語義化、層級、簡潔)
3. css規範（全局css和局部css）
4. html規範（div應層級清晰、div元素事件屬性放最後）

規範的重要性

1. 統一的規範會使代碼簡潔明了、易閱讀
2. 友善開發和維護大項目
3. 減少BUG，發現BUG時迅速定位
4. 友善多人合作項目