公司用vue開(kāi)發(fā)的第一個(gè)項(xiàng)目告一段落,在開(kāi)發(fā)中存在很多問(wèn)題,第一就是前后端分離的實(shí)際應(yīng)用中遇到很多坑,前端和后端的依賴其實(shí)沒(méi)完全分開(kāi),前端要依賴后端的提供的接口輸出,接口有沒(méi)有報(bào)錯(cuò);后端要依賴前端頁(yè)面的展示數(shù)據(jù)的需求來(lái)確定接口的輸出字段.其實(shí)沒(méi)完全分開(kāi),后面討論是不是可以將數(shù)據(jù)的打包從java層分出來(lái)放到node層,java只要提供通用的查詢表功能。這樣后臺(tái)就不用依賴前端頁(yè)面的輸出來(lái)規(guī)定自己接口的輸出項(xiàng)了，而前端想要什么數(shù)據(jù)就可以在node層調(diào)用通用接口來(lái)自己組裝數(shù)據(jù)返回給前端，而且前端也可以只發(fā)送一個(gè)ajax請(qǐng)求就可以得到全部想要數(shù)據(jù)，這樣前端和后臺(tái)的依賴度會(huì)更小。具體后臺(tái)的接口是要主表查詢和子表查詢都分開(kāi)，還是主表子表關(guān)聯(lián)查詢還是要具體根據(jù)項(xiàng)目詳細(xì)討論。

   第二個(gè)問(wèn)題是在用組件化的思想去構(gòu)建系統(tǒng)，很容易出現(xiàn)前端結(jié)構(gòu)、思路很混亂的情況，造成這種混亂的原因有多方面：

  • vue前端結(jié)構(gòu)是和react項(xiàng)目類似，在一個(gè)react文章中描述到組件分為“容器組件”和“表現(xiàn)組件”,容器組件單獨(dú)存放在一個(gè)文件夾中，表現(xiàn)組件也單獨(dú)放在另一個(gè)文件夾中，這樣導(dǎo)致表現(xiàn)組件被多個(gè)容器組件調(diào)用，而且還可能表現(xiàn)組件嵌套，導(dǎo)致組件間的調(diào)用很混亂，我的建議解決方案是ng2中的項(xiàng)目實(shí)例對(duì)組件的文件分配就很清晰，一個(gè)容器組件就是一個(gè)文件夾，這個(gè)文件夾下面子文件夾放這個(gè)表現(xiàn)組件,一般情況下只是調(diào)用自己同級(jí)的表現(xiàn)組件。當(dāng)然這種導(dǎo)致組件的復(fù)用效率沒(méi)那么高，事物本身就是矛盾體，我們?cè)诰駬竦臅r(shí)候就盡量選擇中間程度，比如100%利用組件的復(fù)用必然結(jié)構(gòu)就會(huì)混亂，容器組件下的表現(xiàn)組件100%單獨(dú)分開(kāi)那組件的作用就沒(méi)任何意義。這兩種極端都會(huì)對(duì)系統(tǒng)造成一定的弊端，那何不取中間程度；表現(xiàn)組件可以跨容器組件復(fù)用，但在結(jié)構(gòu)上盡量按容器組件劃分文件夾；在調(diào)用其他容器組件的表現(xiàn)組件時(shí)候要加詳細(xì)注釋說(shuō)明。

  • 前后端分離會(huì)將很多數(shù)據(jù)處理和邏輯處理分給前端來(lái)做，也就是這種模式前端js的復(fù)雜度要比傳統(tǒng)的復(fù)雜度高些，加上本身js沒(méi)有框架分層的思想導(dǎo)致js的代碼更加混亂，這里的解決方案是我之前寫的博客文章用面向?qū)ο髮?duì)js進(jìn)行分層。在vue中的data看似是model層但其實(shí)就是個(gè)擺設(shè)。vue中可以將數(shù)據(jù)讀取放到computed中作為數(shù)據(jù)讀取層，在ready中在分兩層，第一層是數(shù)據(jù)處理層，第二層是和v層的一些操作代碼，事件處理統(tǒng)一放到了methods 這樣js代碼的業(yè)務(wù)邏輯就相對(duì)比較清晰了。

  • vue的思維，雙向數(shù)據(jù)綁定本身就是利用變量的判斷來(lái)控制dom的，不知道用過(guò)vue的有沒(méi)有這種感覺(jué)，在頁(yè)面中除了{(lán){}}和v-bind綁定用的最多以外，第二用的最多的就是v-if，因?yàn)樗谋旧硭枷刖褪怯门袛鄟?lái)操作dom，這樣導(dǎo)致頁(yè)面的if語(yǔ)句很多，而且基本都推到到v層。所以對(duì)js開(kāi)發(fā)程序員的要求更高，能看懂區(qū)分這種判斷。

這些只是我個(gè)人