測(cè)試平臺(tái)開(kāi)發(fā)vue組件化重構(gòu)前端代碼

更新時(shí)間：2022年05月26日 11:01:19 作者：把蘋(píng)果咬哭的測(cè)試筆記

這篇文章主要為大家介紹了測(cè)試平臺(tái)開(kāi)發(fā)vue組件化重構(gòu)前端代碼，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

基于 springboot+vue 的測(cè)試平臺(tái)開(kāi)發(fā)

繼續(xù)更新（人在魔都 T_T）。

這期其實(shí)并不是一個(gè)詳細(xì)的開(kāi)發(fā)過(guò)程記錄，主要還是針對(duì)本次前端重構(gòu)來(lái)聊聊幾個(gè)關(guān)注點(diǎn)。

目前重構(gòu)的總進(jìn)度在80%，重構(gòu)完的頁(yè)面沒(méi)什么變化，再回顧一下。

目前項(xiàng)目的功能開(kāi)發(fā)重點(diǎn)還是在接口管理這一大塊，內(nèi)容多，任務(wù)重，可當(dāng)我著手準(zhǔn)備繼續(xù)開(kāi)發(fā)新功能的時(shí)候發(fā)現(xiàn)了個(gè)重大的問(wèn)題。

我之前接口相關(guān)的功能都寫(xiě)在一個(gè)vue文件里，看了下代碼行數(shù)已然近800，現(xiàn)在查看之前代碼和改動(dòng)就已經(jīng)非常的不方便的，這后面功能還多了，繼續(xù)寫(xiě)下去估計(jì)自己都要扔了。

所以重構(gòu)前端代碼優(yōu)先提上了日程。

怎么重構(gòu)，那當(dāng)然還是利用vue的組件化特性來(lái)進(jìn)行拆分。已當(dāng)前的完成度來(lái)看，從當(dāng)初的 1 個(gè)文件（紅色框的），拆分了現(xiàn)在的 10 文件（其他的）。

這部分主要有 2 個(gè)部分。

這不是廢話么？因?yàn)橹皩?duì)相關(guān)知識(shí)儲(chǔ)備比較少，所以一開(kāi)始也不知道如何下手，于是找起來(lái)。網(wǎng)上有很多博客、視頻等免費(fèi)學(xué)習(xí)資源，大家很容易就可以搜到。

我起初也是想針對(duì)性的補(bǔ)充下vue組件相關(guān)性高的知識(shí)點(diǎn)，后來(lái)看著看著，不知不覺(jué)幾乎把 vue 系統(tǒng)化的肝了一遍，雖然花費(fèi)了不少時(shí)間，但是收獲也很多，之前許多一知半解的問(wèn)題都知道為啥了。

這里羅列一些重要的知識(shí)點(diǎn)，僅供參考：

其中比較花費(fèi)精力的就是后面2個(gè)了。因?yàn)榻M件拆分勢(shì)必就會(huì)有多個(gè)組件協(xié)作，那么父子、兄弟、任意組件之間的數(shù)據(jù)傳遞和操作就需要這些技術(shù)來(lái)解決。

合理拆分其實(shí)并沒(méi)有一個(gè)嚴(yán)格意義的要求，對(duì)我來(lái)說(shuō)重點(diǎn)是2個(gè)：代碼結(jié)構(gòu)更清晰、復(fù)用代碼。

舉例說(shuō)明一下，看圖。

圖中是接口定義的編輯頁(yè)面，本來(lái)都是在一個(gè)文件里的一大坨，經(jīng)過(guò)拆分之后：

后續(xù)如果有新增或者其他改動(dòng)，代碼結(jié)構(gòu)一目了然，很容易進(jìn)行維護(hù)。

而在實(shí)戰(zhàn)中遵循了這么一個(gè)組件化編碼的流程：

先拆分出靜態(tài)組件，按不同功能拆分，命名合理，如果你的拆分覺(jué)得不好取名字，大概率拆的不合理。
再實(shí)現(xiàn)動(dòng)態(tài)組件，看下這個(gè)組件是一個(gè)在用還是會(huì)重復(fù)使用，決定好數(shù)據(jù)要存放的位置。
最后實(shí)現(xiàn)交互，可以從綁定事件開(kāi)始。

一步步來(lái)，中間也踩了不少坑，畢竟將知識(shí)的簡(jiǎn)單demo應(yīng)用到項(xiàng)目實(shí)戰(zhàn)中，還是要花點(diǎn)精力去琢磨的。