前端規(guī)范化之旅

Vue3+Pinia+Vite+TS還原高性能外賣APP項(xiàng)目

download：https://www.zxit666.com/5762/

前端研發(fā)的一些規(guī)范化標(biāo)準(zhǔn)，良好的代碼標(biāo)準(zhǔn)，不只可以讓代碼簡約明晰，還能夠減少 bug 的呈現(xiàn)，更可以讓看代碼的人心曠神怡，本文主要從命名標(biāo)準(zhǔn)、語法標(biāo)準(zhǔn)、后端系統(tǒng)開發(fā)標(biāo)準(zhǔn)、版本更新標(biāo)準(zhǔn)、上線郵件申請標(biāo)準(zhǔn)、項(xiàng)目啟動(dòng)標(biāo)準(zhǔn)來、文件目錄標(biāo)準(zhǔn)七方面引見，文檔內(nèi)如有錯(cuò)漏之處，敬請大家指正，會(huì)及時(shí)做出調(diào)整；也希望各位可以提出更珍貴意見和倡議，使文檔愈加完善。當(dāng)然假如覺得有可自創(chuàng)之處，歡送大家采用。

引言

前端規(guī)范化是我們踐行前端工程化中重要的一局部，為什么要規(guī)范化呢？首先我們開發(fā)是需求多人開發(fā)的，每一個(gè)開發(fā)者都有各自的編碼愛好和習(xí)氣，就是由于這個(gè)不同的編碼習(xí)氣和愛好增加了我們項(xiàng)目的維護(hù)本錢，所以每個(gè)項(xiàng)目或者團(tuán)隊(duì)需求明白統(tǒng)一的規(guī)范。

以下是我積聚的一些前端標(biāo)準(zhǔn)以及一些個(gè)人倡議：

一．命名標(biāo)準(zhǔn)

好的命名是淺顯易懂，見名知意，即看css能很明晰明了的看出html的構(gòu)造，文雅的js命名，能夠看出每個(gè)func所處置的事情，明晰的文件和文件夾命名標(biāo)準(zhǔn)，有助于了解項(xiàng)目構(gòu)造，以下引見下我們?nèi)粘７e聚的一些命名標(biāo)準(zhǔn)。

