前端小團(tuán)隊建設(shè)

一、命名規(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í)行一次钱床,分享工作荚斯,生活各方面都可以埠居。

擴展閱讀

新鮮出爐的8月前端面試題

前端工程師面試題匯總

Java后端程序員1年工作經(jīng)驗總結(jié)

來源:https://segmentfault.com/a/1190000016445088

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末查牌,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子滥壕,更是在濱河造成了極大的恐慌纸颜,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件绎橘,死亡現(xiàn)場離奇詭異胁孙,居然都是意外死亡,警方通過查閱死者的電腦和手機称鳞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進(jìn)店門涮较,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人冈止,你說我怎么就攤上這事狂票。” “怎么了熙暴?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵闺属,是天一觀的道長。 經(jīng)常有香客問我周霉,道長掂器,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任俱箱,我火速辦了婚禮国瓮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘狞谱。我一直安慰自己乃摹,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布芋簿。 她就那樣靜靜地躺著峡懈,像睡著了一般。 火紅的嫁衣襯著肌膚如雪与斤。 梳的紋絲不亂的頭發(fā)上肪康,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天荚恶,我揣著相機與錄音,去河邊找鬼磷支。 笑死谒撼,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的雾狈。 我是一名探鬼主播廓潜,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼善榛!你這毒婦竟也來了辩蛋?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤移盆,失蹤者是張志新(化名)和其女友劉穎悼院,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體咒循,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡据途,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了叙甸。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片颖医。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖裆蒸,靈堂內(nèi)的尸體忽然破棺而出熔萧,到底是詐尸還是另有隱情,我是刑警寧澤光戈,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布哪痰,位于F島的核電站,受9級特大地震影響久妆,放射性物質(zhì)發(fā)生泄漏晌杰。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一筷弦、第九天 我趴在偏房一處隱蔽的房頂上張望肋演。 院中可真熱鬧,春花似錦烂琴、人聲如沸爹殊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽梗夸。三九已至,卻和暖如春号醉,著一層夾襖步出監(jiān)牢的瞬間反症,已是汗流浹背辛块。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留铅碍,地道東北人润绵。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像胞谈,于是被迫代替她去往敵國和親尘盼。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,685評論 2 360

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理烦绳,服務(wù)發(fā)現(xiàn)卿捎,斷路器,智...
    卡卡羅2017閱讀 134,707評論 18 139
  • pyspark.sql模塊 模塊上下文 Spark SQL和DataFrames的重要類: pyspark.sql...
    mpro閱讀 9,464評論 0 13
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,113評論 1 32
  • 這是我第一次在這種app上寫下所有我認(rèn)為的有趣故事爵嗅,我了解這個app完全是個偶然娇澎,只是在我心情普通笨蚁、隨手刷著網(wǎng)頁...
    路辛夷閱讀 163評論 0 0
  • #春滿中國 最西安#3月23日睹晒,由西安市雁塔區(qū)委、區(qū)人民政府括细、西安市旅游發(fā)展委員會伪很、西安市文物局主辦的“花見雁塔·...
    西安雄師哥閱讀 514評論 0 0