?2016-2026 Matools All rights reserved,
粵ICP備17059708號(hào)
一、命名規(guī)則（英文-直譯）
1、文件命名
文件夾/文件的命名統(tǒng)一用小寫
保證項(xiàng)目有良好的可移植性，可跨平臺(tái)?
相關(guān)參考（http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html）
2、文件引用路徑
因?yàn)槲募y(tǒng)一小寫，引用也需要注意大小寫問題
3、js變量
3.1 變量
命名方式：小駝峰
命名規(guī)范：前綴名詞
命名建議：語(yǔ)義化
案例
//?友好
let?maxCount?=?10;?
let?tableTitle?=?'LoginTable';
//?不友好
let?setCount?=?10;
let?getTitle?=?'LoginTable';
3.2 常量
命名方式：全部大寫
命名規(guī)范：使用大寫字母和下劃線來組合命名，下劃線用以分割單詞
命名建議：語(yǔ)義化
案例
const?MAX_COUNT?=?10;
const?URL?=?'http://www.foreverz.com';
3.3 函數(shù)
命名方式：小駝峰式命名法。
命名規(guī)范：前綴應(yīng)當(dāng)為動(dòng)詞。
命名建議：語(yǔ)義化
可以參考如下的動(dòng)作
//?是否可閱讀
function?canRead():?boolean?{
??return?true;
}
//?獲取名稱
function?getName():?string?{
??return?this.name;
}
3.4 類、構(gòu)造函數(shù)
命名方式：大駝峰式命名法，首字母大寫
命名規(guī)范：前綴為名稱。
命名建議：語(yǔ)義化
案例
class?Person?{
??public?name:?string;
??constructor(name)?{
????this.name?=?name;
??}
}
const?person?=?new?Person('mevyn');
公共屬性和方法：跟變量和函數(shù)的命名一樣。
私有屬性和方法：前綴為_(下劃線)，后面跟公共屬性和方法一樣的命名方式。
案例
class?Person?{
??private?_name:?string;
??constructor()?{?}
??//?公共方法
??getName()?{
????return?this._name;
??}
??//?公共方法
??setName(name)?{
????this._name?=?name;
??}
}
const?person?=?new?Person();
person.setName('mervyn');
person.getName();?//?->mervyn
3.5 css（class、id）命名規(guī)則BEM
我們還是使用大團(tuán)隊(duì)比較常用的BEM模式
（1）class命名使用BEM其實(shí)是塊（block）、元素（element）、修飾符（modifier）的縮寫，利用不同的區(qū)塊，功能以及樣式來給元素命名。這三個(gè)部分使用__與--連接（這里用兩個(gè)而不是一個(gè)是為了留下用于塊兒的命名）。
命名約定的模式如下：
.block{}
.block__element{}
.block--modifier{}
block?代表了更高級(jí)別的抽象或組件
block__element?代表?block?的后代，用于形成一個(gè)完整的?block?的整體
block--modifier代表?block?的不同狀態(tài)或不同版本
（2）id一般參與樣式，命名的話使用駝峰，如果是給js調(diào)用鉤子就需要設(shè)置為js_xxxx的方式
二、注釋
1.單行注釋
//?這個(gè)函數(shù)的執(zhí)行條件，執(zhí)行結(jié)果大概說明
dosomthing()
2.多行注釋
/*
*?xxxx??描述較多的時(shí)候可以使用多行注釋
*?xxxx
*/
dosomthing();
3.函數(shù)(方法)注釋 參考jsdoc
三、組件
每個(gè) Vue 組件的代碼建議不要超出 200 行，如果超出建議拆分組件
組件一般情況下是可以拆成基礎(chǔ)/ui部分和業(yè)務(wù)部分，基礎(chǔ)組件一般是承載呈現(xiàn)，基礎(chǔ)功能，不和業(yè)務(wù)耦合部分。
業(yè)務(wù)組件一般包含業(yè)務(wù)功能業(yè)務(wù)特殊數(shù)據(jù)等等
1 UI組件/基礎(chǔ)組件
開發(fā)的時(shí)候注意可拓展性，支持?jǐn)?shù)據(jù)傳參進(jìn)行渲染，支持插槽slot
設(shè)置有mixin，mixin中放了基礎(chǔ)信息和方法
2 容器組件
和當(dāng)前業(yè)務(wù)耦合性比較高，由多個(gè)基礎(chǔ)組件組成，可承載當(dāng)前頁(yè)的業(yè)務(wù)接口請(qǐng)求和數(shù)據(jù)(vuex)
3 組件存放位置
（1）ui組件存放在src/components/ 中
包含xxx.vue和 xxmixin.js 和 readme.md
xxx.vue 表示ui部分
xxmixin.js 表示js部分
readme.md 中描述組件的基本信息
如下圖
引用組件的時(shí)候 直接引入 mixinElementFilter.js 即可。在引用組件的頁(yè)面可以對(duì)mixin里面的方法進(jìn)行重構(gòu)
（2）業(yè)務(wù)組件就放在業(yè)務(wù)模塊部分即可
4 組件通訊
避免數(shù)據(jù)的分發(fā)源混亂，不建議使用eventBus控制數(shù)據(jù)，應(yīng)使用props來和$emit來數(shù)據(jù)分發(fā)和傳送
同級(jí)組件的通訊一般會(huì)有一個(gè)中間容器組件作為橋梁
容器組件作為數(shù)據(jù)的接受和分發(fā)點(diǎn)
5 組件的掛在和銷毀
（1）通過v-if控制組件的掛在和銷毀
<testcomponent?v-if='componentActive'>?</testcomponent>
（2）通過is控制組件的掛在和銷毀
<component?is='componentName'>?</component>
6 跨項(xiàng)目組件共用
公共組件存放位置中 定時(shí)抽取共用次數(shù)多的組件 將他放在npm.kuaizi.co中，供下載引用
四、codeReview
1 規(guī)則
所有影響到以往流程的功能需求更改發(fā)版前都需要codeReview
2 執(zhí)行者
初級(jí)程序員可由中級(jí)程序員的執(zhí)行codeReview
中級(jí)程序員可由高級(jí)程序員執(zhí)行codeReview
以此類推
3 反饋
每次codereView都需要有反饋，要對(duì)本次codeReview負(fù)責(zé)
反饋內(nèi)容基本如
功能：本次主要是修改了什么功能或者bug
模塊：本次發(fā)版影響的模塊
代碼問題：codereview過程中發(fā)現(xiàn)的代碼問題，比如代碼性能，寫法，代碼風(fēng)格等等
業(yè)務(wù)問題：比如發(fā)現(xiàn)了某某影響到其他模塊的邏輯問題，如果沒有發(fā)現(xiàn)就寫。無(wú)?
五、git規(guī)范
1 分支
命名
master: master 分支就叫master 分支，線上環(huán)境正在使用的，每一次更新master都需要打tag
test: test分支就供測(cè)試環(huán)境使用的分支
develop: develop 分支就叫develop 分支
feature: feature 分支 咱們暫時(shí)可以按 feature/name/version
這種命名規(guī)范來，后面有更好的命名規(guī)范咱們?cè)俑?。version 表示
當(dāng)前迭代的版本號(hào)，name 表示當(dāng)前迭代的名稱
hotfix: hotfix 分支的命名我們暫時(shí)可以按 hotfix/name/version
這種來進(jìn)行命名,verison表示這次修復(fù)的版本的版本號(hào)，name表示本次熱修復(fù)的內(nèi)容標(biāo)題
斜杠 的方式 在source-tree中有歸類的作用
2 提交模版 kz-commit
在完善中，會(huì)繼承自動(dòng)檢測(cè)代碼，可選輸入發(fā)版提交版本基本信息等等
六、分享會(huì)
每?jī)芍苤辽賵?zhí)行一次，分享工作，生活各方面都可以
原文發(fā)布時(shí)間為：2018-09-27
本文作者：spademan
本文來自云棲社區(qū)合作伙伴“前端大學(xué)
<https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzIzNTU2ODM4Mw%3D%3D%26amp%3Bmid%3D2247487209%26amp%3Bidx%3D1%26amp%3Bsn%3D7969eb3687f77c65bb865009a580577f%26amp%3Bchksm%3De8e46379df93ea6f3d6593b0e3e690c449743c19092f467cb4f64f56d1f7507de6e6054447ee%26amp%3Bscene%3D0%23rd>
”，了解相關(guān)信息可以關(guān)注“前端大學(xué)
<https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzIzNTU2ODM4Mw%3D%3D%26amp%3Bmid%3D2247487209%26amp%3Bidx%3D1%26amp%3Bsn%3D7969eb3687f77c65bb865009a580577f%26amp%3Bchksm%3De8e46379df93ea6f3d6593b0e3e690c449743c19092f467cb4f64f56d1f7507de6e6054447ee%26amp%3Bscene%3D0%23rd>
”
熱門工具 換一換