前端開發(fā)必備小技巧之前端代碼規(guī)范Vue篇
前端代碼規(guī)范
規(guī)范的目的是為了編寫高質(zhì)量的代碼，讓你的團隊成員每天得心情都是愉悅的，大家在一起是快樂的。
引自《阿里規(guī)約》的開頭片段:
…現(xiàn)代軟件架構的復雜性需要協(xié)同開發(fā)完成，如何高效地協(xié)同呢?無規(guī)矩不成方圓，無規(guī)范難以協(xié)同，比如，制訂交通法規(guī)表面上是要限制行車權，實際上是保障公眾的人身安全，試想如果沒有限速，沒有紅綠燈，誰還敢上路行駛。對軟件來說，適當?shù)囊?guī)范和標準絕不是消滅代碼內(nèi)容的創(chuàng)造性、優(yōu)雅性，而是限制過度個性化，以一種普遍認可的統(tǒng)一方式一起做事，提升協(xié)作效率，降低溝通成本。代碼的字里行間流淌的是軟件系統(tǒng)的血液，質(zhì)量的提升是盡可能少踩坑，杜絕踩重復的坑，切實提升系統(tǒng)穩(wěn)定性，碼出質(zhì)量。
一、前端代碼規(guī)范Vue篇
1、Vue編碼基礎
Vue 項目規(guī)范以 Vue 官方規(guī)范https://v2.cn.vuejs.org/v2/style-guide/中的A規(guī)范為基礎，在其上面進行項目開發(fā)，故所有代碼均遵守該規(guī)范。
請仔仔細細閱讀 Vue官方規(guī)范，切記，此為第一步。
1.1、組件規(guī)范
- 組件名為多個單詞
組件名應該始終是多個單詞組成(大于等于 2)，且命名規(guī)范為KebabCase格式。
這樣做可以避免跟現(xiàn)有的以及未來的 HTML 元素相沖突，因為所有的 HTML 元素名稱都是單個單詞的。
正例:
export default {
name: 'TodoItem',
// ...
}
反例:
export default {
name: 'Todo',
// ...
}
export default {
name: 'todo-item',
// ...
}
- 組件文件名為 pascal-case 格式
正例:
components/ |- my-component.vue
反例:
components/ |- myCoaponent.vue |- MyCoaponent.vue
- 基礎組件文件名為 base 開頭，使用完整單詞而不是縮寫
正例:
components/ |-base-button.vue |-base-table.vue |-base-icon.vue
反例:
components/ |- MySutton.vue |- VueTable.vue |- Icon.vue
- 和父組件緊密屬合的子組件應該以父組件名作為前綴命名
正例:
components/ |- todo-list.vue |- todo-list-item.vue |- todo-list-item-button.vue |- user-profi1e-options.vue(完整單詞)
反例:
components/ |- TodoList.vue |- TodoItem. vue |- TodoButton.vue |- UProfopts.vue(使用了縮寫)
- 在Template 模版中使用組件，應使用 PascalCase 模式，并且使用自閉合組件。
正例:
<1--在單文件組件、字符串模板和JSX中--> <myComponent /> <Rom><table :colum="data"/></Rom>
反例:
<my-component /><row><table :column="data"/></row>
- 組件的 data 必須是一個函致
當在組件中使用 data 屬性的時候 (除了 new Vue 外的任何地方)，它的值必須是返回一個對象的函數(shù)。 因為如果直按是一個對象的話，子組件之間的屬性值會互相影響，
正例:
export default {
name: 'App',
data(){
return{
title:'我是一個標題',
}
},
}
反例:
export default {
name: 'App',
data:{
title:'我是一個標題',
},
}
- Prop 定義應該盡量詳細
- 必須使用 camelCase 駝峰命名
- 必須指定類型
- 必須加上注釋，表明其含義
- 必須加上 required 或者 default，兩者二選其一
- 如果有業(yè)務需要，必須加上 validator 驗證
正例:
export default {
name: "HelloWorld",
props: {
//組件狀態(tài)，用于控制組件的顏色
status: {
type: String,
required: true,
validator: function (value) {
return ["succ", "info", "error"].indexof(value) !== -1;
},
},
// 用戶級別，用于顯示皇冠個效
userLevel: {
type: String,
required: true,
},
},
};
- 為組件樣式設置作用域
正例:
<template>
<div class="hello">
HelloWorld
</div>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello {
color: white;
font-size: 22px;
margin: 10px 0 0;
}
</style>
反例:
<template>
<div class="hello">
HelloWorld
</div>
</template>
<!-- 沒有scoped 特性-->
<style >
.hello {
color: white;
font-size: 22px;
margin: 10px 0 0;
}
</style>
- 如果特性元素較多，應該主動換行
正例:
<MyComponent
foo="a"
bar="b"
baz="c">
</MyComponent>
反例:
<MyComponent foo="a" bar="b" baz="c"></MyComponent>
1.2、模板中使用簡單的表達式
組件模板應該只包含簡單的表達式，復雜的表達式則應該重構為計算屬性或方法。復雜表達式會讓你的模極變得不那么聲明式。我們應該盡量描述應該出現(xiàn)的是什么，而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。
正例:
<template>
<div >
{{ normalizedFullName }}
</div>
</template>
<script>
export default {
name: "HelloWorld",
computed:{
normalizedFullName:function(){
return this.fullName.split(' ').map((word)=>{
return word[0].toUpperCase()+word.split(1)
}).join(' ')
}
}
};
</script>
反例:
<template>
<div >
{{ fullName.split(' ').map((word)=>{
return word[0].toUpperCase()+word.split(1)
}).join(' ')}}
</div>
</template>
1.3、指令都使用縮寫形式
指令推薦都使用縮寫形式，(用 : 表示v·bind: ，用 @ 表示 v-on， 用#表示 v-slot:)
正例:
<input @input="onInput" @focus="onFocus">
反例:
<input v-on:input="onInput" @focus="onFocus">
1.4、 標簽順序保持一致
單文件組件應該總是讓標簽順序保持為
正例:
<template> </template> <script> </script> <style scoped> </style>
反例:
<template> </template> <style scoped> </style> <script> </script>
1.5、必須為 v-for 設置鍵值 key
1.6、v-show 與 v-if 選擇
如果運行時，需要非常顏繁地切換，使用v·show;如果在運行時，條件很少改變，使用v-if。
1.7、script 標簽內(nèi)部結構順序
components>props>data>compued>watch>filter>鉤子函數(shù)(鉤子函數(shù)按其執(zhí)行順序)>methods
1.8、Vue Router 規(guī)范
- 頁面跳轉(zhuǎn)數(shù)據(jù)傳遞使用路由參數(shù)
頁面跳轉(zhuǎn)，例如A頁面跳轉(zhuǎn)到B頁面，需要將A頁面的數(shù)據(jù)傳遞到B頁面，推使用路由參數(shù)進行傳參，而不是將需要傳遞的數(shù)據(jù)保存 vuex，然后在 B頁面取出 vuex的數(shù)據(jù)，因為如果在 B頁面剛新會導致 vuex 數(shù)據(jù)丟失
正例:
let id='1113'
this.$router.push({name:'userDetail',
query:{
id:id
}
})
- 使用路由懶加載(延遲加載)機制
{
path: "/Login",
name: "Login",
// 登錄頁
component: () => import('@/components/Login/Login.vue'),
},
3.router 中的命名規(guī)范
path、childrenPoints命名規(guī)范采用kebab-case命名規(guī)范(盡量vue文件的目錄結構保持一致，因為目錄、文件名都是kebab-case，這樣很方便找到對應的文件)
{
path:'/system/system-list',
// 系統(tǒng)列表
name:'SystemList',
component:()=>import('../components/system/system-list.vue')
}
4.router 中的 path 命名規(guī)范
path除了采用kebab-case命名規(guī)范以外，必須以/開頭，即使是children里的path也要以/開頭。如下示例
目的:
經(jīng)常有這樣的場景:某個頁面有問題，要立刻找到這個文件，如果不用以/開頭，path為parent和children組成的，可能經(jīng)常需要在router文件里搜索多次才能找到，而如用以/開頭，則能立刻搜索到對應的組件
{
path: '/',
// 首頁
name: 'home',
component: () => import('../components/home/home.vue'),
redirect: '/panel',
// 重定向到看板頁
children:[
{
path:'/panel',
// 大屏面板
name:'Panel',
component:()=>import('../components/panel/panel.vue'),
meta: {
bg: 'bg'
},
// 背景圖
},
{
path:'/system',
// 系統(tǒng)設置
name:'System',
component:()=>import('../components/system/system.vue')
}]
}
2、Vue 項目目錄規(guī)范
2.1、基礎
vue 項目中的所有命名一定要與后端命名統(tǒng)一。
比如權限:后端 privilege,前端無論 router,store,api等都必須使用 privielege 單詞!
2.2、使用 Vue-cli 腳手架
使用 vue·cli3 來初始化項目，項目名按照上面的命名規(guī)范
2.3、 目錄說明
目錄名按照上面的命名規(guī)范，其中components 組件用大寫駝峰，其余除components 組件目錄外的所有目錄均便用 kebab-case 合名。
src源碼目錄
|-- api 所有api接口 |-- assets 靜志資源，images，icons，styles等 |-- components 公用組件 |-- config 配置信息 |-- constants 常量信息，項目所有Enun，全局常量等 |-- directives 自定義指令 |-- filters 過濾器，全局工具 |-- datas 模擬教據(jù)，臨時存放 |-- lib 外部引用的插件存放及修改文件 |-- mock 模擬接口，臨時存放 |-- plugins 插件，全局使用 |-- router 路由，統(tǒng)一管理 |-- store vuex，統(tǒng)一管理 |-- themes 自定義樣式主題 |-- views 視圖目錄 | |-- role role模塊名 | |-- role-list.vue role列表頁面 | |-- role-add. vue role新建頁面 | |-- role-update.vue role更新頁面 | |-- index.less role模塊樣式 | |-- components role模塊通用組件文件夾 | |-- employee employee模塊
1. api 目錄
- 文件、變量命名要與后端保持一致。
- 此目錄對應后端 API 接口，按照后端一個controller 一個api.js文件。若項目較大時，可以按照業(yè)務劃分子目錄，并與后端保持一致。
- api中的方法名字要與后端 api url 盡量保持語義高度一致性。
- 對于 api中的每個方法要添加注釋，注釋與后端swagger 接口文檔保持一致。
正例:
后端ulr:EmployeeController.java
/employee/add /employee/delete/id /employee/update
前端:employee.js
//添加員工
addEmployee:(data)=>{
rerutn postAxios('/employee/add',data)
}
//更新員工
updateEmployee:(data)=>{
rerutn postAxios('/employee/update',data)
}
//刪除員工
deleteEmployee:(employeeId)=>{
rerutn postAxios('/employee/delete/'+employeeId)
}
2. assets目錄assels 為靜態(tài)資源，里面存放 images,styles,icons等靜態(tài)資源，靜態(tài)資源命名格式為 kebab-case
|-- assets |-- images | |-- background-color.png | |-- upload-header.png |-- styles
3.components目錄此目錄應按照組件進行目錄劃分，目錄命名為KebabCase，組件命名規(guī)則也為KebabCase
|-- error-log | |--index.vue | |-- index.less |-- markdow-editor | |--index.vue | |--index.js |-- kebab-case
4.constants 目錄此目錄存放項目所有常量，如果常量在vue 中使用，請使用vue-enum 插件(https://gitee.com/lab1024/vue-enum)
vue-enum目錄結構:
|-- index.js |-- role.js |-- employee.js
例子：index.js
export let enumInfo = {
SOURCE_IN_TYPE: {
PURCHASE_IN: {
value: 1,
desc: '采購入庫'
},
REFUND_IN: {
value: 2,
desc: '退貨入庫'
},
CHECK_IN: {
value: 3,
desc: '盤點入庫'
},
CONFIRM_IN: {
value: 4,
desc: '取消訂單入庫'
}
}
}
5.router與store 目錄
這兩個目錄一定要將業(yè)務進行拆分，不能放到一個文件里。
router 盡量按照 views 中的結構保持一致
srore 按照業(yè)務進行拆分不同的正文件
6.views 目錄
- 命名要與后端、router、api等保持一致
- components 中組件要使用 Pascalcase 規(guī)則
|-- views 視圖目錄 | |-- role role模塊名 | |-- role-list.vue role列表頁面 | |-- role-add. vue role新建頁面 | |-- role-update.vue role更新頁面 | |-- index.less role模塊樣式 | |-- components role模塊通用組件文件夾 | | |-- role-header.vue role頭部組件 | | |-- role-modal.vue role彈出窗組件 | |-- employee employee模塊 | |-- behavior-log 行為日志log模塊 | |-- code-generator 代碼生成器模塊
2.4、注釋說明
整理必須加注釋的地方
- 公共組件使用說明
- api 目錄的接口js 文件必須加注釋
- store 中的 state,mutation, action等必須加注釋
- vue 文件中的template 必須加注釋，若文件較大添加 slart end 注釋
- vue 文件的 methods，每個method 必須添加注釋
- vue 文件的 data,非常見單詞要加注釋
2.5、其他
- 盡量不要手動操作 DOM
因使用 vue 框架，所以在項目開發(fā)中盡量使用 vue 的數(shù)據(jù)驅(qū)動更新 DOM，盡量(不到萬不得已)不要手動操作DOM，包括:增刪改 dom 元素、以及更改樣式、添加事件等 - 刪除無用代碼
因使用了 git/svn 等代碼版本工具，對于無用代碼必須及時刪除，例如:一些調(diào)試的console 語句、無用的棄用功能代碼.
總結
到此這篇關于前端開發(fā)必備小技巧之前端代碼規(guī)范Vue篇的文章就介紹到這了,更多相關前端代碼規(guī)范Vue篇內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
純javascript實現(xiàn)選擇框的全選與反選功能
這篇文章主要介紹了純javascript實現(xiàn)選擇框的全選與反選 ,需要的朋友可以參考下2019-04-04
Promise是一個構造函數(shù),我們就可以new Promise()得到一個 Promise的實例,下面這篇文章主要給大家介紹了關于promise和async用法以及區(qū)別的相關資料,需要的朋友可以參考下2023-01-01
javascript事件函數(shù)中獲得事件源的兩種不錯方法
許多情況我們需要獲得事件源對象來對其屬性進行更改,在事件響應函數(shù)中獲得事件源的方法有如下兩種2014-03-03
很多人可能遇到這樣的問題，JS調(diào)試，而且都很郁悶，雖然我的JS學的不是那么透徹，基本上算是初級入門.2010-04-04
javascript模擬鍵盤輸入密碼2008-06-06
JS中的算法與數(shù)據(jù)結構之二叉查找樹（Binary Sort Tree）實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結構之二叉查找樹（Binary Sort Tree）,結合實例形式詳細分析了二叉查找樹（Binary Sort Tree）的原理、定義、遍歷、查找、插入、刪除等常見操作技巧,需要的朋友可以參考下2019-08-08
Bootstrap Table從零開始，這篇文章主要介紹了Bootstrap Table的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了JavaScript作用域、作用域鏈和閉包的用法，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2020-09-09
這篇文章主要幫助大家輕松掌握JavaScript裝飾者模式，告訴大家什么是js裝飾者模式，感興趣的小伙伴們可以參考一下2016-08-08
下面小編就為大家?guī)硪黄狫S正則替換掉小括號及內(nèi)容的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11