一、命名規(guī)則(英文-直譯)
1喳钟、文件命名
文件夾/文件的命名統(tǒng)一用小寫爪模。
保證項目有良好的可移植性,可跨平臺荚藻。相關(guān)參考:《為什么文件名要小寫屋灌?》。
2应狱、文件引用路徑
因為文件命名統(tǒng)一小寫共郭,引用也需要注意大小寫問題。
3疾呻、js變量
3.1 變量
命名方式:小駝峰
命名規(guī)范:前綴名詞
命名建議:語義化
案例:
// 友好
let maxCount = 10;
let tableTitle = 'LoginTable';
// 不友好
let setCount = 10;
let getTitle = 'LoginTable';
3.2 常量
命名方式:全部大寫
命名規(guī)范:使用大寫字母和下劃線來組合命名除嘹,下劃線用以分割單詞
命名建議:語義化
案例:
const MAX_COUNT = 10;
const URL = 'http://www.foreverz.com';
3.3 函數(shù)
命名方式:小駝峰式命名法。
命名規(guī)范:前綴應(yīng)當(dāng)為動詞岸蜗。
命名建議:語義化
可以參考如下的動作:
動詞含義返回值
can判斷是否可執(zhí)行某個動作(權(quán)限)函數(shù)返回一個布爾值尉咕。true:可執(zhí)行;false:不可執(zhí)行
has判斷是否含有某個值函數(shù)返回一個布爾值璃岳。true:含有此值年缎;false:不含有此值
is判斷是否為某個值函數(shù)返回一個布爾值。true:為某個值铃慷;false:不為某個值
get獲取某個值函數(shù)返回一個非布爾值
set設(shè)置某個值無返回值单芜、返回是否設(shè)置成功或者返回鏈?zhǔn)綄ο?/p>
load加載某些數(shù)據(jù)無返回值或者返回是否加載完成的結(jié)果
案例:
// 是否可閱讀
function canRead(): boolean {
?return true;
}
// 獲取名稱
function getName(): string {
?return this.name;
}
3.4 類、構(gòu)造函數(shù)
命名方式:大駝峰式命名法犁柜,首字母大寫
命名規(guī)范:前綴為名稱洲鸠。
命名建議:語義化
案例:
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)隊比較常用的BEM模式萤悴。
(1)class命名使用BEM其實是塊(block)瘾腰、元素(element)、修飾符(modifier)的縮寫稚疹,利用不同的區(qū)塊居灯,功能以及樣式來給元素命名祭务。這三個部分使用__與--連接(這里用兩個而不是一個是為了留下用于塊兒的命名)内狗。
命名約定的模式如下:
? ?.block{}
? ?.block__element{}
? ?.block--modifier{}
block 代表了更高級別的抽象或組件怪嫌。
block__element 代表 block 的后代,用于形成一個完整的 block 的整體
block--modifier代表 block 的不同狀態(tài)或不同版本
(2)id一般參與樣式柳沙,命名的話使用駝峰岩灭,如果是給js調(diào)用鉤子就需要設(shè)置為js_xxxx的方式。
二赂鲤、注釋
1噪径、單行注釋
// 這個函數(shù)的執(zhí)行條件,執(zhí)行結(jié)果大概說明
dosomthing()
2数初、多行注釋
/*
* xxxx ?描述較多的時候可以使用多行注釋
* xxxx
*/
dosomthing();
3找爱、函數(shù)(方法)注釋
注釋名語法含義示例
@param@param 參數(shù)名 {參數(shù)類型} 描述信息描述參數(shù)的信息@param name {String} 傳入名稱
@return @return {返回類型} 描述信息描述返回值的信息@return {Boolean}true:可執(zhí)行;false:不可執(zhí)行
@author@author 作者信息 [附屬信息:如郵箱、日期]描述此函數(shù)作者的信息@author 張三 2015/07/21
@version@version XX.XX.XX描述此函數(shù)的版本號@version 1.0.3
@example@example 示例代碼演示函數(shù)的使用@example setTitle(‘測試’)
三泡孩、組件
每個 Vue 組件的代碼建議不要超出 200 行车摄,如果超出建議拆分組件。
組件一般情況下是可以拆成基礎(chǔ)/ui部分和業(yè)務(wù)部分仑鸥,基礎(chǔ)組件一般是承載呈現(xiàn)吮播,基礎(chǔ)功能,不和業(yè)務(wù)耦合部分眼俊。
業(yè)務(wù)組件一般包含業(yè)務(wù)功能業(yè)務(wù)特殊數(shù)據(jù)等等意狠。
1、UI組件/基礎(chǔ)組件
開發(fā)的時候注意可拓展性疮胖,支持?jǐn)?shù)據(jù)傳參進(jìn)行渲染环戈,支持插槽slot。
設(shè)置有mixin澎灸,mixin中放了基礎(chǔ)信息和方法谷市。
2、容器組件
和當(dāng)前業(yè)務(wù)耦合性比較高击孩,由多個基礎(chǔ)組件組成迫悠,可承載當(dāng)前頁的業(yè)務(wù)接口請求和數(shù)據(jù)(vuex)。
3巩梢、組件存放位置
(1)ui組件存放在src/components/中创泄,包含xxx.vue和xxmixin.js和readme.md。
? ?xxx.vue 表示ui部分
? ?xxmixin.js 表示js部分
? ?readme.md 中描述組件的基本信息
名詞含義案例
@name組件名稱篩選下拉框
@version版本v1.0.0
@updateTime更新日期2018.09.18
@describe使用場景描述某某場景下
@props參數(shù)['data']
@author作者dd
如下圖括蝠,引用組件的時候 直接引入mixinElementFilter.js即可鞠抑。在引用組件的頁面可以對mixin里面的方法進(jìn)行重構(gòu):
(2)業(yè)務(wù)組件就放在業(yè)務(wù)模塊部分即可。
4忌警、組件通訊
避免數(shù)據(jù)的分發(fā)源混亂搁拙,不建議使用eventBus控制數(shù)據(jù)秒梳,應(yīng)使用props來和$emit來數(shù)據(jù)分發(fā)和傳送。
同級組件的通訊一般會有一個中間容器組件作為橋梁箕速。
容器組件作為數(shù)據(jù)的接受和分發(fā)點酪碘。
5、組件的掛在和銷毀
(1)通過v-if控制組件的掛在和銷毀
<testcomponent v-if='componentActive'> </testcomponent>
(2)通過is控制組件的掛在和銷毀
<component is='componentName'> </component>
6盐茎、跨項目組件共用
公共組件存放位置中 定時抽取共用次數(shù)多的組件 將他放在npm.kuaizi.co中兴垦,供下載引用。
四字柠、codeReview
1探越、規(guī)則
所有影響到以往流程的功能需求更改發(fā)版前都需要 codeReview。
2窑业、執(zhí)行者
初級程序員可由中級程序員的執(zhí)行 codeReview钦幔。
中級程序員可由高級程序員執(zhí)行 codeReview。
以此類推常柄。
3鲤氢、反饋
每次codereView都需要有反饋,要對本次codeReview負(fù)責(zé)拐纱。
反饋內(nèi)容基本如:
功能:本次主要是修改了什么功能或者bug铜异。模塊:本次發(fā)版影響的模塊。代碼問題:codereview過程中發(fā)現(xiàn)的代碼問題秸架,比如代碼性能揍庄,寫法,代碼風(fēng)格等等东抹。業(yè)務(wù)問題:比如發(fā)現(xiàn)了某某影響到其他模塊的邏輯問題蚂子,如果沒有發(fā)現(xiàn)就寫無。
五缭黔、git規(guī)范
1食茎、分支
命名:
master: master 分支就叫master 分支,線上環(huán)境正在使用的馏谨,每一次更新master都需要打tag别渔。
test: test分支就供測試環(huán)境使用的分支。
develop: develop 分支就叫develop 分支惧互。
feature: feature 分支 咱們暫時可以按 feature/name/version 這種命名規(guī)范來哎媚,后面有更好的命名規(guī)范咱們再改。version 表示當(dāng)前迭代的版本號喊儡,name 表示當(dāng)前迭代的名稱拨与。
hotfix: hotfix 分支的命名我們暫時可以按 hotfix/name/version 這種來進(jìn)行命名,verison表示這次修復(fù)的版本的版本號,name表示本次熱修復(fù)的內(nèi)容標(biāo)題艾猜。
斜杠的方式在source-tree中有歸類的作用买喧。
2捻悯、提交模版 kz-commit
在完善中,會繼承自動檢測代碼淤毛,可選輸入發(fā)版提交版本基本信息等等今缚。
六、分享會
每兩周至少執(zhí)行一次钱床,分享工作荚斯,生活各方面都可以埠居。
擴展閱讀
來源:https://segmentfault.com/a/1190000016445088