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="https://www.cnblogs.com/catchFish-ing/archive/2022/04/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 暫停,

(四)、撰寫注釋

公共組件需要在檔案頭部加上注釋說明：

/**
*檔案用途說明
*作者姓名、聯系方式（旺旺）
*制作日期
**/

注釋單獨一行，不要在代碼后的同一行內加注釋：

// 個人資訊

部分撰寫思路參考別的碼友，welcome你的觀光,感謝！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/455615.html

標籤：其他

上一篇：使用js 讀取 execl 檔案中的所有內容

下一篇：如何計算這個遞回函式的T(n)？

web前端開發規范

web前端開發規范

規范概述

一、目錄及檔案命名規范

(一)、例靜態專題頁目錄

（二）、例管理端專案目錄

（三）、命名規范

二、環境要求

三、編碼規范

（一）、HTML / Template 編碼規范

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

（三）、JavaScript 編碼規范

(四)、 撰寫注釋

部分撰寫思路參考別的碼友，welcome你的觀光,感謝！

(四)、撰寫注釋