一赵辕、技術(shù)選型

選擇技術(shù)穩(wěn)定既绩、大部分成員都掌握的語(yǔ)言和技術(shù)，減少技術(shù)壁壘造成的維護(hù)成本大的問(wèn)題还惠。針對(duì)團(tuán)隊(duì)小饲握，項(xiàng)目節(jié)奏快，非核心功能蚕键，我們就實(shí)際一點(diǎn)救欧，選型時(shí)尤其是非核心功能， 沒(méi)必要因?yàn)橐粋€(gè)不重要的功能锣光，專門投入人力維護(hù)它笆怠。

失敗案例：團(tuán)隊(duì)前端有10人，核心業(yè)務(wù)都在B端的vue開發(fā)上誊爹。后來(lái)評(píng)估有一小部分功能要平行在APP端開發(fā)蹬刷。當(dāng)時(shí)恰逢Flutter技術(shù)興起，我們就選擇了使用flutter實(shí)現(xiàn)APP端的功能频丘。后期就發(fā)現(xiàn)了多個(gè)棘手的問(wèn)題：
1办成、前端人員中抽調(diào)兩個(gè)專門學(xué)習(xí)dart語(yǔ)言及flutter技術(shù)，后期這兩人在APP端忙的時(shí)候主要做APP開發(fā)搂漠，APP端工作少時(shí)迂卢，穿插著幫助其他干活，這兩人后來(lái)都出現(xiàn)了部門變更桐汤，導(dǎo)致APP端工作無(wú)人接手而克，重新培養(yǎng)兩個(gè)人學(xué)習(xí)Flutter；
2怔毛、這兩個(gè)人員要懂所有的模塊業(yè)務(wù)员萍。APP端的工作量不多，但是涉及的模塊和業(yè)務(wù)卻非常多拣度。B端的人員安排充活，都是一個(gè)人固定開發(fā)一兩個(gè)模塊的功能，還不具備掌握全部業(yè)務(wù)的人員蜡娶。而APP端的人不僅面臨新技術(shù)的學(xué)習(xí)混卵，還有全系統(tǒng)業(yè)務(wù)的學(xué)習(xí)，經(jīng)常出現(xiàn)修改引入新問(wèn)題的現(xiàn)象出現(xiàn)窖张，代碼質(zhì)量無(wú)法保障幕随；
3、因?yàn)锳PP端功能少宿接，業(yè)務(wù)設(shè)計(jì)和需求變更時(shí)赘淮，經(jīng)常忘記APP端的設(shè)計(jì)辕录，導(dǎo)致APP端始終在補(bǔ)齊B端的功能，卻始終趕不上B端的變化梢卸。因?yàn)锽端和APP端公用一個(gè)接口走诞，經(jīng)常出現(xiàn)接口變動(dòng)后，APP端不知情蛤高，被動(dòng)修改bug的情況頻頻發(fā)生蚣旱。

以上APP選型換成uni-app的話，以上三個(gè)問(wèn)題就不會(huì)存在戴陡，B端和APP端一個(gè)人負(fù)責(zé)塞绿，修改B端時(shí)APP端就一起修改了，他也只需要掌握自己這個(gè)模塊的功能即可恤批。
這個(gè)案例异吻，是有一定的要求的

二、基礎(chǔ)設(shè)施建設(shè)

