web前端開發規範

阿新 • • 發佈：2022-04-04

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空格

儘量減少標籤層級

雙標籤必須閉合，單標籤用斜線閉合

行內元素裡面不可使用塊級元素

<a href="../test">
  <div></div>
</a>

避免使用已過時標籤，如：font

對於屬性的定義，使用雙引號，不要使用單引號

為每個 HTML 頁面根元素新增 lang 屬性

  <html lang="zh-CN">
    <!-- ... -->
  </html>

通過宣告一個明確的字元編碼，讓瀏覽器輕鬆、快速的確定網頁內容渲染方式，通常指定為'UTF-8'

【語義化】儘量遵循 HTML 標準和語義，但是不要以犧牲實用性為代價；任何時候都要儘量使用最少的標籤並保持最小的複雜度

（二）、css / Less / Sass 編碼規範

類名使用小寫字母，以中劃線分隔

id 採用駝峰式命名

Less / Sass 中的變數、函式、混合等採用駝峰式命名

所有宣告語句都應當以分號結尾最後一條宣告語句後面的分號是可選的，但是，如果省略這個分號，你的程式碼可能更易出錯,尤其壓縮打包出錯

選擇器不要超過4層（在Less / Sass中避免巢狀超過4 層）

縮排使用兩個空格代替 Tab

為選擇器分組時，將單獨的選擇器單獨放在一行

每條樣式宣告應該獨佔一行

儘可能不要使用行內（inline）樣式

元件之間的完全解耦，不會造成名稱空間的汙染，如：.mod-xxx ul li 的寫法帶來的潛在的巢狀風險。

選擇器權重（樣式覆蓋）

非通用樣式使用巢狀方式進行編寫，避免影響其他自己不瞭解樣式，造成樣式覆蓋
Vue 中樣式謹慎使用 scoped，會影響樣式選擇器效能，請使用第一點進行特有樣式編寫
樣式需要修改時，儘量找到原樣式宣告進行修改

屬性的書寫順序, 舉個例子

.box {
    /* 定位 */
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    /* 盒模型 */
    width: 50px;
    height: 50px;
    margin: 10px;
    border: 1px solid black;
    / *其他* /
    color: #efefef;
}

定位相關, 常見的有：display position left top float 等
盒模型相關, 常見的有：width height margin padding border 等
其他屬性

（三）、JavaScript 編碼規範

常量建議還是使用大寫字元+下劃線命名。 const PRICE_MAX=10000;

函式按職責命名，一般都是動詞開頭。 function setUserInfo(){}

變數不要先使用後宣告

不要在同個作用域下宣告同名變數

在必要的地方新增非空判斷以提高程式碼的穩健性

使用===代替==，!==代替!=（==會自動進行型別轉換，可能會出現奇怪的結果）

使用三目運算代替簡單的 if-else

let count = 100;
count = seat < 5 ? 20 : seat < 10 ? 60 : 90;

正確使用 null

不要用null來判斷函式呼叫時有無傳參
不要與未初始化的變數做比較

正確使用 undefined

不要直接使用 undefined 進行變數判斷

使用typeof和字串 'undefined' 對變數進行判斷

不要給變數賦值 undefined（undefined 本身就表示一個變數未定義）

普通函式：首字母小寫，駝峰式命名，統一使用動詞或者動詞+名詞形式,如：fnGetVersion()

物件方法與事件響應函式：物件方法命名使用fn+物件類名+動詞+名詞形式,如：fnAddressGetEmail()

事件響應函式：fn+觸發事件物件名+事件名或者模組名，如：fnDivClick()

【常用的動詞】

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 暫停,