1.文件夾運(yùn)用短橫杠命名法(\`xxx-xxx\`)，vue、js、scss等文件運(yùn)用小寫加中劃線命名法(\`xxx-xxx\`)

2.組件開發(fā)標(biāo)準(zhǔn)

（1）根節(jié)點(diǎn)class必需是"cp-xxx"開頭，xxx對應(yīng)的是組件的稱號(hào),組件里面的class 以cp-xxx方式命名class,盡量不要運(yùn)用scoped。

（2）業(yè)務(wù)組件能夠放在當(dāng)前業(yè)務(wù)目錄的component文件夾，import導(dǎo)入時(shí)用bcp-xxx開頭已和公共組件加以辨別，其他標(biāo)準(zhǔn)和公共組件堅(jiān)持分歧。

3. 辦法命名:小寫+駝峰(xxxXxYy)，

4. 組件里面的\`name\`都必需運(yùn)用\`Pascal\`命名法，組件運(yùn)用稱號(hào)相似\`xxx-xxx\`這樣。

5. 路由跳轉(zhuǎn)地址，不要直接寫死鏈接地址，運(yùn)用路由鏈接地址對應(yīng)的name停止跳轉(zhuǎn)。

6. css命名標(biāo)準(zhǔn)：

1）款式：

a) 全局款式：app-*

b) 頁面款式：pg-* pg-marking(marking是模塊)

c) 組件款式：cp-*

d) 款式屬性次第標(biāo)準(zhǔn)：js有好的寫法，引薦語法寫法和不引薦語法寫法

2）狀態(tài)：

a) 全局款式：.show, .hide(全局狀態(tài)命名盡量簡單，不要有過多前綴)

b) 頁面款式：pg-*_active(頁面款式盡量只能在當(dāng)前頁面運(yùn)用，必需添加前綴)

c) 組件款式：cp-*_active(組件款式盡量只能在當(dāng)前組件運(yùn)用，必需添加前綴)

d) 制止運(yùn)用scoped，無論是在全局、頁面還是組件內(nèi)

7.枚舉值定義：全局事情名、本地存儲(chǔ)的key值等需求抽離出單獨(dú)的文件停止統(tǒng)一管理， 防止抵觸。

二．語法標(biāo)準(zhǔn)

語法標(biāo)準(zhǔn)是為了進(jìn)步工作效率，兼容性優(yōu)秀，頁面性能優(yōu)化，代碼簡約、明了、有序，盡可能的減少效勞器的負(fù)載，保證最快的解析速度。

1. 依據(jù)當(dāng)前eslint的標(biāo)準(zhǔn)編寫代碼。

2. 盡可能的少用可變變量，能用const的就不要運(yùn)用let，完整不運(yùn)用var。

3. 擁抱ES6：（舉一些例子，順帶學(xué)習(xí)回憶下）

（1）賦值簡寫：{ data: data }能夠?qū)懗蓒 data }

（2）函數(shù)簡寫：{data: function () {}}能夠?qū)懗蓒data () {}}

（3）對象取值：const {a,b,c,d,e} = obj || {}

（4）兼并數(shù)據(jù)：



替代



（5）拼接字符串：



替代



（6）if判別條件合集：



替代



（7）列表搜索



替代



（8）獲取對象屬性值



替代



（9）添加對象屬性



替代



（10）輸入框非空判別



替代



4. 運(yùn)用ES6的箭頭函數(shù)需求留意：

（1） 函數(shù)體內(nèi)的 \`this\` 對象就是定義時(shí)所在的對象，而不是運(yùn)用時(shí)所在的對象。

（2） 不能夠當(dāng)做結(jié)構(gòu)函數(shù)。也就是說，不能夠運(yùn)用\`new\`命令，否則會(huì)拋出一個(gè)錯(cuò)誤。

（3）不能夠運(yùn)用\`arguments\`對象，該對象在函數(shù)體內(nèi)不存在。假如要用，能夠運(yùn)用\`rest\`參數(shù)替代。（\`rest\`參數(shù)運(yùn)用自行查看《ES6規(guī)范入門》）。

（4）不能夠運(yùn)用\`yield\`命令，因而箭頭函數(shù)不能用作\`Generator\`函數(shù)。

（5）非必要狀況，不要再元素上寫\`style\`。

三．后臺(tái)系統(tǒng)開發(fā)標(biāo)準(zhǔn)

以下主要是針對后端開發(fā)系統(tǒng)的一些開發(fā)標(biāo)準(zhǔn)，主要是將整個(gè)網(wǎng)站統(tǒng)一作風(fēng)，以到達(dá)更好的性能優(yōu)化。

1.二級菜單，一概加上面包屑

2.“重置”按鈕 一概是重置查詢條件，不停止數(shù)據(jù)查詢

3.input 一概加上placeholder

4.展現(xiàn)的table，有些數(shù)據(jù)沒有的話，要運(yùn)用 - 展現(xiàn)

5.數(shù)據(jù)至少大于等于1條時(shí)，才會(huì)顯現(xiàn)分頁

6.table 列表里面，在接口懇求過程中一概加上isLoading

7.搜索結(jié)果為空，要加上空頁面

8.全局loading：（需求加loading就在懇求接口時(shí)，加上isLoading:true）

需求運(yùn)用的狀況：

（1）進(jìn)入頁面記載數(shù)據(jù)

（2）提交表單

（3）接口是非冪等性的狀況。

不需求運(yùn)用的狀況：

（1）翻開彈窗時(shí)需求懇求接口的

（2）接口是冪等性、響應(yīng)快，且接口勝利響應(yīng)后要重新加載數(shù)據(jù)的狀況

9.列表分頁默許size:20，pageSizes:[20,50,100]，若是彈框內(nèi)分頁，默許size:10，pageSizes:[10,30,50]

10.翻頁查詢，比如說翻到第五頁，點(diǎn)擊查詢，應(yīng)該從pageNo = 1 開端

四．版本號(hào)更新標(biāo)準(zhǔn)

版本標(biāo)準(zhǔn)的意義，是讓開發(fā)者一眼查看到本項(xiàng)目的更新次數(shù)，以及本次更新的日期，開發(fā)人員，開發(fā)分支，可以快速的定位問題，理解項(xiàng)目迭代版本的內(nèi)容。

X.Y.Z （主版本號(hào).次版本號(hào).修訂號(hào)）

1. 版本號(hào)必需采用 X.Y.Z 的格式，其中 X、Y、Z為非負(fù)的整數(shù)，且制止在數(shù)字前方補(bǔ)零。X是主版本號(hào)、Y是次版本號(hào)、Z為修訂號(hào)。每個(gè)元素必需以數(shù)值來遞增。

2. 修訂號(hào)：當(dāng)觸及原有頁面修正，比方新增按鈕、修正文案、bug修復(fù)時(shí)遞增.

3. 次版本號(hào)：當(dāng)觸及新增一定（少量）功用模塊，比方新增欄目、新增頁面時(shí)遞增。次版本號(hào)遞增時(shí)，修訂號(hào)必需歸0。

4. 主版本號(hào)：當(dāng)觸及功用模塊有較大的變動(dòng)，比方增加多個(gè)功用模塊或是整體架構(gòu)發(fā)作變化時(shí)遞增。主版本號(hào)遞增時(shí)，次版本號(hào)和修訂號(hào)必需歸0。

5. Changelog寫在項(xiàng)目的 README.md 里，采用倒序排列，即最新的寫在最上邊，模板如下：

\### 2.0.0

- 更新主題：技師看板

- 更新時(shí)間：2022-02-23

- 開發(fā)人員：xxx

- 開發(fā)分支：dev-20220223-cyc -board

1、增加技師看板新頁面
6. Changelog和package.json里的版本號(hào)要同步更新

五：上線標(biāo)準(zhǔn)：

1.上線時(shí)間標(biāo)準(zhǔn)

每周的周二和周四為上線日,這樣就為研發(fā)和產(chǎn)品制定了一個(gè)標(biāo)準(zhǔn)，不用思索每天加班熬夜上線，防止產(chǎn)品因“項(xiàng)目緊急”的緣由讓研發(fā)暫時(shí)上線，從而減少研發(fā)的壓力。

2.上線郵件申請標(biāo)準(zhǔn)

比方今天上線有A項(xiàng)目、B項(xiàng)目、C項(xiàng)目等等多個(gè)項(xiàng)目的時(shí)分，假如每個(gè)人上線的同窗提交一個(gè)審批郵件，關(guān)于指導(dǎo)來說需求每天審批很多郵件，所以此時(shí)我們不得不制定一個(gè)規(guī)范。

目前的上線審批流程為：每周二和周四需求大的人擔(dān)任發(fā)送當(dāng)天的上線郵件申請，擔(dān)任人提早搜集好上線的需求，分支，review人，流程步驟等信息。匯總一同發(fā)送郵件，此時(shí)指導(dǎo)只需求回復(fù)一個(gè)上線郵件即可。詳細(xì)模版，如下：

六．項(xiàng)目啟動(dòng)標(biāo)準(zhǔn)

項(xiàng)目啟動(dòng)關(guān)于新入職員工，以及新人還是有一定的應(yīng)戰(zhàn)的，特別是一些項(xiàng)目需求配置相關(guān)的host，package.json文件里面普通只是根底的啟動(dòng)，不會(huì)提示配置host等，此時(shí)就需求我們制定一個(gè)標(biāo)準(zhǔn)，比方在README.md文件下寫上詳細(xì)的啟動(dòng)步驟，以及每個(gè)環(huán)境需求配置的host，詳細(xì)如下：

有了以上的啟動(dòng)引導(dǎo)是不是不論誰開發(fā)都便當(dāng)了很多，只需依照上面的步驟一步一步的停止，就不需求初次開發(fā)該項(xiàng)目的人員去找相關(guān)開發(fā)幫助啟動(dòng)項(xiàng)目，并且也附加了登錄賬號(hào)等信息，大大進(jìn)步人效數(shù)倍。

七：文件目錄標(biāo)準(zhǔn)：

一個(gè)項(xiàng)目,有一個(gè)好的目錄構(gòu)造那是必不可少的。當(dāng)我們項(xiàng)目越來越大時(shí)或者多人協(xié)作開發(fā)時(shí),我們就更應(yīng)該有一個(gè)明晰的目錄構(gòu)造。好的項(xiàng)目目錄構(gòu)造可以給我們帶來諸多的益處,比方:每個(gè)功用或模塊單獨(dú)管理、代碼的可讀性加強(qiáng)、代碼的可維護(hù)性加強(qiáng)、易于多人協(xié)作之間的溝通、接下來我將分享一下我在平常項(xiàng)目中總結(jié)的目錄構(gòu)造,當(dāng)然這只是我個(gè)人的理論,歡送大家提出更好的意見。

|---public

|---index.html（入口html）

|---src

|---assets（靜態(tài)資源）

|---css（全局款式）

|---js（全局js）

|---images（靜態(tài)圖片）

|---components（根底組件）

|---hocs（業(yè)務(wù)組件）

|---layout（全局規(guī)劃）

|---service（axios接口封裝）

|---store（vuex）

|---views/pages（頁面）

|---App.vue

|---main.js（入口js）

|---.editorconfig（編輯器配置）

|---.eslintrc（代碼標(biāo)準(zhǔn)的配置）

|---.gitignore（Git倉庫疏忽掉的文件或目錄）

|---babel.config.js（babel編譯的配置）

|---package.json（項(xiàng)目配置文件）

|---README.md（項(xiàng)目描繪）

|---vue.config.js（配置文件）