HTML規範
1、語義化标簽
- 清單使用 ul li
- 文字使用 p span em cite 等标簽
- 标題使用 h1 h2 等标簽
- 布局使用 section aside header footer article 等 HTML5 布局标簽
2、自定義标簽
使用自閉合标簽的寫法 小寫加下劃線
<template>
<my-owner-components />
</template>
3、多特性分行寫
為提高可讀性 元件應用時換行 按照 ref、class、傳入、傳出 順序書寫
<template>
<my-components
ref="myComponents"
class="home-my-components"
:data="data"
@changeHandle="changeHandle"
/>
</template>
4、行内使用表達式
在模版中 簡單情況使用表達式 複雜情況使用計算屬性或函數
<template>
<!-- 簡單情況 -->
<div v-show="data.type === 1">
...
</div>
<!-- 複雜情況 -->
<div v-show="getTypeShow(data)">
...
</div>
</template>
<script>
export default {
methods: {
/**
* ***顯示判斷
* @param data **
*/
getTypeShow(data) {
return data.type === 1 && ...
}
}
}
</script>
5、避免重複
避免過多重複代碼 果超過三行類似的代碼 配置資料再循環周遊
6、代碼嵌套
根據元素嵌套規範 每個塊狀元素獨立一行 内聯元素可選
<template>
<!-- 情況1 -->
<div>
<h1></h1>
<p></p>
<p><span></span><span></span></p>
</div>
<!-- 情況2 -->
<div>
<h1></h1>
<p></p>
<p>
<span></span>
<span></span>
</p>
</div>
</template>
7、活用 v-if v-show
v-show 不會改變dom樹 不會導緻重新渲染 用于頻繁的切換顯示隐藏
v-if 會改變dom樹 會導緻重新渲染 用于隻控制一次顯示隐藏
8、注釋規範
<template>
<!-- 标簽注釋 -->
<div>
...
</div>
<!-- 元件注釋 -->
<my-owner-components />
</template>
CSS規範
1、避免使用
- 避免使用标簽選擇器 因為在 Vue 中 特别是在局部元件 使用标簽選擇器效率特别低 損耗性能 建議需要的情況直接定義 class
- 非特殊情況下 禁止使用 ID 選擇器定義樣式(有 JS 邏輯的情況除外)
- 避免使用important選擇器
- 避免大量的嵌套規則 控制在3級之内 對于超過4級的嵌套 考慮重寫或建立子項
- 避免使用ID選擇器及全局标簽選擇器防止污染全局樣式
2、推薦使用
- 提取公用樣式進assets檔案styles裡 按子產品/功能區分
- 使用 scoped 關鍵字 限制樣式生效的範圍
- 可複用屬性盡量抽離為頁面變量 易于統一維護
- 使用混合(mixin)根據功能定義子產品 然後在需要使用的地方通過 @include 調用 避免編碼時重複輸入代碼段
3、書寫順序
CSS 屬性書寫順序 先決定定位寬高顯示大小 再做局部細節修飾
定位屬性(或顯示屬性 display) => 寬高屬性 => 邊距屬性(margin padding) => 背景 顔色 字型等修飾屬性的定義 這樣定義為了更好的可讀性 讓别人隻要看一眼就能在腦海中浮現最終顯示的效果
.class-name {
position: fixed;
top: 100px;
left: 0;
right: 0;
bottom: 0;
display: block;
width: 100%;
height: 100%;
margin: 10px;
padding: 10px;
background-color: red;
border-radius: 2px;
font-size: 14px;
color: #000;
line-height: 1.42;
}
4、樣式覆寫
元件内部需要覆寫UI架構樣式 必須在最外層元件加類名
<template>
<div class="input-container">
<el-input class="name-input"></el-input>
</div>
</template>
<style lang="scss">
.input-container {
.name-input {
.el-input__inner {
font-size: 16px;
}
}
}
</style>
5、注釋規範
以 / 注釋内容 / 格式注釋 前後空格 嵌套子類需要一個回車分割開
/* 注釋内容 */
.class-name {
width: 20px;
/* 這裡需要換行 */
.class-name-l {
color: blue
}
}
JS規範
1、用法規範
- 在vue-cli 腳手架使用架自帶的指向 src 開發目錄的 '@' 符号引入檔案資源
- 使用 template 或計算屬性規避 v-if 和 v-for 用在一起
- 統一使用單引号
- 堅持單一原則 函數内僅做該函數應該做的 盡量避免通過傳入标記控制不同行為
- 優先考慮三目運算符 但不要寫超過3層的三目運算符
- 對于無用代碼必須及時删除 例如:一些調試的 console 語句、無用的棄用功能代碼
- 請求資料的方法使用try catch 錯誤捕捉 注意執行回調
2、元件順序規範
<script>
export default {
name: 'ExampleName', // 這個名字推薦:大寫字母開頭駝峰法命名
props: {}, // Props 定義
components: {}, // 元件定義
directives: {}, // 指令定義
mixins: [], // 混入 Mixin 定義。
data () { // Data 定義。
return {
dataProps: '' // Data 屬性的每一個變量都需要在後面寫注釋說明用途,就像這樣
}
},
computed: {}, // 計算屬性定義。
watch: {}, // 屬性變化監聽器。
created () {}, // 生命鈎子函數,按照他們調用的順序。
mounted () {}, // 挂載到元素。
activated () {}, // 使用 keep-alive 包裹的元件激活觸發的鈎子函數。
deactivated () {}, // 使用 keep-alive 包裹的元件離開時觸發的鈎子函數
methods: { // 元件方法定義。
publicbFunction () {} // 公共方法的定義,可以提供外面使用
_privateFunction () {} // 私有方法,下劃線定義,僅供元件内使用。多單詞,注意與系統名字沖突!
}
}
</script>
3、注釋規範
函數/方法注釋必須包含函數說明,有參數和傳回值時必須使用注釋辨別,它的作者, 依賴關系和相容性資訊。
- 單行注釋:雙斜線後應跟空格,且縮進與上下文的代碼保持一緻;或在行尾注釋,在行尾依然需要左右空格
// 注釋
const userID = 24
const userID = 12 // 注釋
- 多行注釋:一般用于注釋難以了解的、可能存在錯誤的、邏輯強的代碼,且縮進一緻
/*
* 針對下方代碼的說明
* 第一行太長寫第二行
*/
const aa = 1
- 函數注釋:寫明傳入參數名稱、類型推薦完整注釋以下格式
/**
* @Description 加入購物車
* @Author luochen_ya
* @Date 2024-03-13
* @param {Number} goodId 商品id
* @param {Array<Number>} specs sku規格
* @param {Number} amount 數量
* @param {String} remarks 備注
* @returns <Promise> 購物車資訊
*/
apiProductAddCard = (goodId, specs, amount, remarks) => {
return axios.post('***', { goodId, specs, amount, remarks })
}
- 檔案注釋:寫明檔案描述
/**
* @Description: 檔案描述
* @Author: luochen_ya
* @Date: 2024-03-13
*/
命名規範
1、目錄命名
按照小駝峰命名 首字母小寫
- 項目檔案夾:projectName
- 樣式檔案夾:css / scss
- 腳本檔案夾:js
2、圖檔命名
圖檔就是img開頭 圖示就是icon開頭
- img_功能_子產品_編号
- icon_功能_子產品_編号
3、檔案命名
- 按照小駝峰指令 英文單詞過長或超出2個以上 可縮略至前四位 列如:comming_soon.png 等
- 有複數含義 采用複數命名 列如:minixs styles images icons 等
- 靜态資源命名格式為小寫 + 下劃線 列如:icon_arrow.png img_logo.png 等
- 元件命名為小駝峰 公用元件加上gd字首 列如:gdOwnerComponents 等
4、方法命名
method 方法命名不同于檔案命名,盡量完整英文命名,語義表達需完整清楚
- 按照小駝峰命名法 可使用常見動詞約定
- can: 判斷是否可執行某個動作 函數傳回一個布爾值 true可執行 false不可執行
- has: 判斷是否含有某個值 函數傳回一個布爾值 true含有此值 false不含有此值
- is: 判斷是否為某個值,函數傳回一個布爾值 true為某個值 false不為某個值
- get: 擷取某個值 函數傳回一個非布爾值
- set: 設定某個值 無傳回值或者傳回是否加載完成的結果
- 語義化英文命名 僅元件内部使用方法前加上_(下劃線)區分
<script>
export default {
methods: { // 元件方法定義
publicbFunction () {} // 公共方法的定義 可以提供外面使用
_privateFunction () {} // 私有方法 下劃線定義 僅供元件内使用
}
}
</script>
- 引入元件:首字母大寫的駝峰法命名
import MyOwnerComponents from '@/components/MyOwnerComponents'
- 變量:使用駝峰式命名 優先使用 let const 避免使用 var
let userName = 'luochen_ya'
const userInfo = {
name: 'luochen_ya',
age: 24
}
- 常量:字母全部大寫 以下橫線 _ 劃分
const Constant = {
// 公用狀态
COMMON_STATUS_ENABLE = 1, // 啟用
COMMON_STATUS_DISABLE = 2, // 停用
}
5、樣式命名
class命名以小寫字母開頭 小寫字母、中劃線和數字組成 以下是一些常用到的 class的名字
- 包裹層: .xxx-wrap
- 清單: .xxx-list
- 清單項: .xxx-list-item
- 左邊内容: .xxx-left
- 中間内容: .xxx-middle
- 右邊内容: .xxx-right
- 某個頁面:.xxx-page
6、常用詞
- 常用動詞
- get => 取值
- set => 給值
- add => 新增
- remove => 移除
- show => 顯示
- hide => 隐藏
- view => 檢視
- browse => 浏覽
- edit => 修改
- save => 儲存
- delete => 删除
- find => 查詢
- undo => 撤銷
- redo => 重做
- clean => 清除
- index => 索引
- observe => 觀察
- send => 發送
- receive => 接收
- refresh => 重新整理
- synchronize => 同步
- 常用縮寫
- object => obj
- array => arr
- function => fn
- message => msg
- button => btn
工程結構
1、目錄建構
├── api 所有api接口
├── assets 靜態資源
│ ├── fonts 全局公用字型
│ ├── icons 全局公用圖示
│ ├── images 全局公用圖檔
│ └── styles 全局公用樣式
├── components 公用組件
│ ├── base 基礎元件
│ └── business 業務元件
├── constants 常量 統一管理
├── locales 多語言管理
├── plugins 插件 統一管理
├── router 路由 統一管理
│ └── index.js
├── store vuex 統一管理
│ ├── modules
│ ├── getters.js
│ └── index.js
├── utils 工具函數 統一管理
├── views 視圖目錄(所有業務邏輯的頁面)
2、代碼風格
可以直接使用eslint 強制統一代碼規範 還能規避一些文法錯誤 或者按照以下自己定義的去配置eslint來使用
以下是個人習慣 僅供參考
- 首行縮進2空格
- js代碼去除分号
- html代碼超出255字元一行進行換行操作
- js代碼統一使用單引号或雙引号
作者:luochen_ya
連結:https://juejin.cn/post/7345666534997901366