摘要：首次發(fā)表在個(gè)人博客總結(jié)一下個(gè)人在開(kāi)發(fā)及同事代碼的過(guò)程中遇到的因?yàn)橐恍╉?xiàng)目規(guī)范帶來(lái)的問(wèn)題及認(rèn)為比較好的解決方法由于個(gè)人經(jīng)驗(yàn)和認(rèn)知水平有限下面僅代表我的個(gè)人觀念歡迎各位大佬多給我提建議以本人最近寫(xiě)的一個(gè)項(xiàng)目技術(shù)棧為為例的使用因?yàn)橐粋€(gè)項(xiàng)目往

首次發(fā)表在個(gè)人博客

總結(jié)一下個(gè)人在開(kāi)發(fā)及review同事代碼的過(guò)程中遇到的因?yàn)橐恍╉?xiàng)目規(guī)范帶來(lái)的問(wèn)題及認(rèn)為比較好的解決方法;
由于個(gè)人經(jīng)驗(yàn)和認(rèn)知水平有限,下面僅代表我的個(gè)人觀念,歡迎各位大佬多給我提建議;

以本人最近寫(xiě)的一個(gè)項(xiàng)目(技術(shù)棧為Meteor + React + MongoDB)為例

因?yàn)橐粋€(gè)項(xiàng)目往往需要很多人一起協(xié)助開(kāi)發(fā),還有可能會(huì)不斷有新手接手項(xiàng)目,所以readme里面一定要僅可能多的信息

項(xiàng)目啟動(dòng)命令

代碼規(guī)范

Commit Message 編寫(xiě)規(guī)范

命名: class命名,變量命名,函數(shù)命名,組件命名等

組件

目錄結(jié)構(gòu)

常遇到的問(wèn)題及解決方案

也可以加一些項(xiàng)目中遇到的設(shè)計(jì)到的文檔鏈接

編寫(xiě)Commit Message需要遵循一定的范式，內(nèi)容應(yīng)該清晰明了，指明本次提交的目的，便于日后追蹤問(wèn)題。

feat: 新功能
fix: 修補(bǔ)bug
docs: 文檔
style: 格式(不影響代碼運(yùn)行的變動(dòng))
refactor: 重構(gòu)
test: 添加測(cè)試
chore: 構(gòu)建過(guò)程或輔助工具的變動(dòng)

命名的語(yǔ)義化真的特別特別重要,哪怕不知道要命名的這個(gè)詞的英文是什么,也要去查一下;千萬(wàn)不要以a,b,c等沒(méi)有任何語(yǔ)義的詞去命名;之前我也總是注意不到這一點(diǎn),但是最近在看同事的代碼還有重構(gòu)自己之前寫(xiě)的部分代碼,命名壓根看不明白這個(gè)變量的意思,總之,看這樣的代碼怎一個(gè)痛苦了得

常見(jiàn)class命名關(guān)鍵詞：
布局類(lèi)：header, footer, container, main, content, aside, page, section
包裹類(lèi)：wrap, inner
區(qū)塊類(lèi)：region, block, box
結(jié)構(gòu)類(lèi)：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表類(lèi)：list, item, field
主次類(lèi)：primary, secondary, sub, minor
大小類(lèi)：s, m, l, xl, large, small
狀態(tài)類(lèi)：active, current, checked, hover, fail, success, warn, error, on, off
導(dǎo)航類(lèi)：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互類(lèi)：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
星級(jí)類(lèi)：rate, star
分割類(lèi)：group, seperate, divider
等分類(lèi)：full, half, third, quarter
表格類(lèi)：table, tr, td, cell, row
圖片類(lèi)：img, thumbnail, original, album, gallery
語(yǔ)言類(lèi)：cn, en
論壇類(lèi)：forum, bbs, topic, post
方向類(lèi)：up, down, left, right
其他語(yǔ)義類(lèi)：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...

變量命名: 名字要能準(zhǔn)確的描述出該變量所代表的事物
比如表示user的id就叫userId,而不要只叫user

函數(shù)命名建議：可使用常見(jiàn)動(dòng)詞約定

 動(dòng)詞       含義      
 get       獲取某個(gè)值            
 set       設(shè)置某個(gè)值             
 is        判斷是否為某個(gè)值    
 has       判斷是否有某個(gè)值  

以下規(guī)則是此項(xiàng)目中使用的,主要看團(tuán)隊(duì)代碼習(xí)慣:

組件名和組件所在文件名使用大駝峰式

css類(lèi)名使用小寫(xiě)單詞并用橫線(-)分割

dom節(jié)點(diǎn)以$開(kāi)頭

每個(gè)組件占一個(gè)文件

組件不包含狀態(tài)則應(yīng)寫(xiě)為 stateless 組件

