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

   第二個(gè)問題是在用組件化的思想去構(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í)例對組件的文件分配就很清晰，一個(gè)容器組件就是一個(gè)文件夾，這個(gè)文件夾下面子文件夾放這個(gè)表現(xiàn)組件,一般情況下只是調(diào)用自己同級的表現(xiàn)組件。當(dāng)然這種導(dǎo)致組件的復(fù)用效率沒那么高，事物本身就是矛盾體，我們在抉擇的時(shí)候就盡量選擇中間程度，比如100%利用組件的復(fù)用必然結(jié)構(gòu)就會(huì)混亂，容器組件下的表現(xiàn)組件100%單獨(dú)分開那組件的作用就沒任何意義。這兩種極端都會(huì)對系統(tǒng)造成一定的弊端，那何不取中間程度；表現(xiàn)組件可以跨容器組件復(fù)用，但在結(jié)構(gòu)上盡量按容器組件劃分文件夾；在調(diào)用其他容器組件的表現(xiàn)組件時(shí)候要加詳細(xì)注釋說明。

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

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

這些只是我個(gè)人