前端編碼規(guī)范

YJNldm 發(fā)布于2019-08-23 13:53 / 2947人閱讀

摘要：去掉無用的代碼使用主動(dòng)語態(tài)避免一連串松散結(jié)構(gòu)的代碼邏輯把相關(guān)的變量函數(shù)放在一起。該處代碼運(yùn)行正常，但可能由于時(shí)間趕或者其他原因，需要修正。此時(shí)需要對思路或詭異手段進(jìn)行描述。

命名規(guī)范

變量名, 函數(shù)名小駝峰【命名法 camel Case】: numberOfPeople 第一個(gè)單詞的首字母小寫；第二個(gè)單詞開始每個(gè)單詞的的首字母大寫

組件名大駝峰【命名法 Camel Case】: NumberOfPeople 每一個(gè)單詞的首字母都大寫

css樣式名中橫線【命名法 kabab case】: number-of-people 單詞小寫用（-）中橫線分隔

常量名, graphql query 與 mutation變量名：蛇底式大寫【命名法 upper snake case】: NUMBER_OF_PEOPLE 復(fù)合詞或短語中的各個(gè)單詞之間：下劃線（_）分隔并且沒有空格

禁用小寫加下劃線：number_of_people

命名方式	應(yīng)用范圍	備注
camel Case	變量名, 函數(shù)名
Camel Case	組件名, 枚舉名	枚舉: SaveType = { BUILD: "BUILD" }
kabab case	css樣式名
upper snake case	常量名, graphql query與 mutation變量名
snake case	禁止使用

應(yīng)用范圍

結(jié)構(gòu)	應(yīng)用范圍	備注
動(dòng)+賓 (+ 副詞)	函數(shù)名, graphql mutation名稱
名詞(定語+名詞)	組件名, 類名
形容詞 (名詞+形容詞) 動(dòng)詞被動(dòng)形態(tài) (be+xxx)	狀態(tài)變量	控制對話框是否顯示: dialogVisible 盡可能不要用 is+形容詞結(jié)構(gòu), 如 isSelected, 用 selected 就可以了. is+名詞結(jié)構(gòu)可以使用, 如 isEnterprise

名詞

__camel Case__: numberOfPeople
__Camel Case__: NumberOfPeople
__kabab case__: number-of-people
__snake case__: number_of_people
__upper snake case__: NUMBER_OF_PEOPLE

Merge Request Checklist

檢查是否和目標(biāo)分支有沖突

檢查是否修復(fù)所有 dn test 的問題

檢查目錄、文件名拼寫

檢查 graphql 文件名拼寫，Query 首字母大寫的 CamelCase，Mutation 首字母小寫的 camelCase

檢查 conf 中的命名是否符合規(guī)范

標(biāo)準(zhǔn)的項(xiàng)目研發(fā)流程包括以下幾個(gè)階段：

* 評審階段
    * 需求評審
    * 交互評審
    * 視覺評審
* 開發(fā)階段
    * 原型開發(fā)
    * 用戶交互事件響應(yīng)
    * 接入Mock數(shù)據(jù)
    * 后臺接口數(shù)據(jù)對接
* 聯(lián)調(diào)階段
    * 預(yù)發(fā)聯(lián)調(diào)
    * 整個(gè)業(yè)務(wù)串聯(lián)測試流程
* 測試階段
    * 埋點(diǎn)開發(fā)及驗(yàn)證
    * 自測用例覆蓋
    * 交付提測
    * bug修復(fù)
* 發(fā)布上線

寫作的基本準(zhǔn)則（優(yōu)化）

  基本上寫作的基本準(zhǔn)則的每一部分都能應(yīng)用在代碼上：
    ● 讓段落成為文章的基本結(jié)構(gòu)：每一段對應(yīng)一個(gè)主題。
    ● 去掉無用的單詞。 .
    ● 使用主動(dòng)語態(tài)。
    ● 避免一連串松散的句子。
    ● 將相關(guān)的詞語放在一起。
    ● 陳述句用主動(dòng)語態(tài)。
    ● 平行的概念用平行的結(jié)構(gòu)。
  這些對應(yīng)的 用在前端的代碼風(fēng)格上
    1. 讓函數(shù)成為代碼的基本單元。每個(gè)函數(shù)做一件事。
    2. 去掉無用的代碼
    3. 使用主動(dòng)語態(tài)
    4. 避免一連串松散結(jié)構(gòu)的代碼邏輯
    5. 把相關(guān)的變量、函數(shù)放在一起。
    6. 表達(dá)式和陳述語句中使用主動(dòng)語態(tài)。
    7. 用并行的代碼表達(dá)并行的概念。