1喜庞、公共組件要先行诀浪，并有人看管和維護(hù)，且確保API幫助有固定訪問(wèn)地址延都。開發(fā)自己的公共組件雷猪，統(tǒng)一代碼風(fēng)格的情況下，能提高代碼可維護(hù)性窄潭、提高代碼質(zhì)量、避免重復(fù)問(wèn)題酵颁、減少后期優(yōu)化成本等嫉你；
2、代碼規(guī)范要制定并帶領(lǐng)大家學(xué)習(xí)躏惋；
3幽污、代碼走查要求要宣貫和跟蹤
①新組件團(tuán)隊(duì)，每天做代碼走查簿姨，檢查2個(gè)月
②新人員加入團(tuán)隊(duì)距误，每周做兩次代碼走查，堅(jiān)持2個(gè)月
4扁位、定期開展規(guī)范准潭、要求、知識(shí)的培訓(xùn)會(huì)議
5域仇、開發(fā)工具統(tǒng)一刑然，建議用vscode
6、代碼格式化規(guī)則統(tǒng)一
7暇务、ESLint代碼檢視規(guī)則統(tǒng)一
8泼掠、打包編譯要考慮性能：
①公共第三方包怔软，放在CDN上，確保不同服務(wù)版本一致择镇，且避免每個(gè)服務(wù)頁(yè)面渲染時(shí)都要加載一遍公共靜態(tài)資源挡逼，影響頁(yè)面性能的問(wèn)題；
②業(yè)務(wù)公共組件腻豌，放在CDN上

三家坎、代碼規(guī)范

1、【要求】廢棄的代碼片段饲梭，要?jiǎng)h除徹底乘盖，提高代碼的可閱讀性，減少維護(hù)成本憔涉。

如果要?jiǎng)h除一個(gè)新增功能订框，則要將新增按鈕，以及按鈕調(diào)用的觸發(fā)函數(shù)兜叨、對(duì)應(yīng)的新增彈窗組件穿扳、彈窗中依賴的變量以及vuex中的變量，全部刪除干凈国旷。否則定位問(wèn)題時(shí)矛物，這種撲朔迷離的感覺只會(huì)叫人口吐芬芳。

不好的案例：潤(rùn)滑工單刪除了新增功能跪但，代碼中只是將新增按鈕注釋掉了履羞，點(diǎn)擊事件仍然存在，點(diǎn)擊事件需要打開新增彈窗組件代碼存在屡久、新增組件依賴的選擇設(shè)備組件存在忆首。

2、【要求】廢棄的代碼文件被环，直接刪除糙及，不能保留。后續(xù)排查整改時(shí)筛欢，不知情情況下仍需要花費(fèi)人力整改驗(yàn)證浸锨，一系列操作后發(fā)現(xiàn)該文件無(wú)用，避免這種情況發(fā)生版姑。
3柱搜、【要求】代碼要持續(xù)優(yōu)化，發(fā)現(xiàn)問(wèn)題及時(shí)優(yōu)化剥险，不能容忍冯凹。

不好的案例：翻頁(yè)組件由于開發(fā)人員經(jīng)驗(yàn)有限，重復(fù)定義了“當(dāng)前頁(yè)”這個(gè)變量：current和pageNum。第一個(gè)使用這個(gè)組件時(shí)人宇姚，沒(méi)有審核就同時(shí)使用了這兩個(gè)變量匈庭。趕上項(xiàng)目人員急劇膨脹，大家都拷貝這種寫法浑劳，以為是項(xiàng)目的成熟經(jīng)驗(yàn)阱持，導(dǎo)致上百處地方錯(cuò)誤使用了這個(gè)變量，后面修改都改不過(guò)來(lái)魔熏，代碼里一會(huì)兒用這個(gè)變量衷咽，一會(huì)兒用那個(gè)變量，排查整改難度加大蒜绽。中間有再次給大家強(qiáng)調(diào)這種用法是錯(cuò)誤的镶骗，但是，仍然沒(méi)有阻止這個(gè)問(wèn)題的繼續(xù)發(fā)展躲雅。如今項(xiàng)目稍微穩(wěn)定鼎姊，需要整改也得等待時(shí)機(jī)。