非 stateless 組件使用 pure-render-decorator 優(yōu)化

├── client  
│?? ├── main.html                       客戶(hù)端頁(yè)面模板
│?? └── main.js                         客戶(hù)端入口  
├── imports  
│?? ├── client  
│?? │?? ├── App.jsx                     頂層組件  
│?? │?? ├── components                  公共組件  
│?? │?? ├── routers                     前端路由  
│?? │?? ├── styles                      樣式  
│?? │?? └── views                       視圖  
│?? │??     ├── header                  公共頭  
│?? │??     ├── login                   登錄注冊(cè)  
│?? ├── schema                          模型  
│?? └── util                            工具函數(shù)  
├── packages                            自定義 meteor 包  
├── public                              客戶(hù)端資源  
└── server   
    ├── main.js                         服務(wù)端入口  
    └── user                            用戶(hù)接口  

項(xiàng)目中總會(huì)遇到很多奇奇怪怪的問(wèn)題,當(dāng)時(shí)印象深刻,過(guò)了一段時(shí)間,就忘了具體的問(wèn)題及解決辦法,雖然每次可以通過(guò)查commit為fix的記錄,但是這樣查找起來(lái)很麻煩,我們項(xiàng)目是用gitlab來(lái)托管,可以合理的理由issues,每次遇到很棘手的問(wèn)題的時(shí)候,可以提一個(gè)issues,等后期把這個(gè)問(wèn)題解決了再把這個(gè)issues給關(guān)閉,并寫(xiě)上問(wèn)題原因及解決辦法分析

下面補(bǔ)充的是項(xiàng)目中針對(duì)Meteor后端開(kāi)發(fā)的一些規(guī)范

所有 Collection 定義放在 imports/schema 目錄, 每個(gè) Collection 務(wù)必定義 Schema 來(lái)約束字段

Schema 定義使用 SimpleSchema, 數(shù)據(jù)插入數(shù)據(jù)庫(kù)前必須通過(guò) schema 校驗(yàn), 調(diào)用校驗(yàn)語(yǔ)句為 表名.schema.validate(要插入的數(shù)據(jù));

默認(rèn)情況下, 數(shù)據(jù)查詢(xún)語(yǔ)句會(huì)返回所有字段, 比如 Memete.users.find({}) 會(huì)將用戶(hù)的密碼和 token 一并返回, 這樣是不安全不正確的, find / findOne 的第二個(gè)參數(shù)是查詢(xún)選項(xiàng), fields 字段可以控制返回字段, 例如:

Meteor.users.find(
    { },
    {
        fields: {
            username: 1,
            profile: 1,
        },
    },
);

該查詢(xún)會(huì)返回 _id, username, profile 字段, 其中 _id 是默認(rèn)返回的

在做邀請(qǐng)新的好友入群的時(shí)候,添加新的好友,利用reywood:publish-composite并不會(huì)自動(dòng)更新數(shù)據(jù),所以以后直接自己在客戶(hù)端定義方法
這樣做的好處是解決了取關(guān)聯(lián)數(shù)據(jù)不會(huì)自動(dòng)更新的bug,但是有點(diǎn)麻煩的是每次需要關(guān)聯(lián)數(shù)據(jù)的時(shí)候必須在客戶(hù)端調(diào)用一次方法,正在考慮有沒(méi)有更好的解決方法

import { Meteor } from "meteor/meteor";

const PopulateUtil = {
    group(group) {
        if (group) {
            group.members = Meteor.users.find({ _id: { $in: group.members } }).fetch();
            group.admin = Meteor.users.findOne({ _id: group.admin });
        }
    },
    groups(groups) {
        groups.forEach(group => PopulateUtil.group(group));
    },
};

export default PopulateUtil;

因?yàn)檫@次項(xiàng)目需要自己設(shè)計(jì)數(shù)據(jù)庫(kù),還有自己定義后端方法,之前沒(méi)有任何經(jīng)驗(yàn),做到現(xiàn)在也總結(jié)出一點(diǎn)心得:

數(shù)據(jù)庫(kù)設(shè)計(jì)一定要根據(jù)具體的業(yè)務(wù)邏輯(開(kāi)始設(shè)計(jì)之前一定要和產(chǎn)品溝通清楚產(chǎn)品邏輯)

能在后端取到的數(shù)據(jù),在接口定義的時(shí)候不要讓前端去傳

最后感覺(jué)后端的邏輯真的很復(fù)雜,需要各種判斷,各種情況都得想到

推薦看一下這本代碼大全(第二版),等看完這本書(shū)再好好的完善一下這篇文章

class如何命名更規(guī)范
代碼大全(第二版)
Commit Message 編寫(xiě)指南

github
blog