前端开发规范,你真的了解吗?一起来学习一下前端开发规范,让你的代码高级起来!
代碼規范
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?
總結
以上是生活随笔為你收集整理的前端开发规范,你真的了解吗?一起来学习一下前端开发规范,让你的代码高级起来!的全部內容,希望文章能夠幫你解決所遇到的問題。