Git分支

存在三種短期分支

        功能分支（feature branch）
        補(bǔ)丁分支（hotfix branch）
        預(yù)發(fā)分支（release branch）

Git Commit type

bug fix - 組件 bug 修復(fù)；
breaking change - 不兼容的改動(dòng)；
new feature - 新功能

提交 Commit 類型前綴主要如下：
feat: 新特性功能
fix: 缺陷修復(fù)bug
docs: 文檔相關(guān)
style: 樣式修改、錯(cuò)別字修改、代碼的格式化改動(dòng)，代碼邏輯并未產(chǎn)生任何變化
refactor: 重構(gòu)或其他方面的優(yōu)化
perf: 性能提升
test: 增加測試
chore: 業(yè)務(wù)無關(guān)修改，如：發(fā)版、構(gòu)建工具鏈修改等
scope 可選，作用域標(biāo)識，指明你需改的代碼所屬作用域
subject 真實(shí) Commit 描述，能說明白即可，字?jǐn)?shù)不用太多

Git日常操作

git diff 查看修改內(nèi)容

git bisect  二分查找法 定位問題

git clone git@github.com:UED/test.git 

git fetch origin    //取得遠(yuǎn)程更新，這里可以看做是準(zhǔn)備要取了

git merge origin/master  //把更新的內(nèi)容合并到本地分支/master  


git remote -v //查看當(dāng)前項(xiàng)目遠(yuǎn)程連接的是哪個(gè)倉庫地址。
  
git push -u origin master //    將本地的項(xiàng)目提交到遠(yuǎn)程倉庫中。

git push -u origin master -f // 強(qiáng)制提交

git commit --amend 修改上一次 commit

拋棄本地所有的修改，回到遠(yuǎn)程倉庫的狀態(tài)。
git fetch --all && git reset --hard origin/master

        git clone 地址  clone
        git branch 查看分支
        git branch daily/0.0.1 創(chuàng)建分支

        # 切換分支，格式為 daily/x.y.z
        git checkout daily/0.0.3
        # 提交代碼
        git pull
        git add *
        git commit -m "feat: 完成了某個(gè)新功能"

        # 將代碼push到gitlab daily環(huán)境
        git push origin daily/0.0.3

        # 打publish tag將代碼發(fā)布到CDN
        --tag 創(chuàng)建一個(gè)里程碑
        git tag publish/0.0.3
        git push origin publish/0.0.3

代碼中的注釋類型前綴

TODO: 有功能待實(shí)現(xiàn)。此時(shí)需要對將要實(shí)現(xiàn)的功能進(jìn)行簡單說明。
FIXME: 該處代碼運(yùn)行正常，但可能由于時(shí)間趕或者其他原因，需要修正。此時(shí)需要對如何修正進(jìn)行簡單說明。
HACK: 為修正某些問題而寫的不太好或者使用了某些詭異手段的代碼。此時(shí)需要對思路或詭異手段進(jìn)行描述。

    # 標(biāo)題行：50個(gè)字符以內(nèi)，描述主要變更內(nèi)容
    #
    # 主體內(nèi)容：更詳細(xì)的說明文本，建議72個(gè)字符以內(nèi)。 需要描述的信息包括:
    #
    # * 為什么這個(gè)變更是必須的? 它可能是用來修復(fù)一個(gè)bug，增加一個(gè)feature，提升性能、可靠性、穩(wěn)定性等等
    # * 他如何解決這個(gè)問題? 具體描述解決問題的步驟
    # * 是否存在副作用、風(fēng)險(xiǎn)?
    #
    # 尾部：如果需要的化可以添加一個(gè)鏈接到issue地址或者其它文檔，或者關(guān)閉某個(gè)issue。