前端开发规范，你真的了解吗？一起来学习一下前端开发规范，让你的代码高级起来！
代碼規范
1 編碼風格規范
1.1 使用ES6風格編碼源碼
定義變量使用let ,定義常量使用const
使用export ，import 模塊化
1.2 組件 props 原子化
提供默認值
使用 type 屬性校驗類型
使用 props 之前先檢查該 prop 是否存在
1.3 避免 this.$parent
1.4 謹慎使用 this.$refs
1.5 無需將 this 賦值給 component 變量
1.6 調試信息console.log() debugger 使用完及時刪除
2 JS代碼命名
2.1 變量名
必須使用camel命名法
2.2 參數名
必須使用camel命名法
2.3 函數名
必須使用camel命名法
2.4 方法/屬性
必須使用camel命名法
2.5 私有（保護）成員
必須以下劃線_開頭
2.6 常量名
必須使用全部大寫的下劃線命名法，如IS_DEBUG_ENABLED
2.7 類名
必須使用pascal命名法
2.8 枚舉名
必須使用pascal命名法
2.9 枚舉的屬性
必須使用全部大寫的下劃線命名法
2.10 命名空間
必須使用camel命名法
2.11 語義
命名同時還需要關注語義，如：變量名應當使用名詞
2.12 boolean類型
應當使用is、has等起頭,表示其類型
2.13 函數名
應當用動賓短語
2.14 類名
應當用名詞
3 vue代碼命名
3.1 VUE方法放置順序
components
props
data
created
mounted
activited
update
beforeRouteUpdate
metods
filter
computed
Watch
3.2 Method自定義方法命名
動賓短語（good：jumpPage、openOrderInfoDialog）（bad：go、nextPage、show、open、login）
ajax方法以get、post 開頭，以 data 結尾（good：getListData、postFormData）（bad：takeData、confirmData、getList、postForm）
事件方法（type-change、username-input）例如this.$on(‘item-click’,this.handleItemClick)
init、refresh 單詞除外盡量使用常用單詞開頭（set、get、open、close、jump）
駝峰命名（good: getListData）（bad: get_list_data、getlistData）
3.3 Data Props方法注意
使用data里的變量時請先在data里面初始化
props要制定類型
props改變父組件數據，基礎數據類型用$emit
ajax請求數據用isLoading,isError變量
不命名多余數據，例如詳情頁的ajax數據，定義一個對象，不要每個字段都聲明。
表單數據包裹一層form
3.4 生命周期方法注意
不在mounted、created之類的方法寫邏輯，取ajax數據。
在created里面監聽Bus事件。
ajax要放在父組件里不要寫在子組件里。
4 ajax請求規范
4.1 前端框架請求服務端接口方法規范
定義兩種請求類型：GET（查詢），POST（增，刪，改）
路徑命名規范：全部小寫，禁止大寫和下劃線
錯誤示范：
http:😕/127.0.0.1/api/v1/content/wordList?id=1
http:😕/127.0.0.1/api/v1/content/word_list?id=1
顯式的標志出是什么請求
顯式標識動詞：
新增：add
更新：update
刪除：delete
查詢：get
http://127.0.0.1/api/v1/content/getwordlist?wordId=1
http://127.0.0.1/api/v1/content/addword
http://127.0.0.1/api/v1/content/updateword
http://127.0.0.1/api/v1/content/deleteword
如果是批量修改：
http://127.0.0.1/api/v1/content/updatewords
禁止使用無意義的單詞
例如:index,event,home
http://127.0.0.1/api/v1/content/index
http://127.0.0.1/api/v1/content/xxxxx
版本化
在api路由上增加版本號V* ,便于產品迭代或更換接口。
4.2 接口響應數據規范
統一響應數據結構
服務端 Rest API 接口提供數據服務；
服務端提供規范的數據響應接口，方便前端解析；
前端與服務端約定響應數據結構如下：
數據結構編碼如下：
● 分頁類型結構數據結果規范
分頁格式數據結構與統一響應數據結構規范一致，但在data類型數據結構中增加了分頁相關的屬性，詳細的分頁數據結構如下表。
接口請求分頁相關參數規范
5 錯誤信息提示規范
5.1 總體要求
后端錯誤提示包括“后端主動檢查”和“后端異常錯誤兩種”，針對兩種不通的提示，在顯示方式和效果上存在差異。
5.2 后端主動檢驗
主要指后端程序主動對數據進行合法性校驗時，校驗不通過時提示的異常信息，該異常信息由業務端判斷給出具體錯誤提示，該類提示常用場景如：字段長度、字段類型、字段格式、唯一性等的合法性校驗（具體顯示樣式以藍狐最新版為準）。
● 情況一：一般性校驗，前端就能完成，不需要請求后端數據的校驗，比如數據長度、類型、格式等，校驗規則及過程：
該類校驗在前端提交前觸發，前端一次性將所有內容校驗完畢，對不符合項進行提示；
前端校驗通過后提交后端進行校驗，校驗規則基本和前端保持一致；
后端校驗時，如果遇到校驗不通過時，直接返回前端結果，前端進行提示；
● 情況二：后端實時校驗，需要后端數據驗證并立即返回校驗結果，比如用戶名、單位名稱等唯一性校驗，校驗規則及過程：
?輸入框失去焦點后，前端先對數據格式、類型等做基本規則校驗；
?前端校驗通過后提交后端進行校驗，后端對數據規則及查詢結果進行匹配分析；
后端校驗不通過時，直接返回前端結果，前端進行提示；
5.3 后端異常錯誤
主要指后端程序執行時，因不可預知的問題出現異常時，由系統拋出的錯誤信息，該異常信息由統一異常處理程序攔截預處理，并將錯誤碼及異常信息向上拋出，前端接收到此類錯誤信息時，必須按統一提示風格和樣式顯示錯誤提示，提示內容需包含錯誤碼（具體顯示樣式以藍狐最新版為準）。
6 項目文件規范
6.1 api文件夾
用來存放各功能所調用的接口，命名盡量與業務功能統一，方便識別。
6.2 common文件夾
用來存放項目中的公共配置項
● ccui.js用來存放所有引入ccui組件庫的配置，可根據工程所需組件自行引入相應組件。
● globalComponents.js用來存放需要全局掛載到vue對象或者window對象上的公用方法。
● table-list.js用來定義項目中在Local Storage中緩存表格數據的表名。
● zh-ch.js用來定義項目中提示語配置文件。
6.3 commponents文件夾
用來存放項目中的公用組件，search-component.js是高級搜索自定義組件專用。
6.4 filters文件夾
用來存放公共過濾器
modules/common.js用來存放公共過濾器，不可更改，用來ccui小組統一維護，如果有項目中需要的特殊過濾器，需在modules文件夾重新建立文件，并在index.js導出過濾器。
6.5 mixins文件夾
用來存放多頁簽功能中提取出的公共方法。
6.6 router文件夾
用來存放項目中靜態路由
modules/common.js用來存放如：404,305等公共路由，如其他項目中還需要別的路由分組請自行在modules中建立文件
6.7 views文件夾
用來存放所有頁面文件
6.8 common文件夾
用來存放架構級的頁面，各工程一般不需要自行更改。
6.9 business文件夾
用來存放各工程業務級的頁面。
7 表單控件規范
7.1 表單控件
● 表單控件都要加title用來顯示過長的placeholder內容
● 時間控件，默認允許輸入。
7.2 表單驗證
● 身份證號，限定18位，超過不能輸入
● 手機號，限定11位，超過不能輸入
● 郵政編碼，限定6位，超過不能輸入
● 商家（公司）名稱長度80個字符，店鋪名稱最長是30個字符
7.3 表單驗證報錯的處理
● 如有表單驗證報錯，頁面要滾動到第一條報錯的控件位置
7.4 Ajax
● 提示要統一按demo工程實現。
● 對數據進行操作后（保存、刪除等），彈窗確定后，操作完成前，不應允許對其他按鈕進行操作，
● 進行所有導致數據變化的操作后，應有統一樣式的提示信息，應該用CCUI的message組件的ccui自定義組件，成功綠底，報錯紅底，頁面居中，成功持續3s。報錯要手動關閉 如：新增修改保存、刪除、凍結禁用停用等都需要提示，提示文字根據產品和ui規定顯示。
● loading分為兩種,要在頁面渲染之后再消失:
頁面加載列表loading,白色背景無文字,用于頁面初始加載列表,詳情時,或者列表搜索時的loading;
引起數據變化的loading,黑色小框背景有文字,如(保存、提交、審批、刪除等),其中的文字是可以根據操作不同自由發揮的,格式為"XX中,請稍候…"
● 發出ajax時要把讓按鈕失效，ajax返回結果后再激活。
8 高級搜索規范
● 帶tab的頁面中點擊tab按鈕時，如果tab按鈕相當于高級搜索的進一步搜索的，高級搜索的內容不要清空。反之要清空高級搜索內容。
● 都頁面滾動
● 底部翻頁組件跟著表格下面，只要有1條數據就要有分頁組件，無數據時不顯示分頁組件
● 表格控件的高度，由用戶選擇的每頁多少條記錄來決定
9 表格開發的相關規定
9.1 列寬設置
● 身份證，手機號，郵編和其他固定長度的字段應設置固定長度，開發頁面時要做到所有字段長度都心中有數，遇到不清楚長度的字段可以問后端寫接口的同學或先關產品人員。
● 表格同時還要至少要保留一列不設寬度。不設寬度的列應選擇內容較多而不確定長度的列，不設寬度的列應至少有一個不許隱藏，序號和操作列應設置寬度。
● 各字段寬度整理【無特殊需要按下面默認】
9.2 列表頁進詳情頁或編輯頁后返回
● 要保留搜索控件和高級搜索輸入的內容
● 返回列表頁后之前點擊過的行應該高亮顯示
9.3 列表頁進詳情頁后返回
● 返回時列表頁要有緩存
● 如果在詳情頁進行了刪除操作，如果刪掉的是最后一頁的唯一一條，返回時要跳轉上一頁
9.4 列表頁進編輯頁后返回
● 返回時要刷新列表頁
● 如果在編輯頁進行了刪除操作，如果刪掉的是最后一頁的唯一一條，返回時要跳轉上一頁
9.5 分頁
● 分頁組件樣式不要自己私自修改，如有需求由CCUI統一修改
● 所有的表格頁面都要把用戶選擇的分頁條數緩存
9.6 截斷字符串顯示規則
● 被截斷的字符串上鼠標懸停后顯示要統一用瀏覽器原生title
9.7 字段對齊規則
● 一般情況下文字居左，金額類及數量類居右。
10 頁面緩存相關規定
● 列表頁進新增，編輯，詳情頁，新增，編輯，詳情頁不需要緩存。
● 列表頁進新增頁，新增頁點返回到列表頁需要緩存，點保存到列表頁不需要緩存。
● 列表頁進編輯頁，編輯頁點返回到列表頁需要緩存，點保存到列表頁不需要緩存。
● 列表頁進詳情頁，詳情頁點返回到列表頁需要緩存。
● 緩存修改方式請參照樣板工程doc文件夾里《列表緩存.docx》文檔
● 分頁顯示條數與當前頁數刷新頁面需保存當前狀態，修改方式請參照樣板工程doc文件夾里《分頁顯示條數與當前頁數緩存.docx》
11 代碼注釋規范
11.1 說明
代碼注釋在一個項目的后期維護中顯的尤為重要，所以我們要為每一個被復用的組件編寫組件使用說明，為組件中每一個方法編寫方法說明，以下情況務必添加注釋：
● 公共組件使用說明；
● 各組件中重要函數或者類說明；
● 復雜的業務邏輯處理說明；
● 特殊情況的代碼處理說明,對于代碼中特殊用途的變量、存在臨界值、函數中使用的hack、使用了某種算法或思路等需要進行注釋描述；
● 注釋塊必須以/（至少兩個星號）開頭/；
● 單行注釋使用//。
11.2 單行注釋
普通方法一般使用單行注釋 // 來說明該方法主要作用
11.3 多行注釋
12 CSS樣式規范
12.1 總體要求
● 模板庫中僅能通過修改css來修改組件的布局，組件的樣式不合適要在CCUI組件庫中修改。
● 頁面樣式通過scope私有化（模塊化），不要對全局造成污染。
● 模板庫中的組件的顏色、字體、大小等基礎屬性都要通過CCUI庫來定義，不能在scope中修改。
● 命名要跟功能相關，不要跟業務相關。
.purchase-box{} - /* 不推薦: 命名和具體業務相關 /
.breadcrumb-box{} - / 推薦: 表達功能 /
.contract-detail-info{} - / 不推薦: 命名和具體業務相關 /
.detail-info{} - / 推薦: 表達功能 */
12.2 ID和class命名
● 規則命名中，一律采用小寫加中劃線的方式，不允許使用大寫字母或 ；
● 以小寫字母開頭，不能以數字和“-”、“”開頭；
● 命名避免使用中文拼音，應該采用更簡明有語義的英文單詞進行組合；
● 不允許通過1、2、3等序號進行命名；
● 避免class與id重名；
● 不要在id上設置樣式，要設置在class上。
使用有意義的或通用的ID和class命名：ID和class的命名應反映該元素的功能或使用通用名稱，而不要用抽象的晦澀的命名。
?反映元素的使用目的是首選；
?使用通用名稱代表該元素不要表示特定意義；
?使用功能性或通用的名稱可以更適用于文檔或模版變化的情況。
?ID和class命名越簡短越好，只要足夠表達涵義。這樣既有助于理解，提高代碼效率
#yee-1901 {} - /* 不推薦: 無意義 /
.button-green {}.clear {} - / 不推薦: 與樣式相關 /
#gallery {}#login {}.video {} - / 推薦: 特殊性 /
.aux {}.alt {} - / 推薦: 通用性 */
12.3 常用的樣式命名
12.3.1. 頁面結構
● 頁頭：header
● 頁面主體：main
● 頁尾：footer
● 內容：content
● 導航：nav
● 側欄：sidebar
● 欄目：column
● 頁面外圍控制：wrapper
● 左右中：left right center
12.3.2. 導航
● 導航：nav
● 主導航：main-nav
● 子導航：sub-nav
● 頂導航：top-nav
● 邊導航：sidebar
● 左導航：left-sidebar
● 右導航：right-sidebar
● 菜單：menu
● 子菜單：sub-menu
● 標題：title
● 摘要：summary
12.3.3. 功能
● 標志：logo
● 廣告：banner
● 登錄：login
● 登錄條：login-bar
● 注冊：register
● 搜索：search
● 標題：title
● 報表：report
● 詳情：detail
● 表單：form
文章摘至:https://www.yuque.com/zhumoshimowangzhu/uhm5mo/ok1zu7?
總結
以上是生活随笔為你收集整理的前端开发规范，你真的了解吗？一起来学习一下前端开发规范，让你的代码高级起来！的全部內容，希望文章能夠幫你解決所遇到的問題。