4相赁、接口定義和調(diào)用簡(jiǎn)潔
①相寇、后端接口設(shè)計(jì)時(shí)，參數(shù)要簡(jiǎn)潔明了钮科，并且盡量相互獨(dú)立唤衫，不能耦合；不相關(guān)的參數(shù)不要出現(xiàn)在接口定義中绵脯，防止后期定位問(wèn)題參數(shù)雜亂理不清頭緒佳励；前端調(diào)用接口時(shí)，要嚴(yán)格遵守接口參數(shù)定義蛆挫，只傳接口明確定義的參數(shù)赃承，不能多傳不相關(guān)數(shù)據(jù)；
②璃吧、后端的swagger接口說(shuō)明文檔楣导，要明確說(shuō)明每個(gè)參數(shù)的含義运嗜、數(shù)據(jù)類型沫勿、以及是否為必填蓖墅，并持續(xù)維護(hù)；
③巴元、后端接口定義時(shí)，同一個(gè)含義的變量驮宴，在多個(gè)不同接口中參數(shù)命名要一致逮刨，盡量也要與響應(yīng)中的變量名稱保持一致；不允許出現(xiàn)多個(gè)變量同時(shí)表示一個(gè)含義的情況；
④修己、接口設(shè)計(jì)時(shí)要遵循功能最小原則恢总。一個(gè)接口只解決一個(gè)最小的問(wèn)題。如果將包裝物料和散裝物料的退料功能設(shè)計(jì)在一個(gè)接口中睬愤，兩者雖然都是物料片仿，但是退料時(shí)兩種類型的物料參數(shù)重疊的部分較少，大部分參數(shù)都不相同（包裝規(guī)格尤辱、包裝數(shù)等）砂豌，會(huì)導(dǎo)致因參數(shù)太多，代碼邏輯復(fù)雜光督。并且前端在調(diào)用時(shí)阳距，分不清楚散裝物料需要哪些參數(shù)，包裝物料需要哪些參數(shù)结借。（接口說(shuō)明文檔不是時(shí)刻都出現(xiàn)在眼前的）

5筐摘、【要求】有新的業(yè)務(wù)組件出現(xiàn)時(shí)，則停止引用舊組件映跟；避免后期再整改蓄拣。
6、【要求】每個(gè)頁(yè)面開發(fā)努隙，都要按照組件封裝的思路設(shè)計(jì)代碼層級(jí)結(jié)構(gòu)球恤，以方便后續(xù)提取成公共組件；
7荸镊、【要求】vue開發(fā)規(guī)范（風(fēng)格指南 — Vue.js (vuejs.org)
）
① 文件命名
② 組件命名：組件名應(yīng)該始終是多個(gè)單詞咽斧，用中劃線連接多個(gè)全小寫單詞
③ 文件夾命名
prop 的定義應(yīng)該盡量詳細(xì)，至少需要指定其類型
總是用 key 配合 v-for
永遠(yuǎn)不要把 v-if 和 v-for 同時(shí)用在同一個(gè)元素上
組件樣式要設(shè)置作用域
【建議】樣式要提取到單獨(dú)樣式文件中躬存，便于換膚
【要求】vue文件中的樣式张惹，必須帶scoped屬性。<style scoped>
【要求】盡量封裝成可拼裝的小組件
【要求】組件的文件名稱岭洲，所有單詞首字母大寫連接在一起宛逗，或者全小寫用中劃線連接起來(lái)，例如MyComponent.vue盾剩，my-component.vue
【要求】和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名

四雷激、代碼走查

1、走查依據(jù)：編碼規(guī)范
2告私、走查方式：
①項(xiàng)目組件初期屎暇，或新技術(shù)使用初期，以開會(huì)形式集體對(duì)每個(gè)人代碼進(jìn)行輪流走查驻粟；
②后期人員加入根悼，可以二對(duì)一每?jī)商煲淮位蛞恢軆纱危?br> ③后期可以通過(guò)git合入門禁，對(duì)每一次合入進(jìn)行走查；
3挤巡、走查跟蹤：走查問(wèn)題要全部整改并驗(yàn)收剩彬；
4、提倡大家互相走查矿卑、主動(dòng)走查