此文是對螞蟻金服文章的解讀，所以要看懂此文一定要先去看原文：如何管理好10萬行代碼的前端單頁面應(yīng)用。

當(dāng)時看到螞蟻金服這篇文章有點茅塞頓開，只不過他們是基于 React 技術(shù)棧開發(fā)的，但是架構(gòu)是一種思想，不區(qū)分語言不區(qū)分框架的，所以我相信這套架構(gòu)一定可以應(yīng)用到 Vue 項目中。廢話不多說，直接進(jìn)入正文。

同一“頁面”內(nèi)的模塊再劃分

這里意思是每個頁面劃分為 MVC 結(jié)構(gòu)。那么如何用代碼提現(xiàn) MVC 結(jié)構(gòu)呢。對于 Vue 項目中，難點在于 MC 兩層。最后小組討論用 Vuex 來架構(gòu) MC 兩層，如下圖所示。

領(lǐng)域模型

領(lǐng)域模型是指可跨模塊復(fù)用的公共數(shù)據(jù)，所以我們也用 Vuex 來架構(gòu)它，存放目錄如下。

視圖型組件和容器型組件

這一點要在 Vue 中實現(xiàn)其實也很好做，請看這篇文章。但是我們這邊基于業(yè)務(wù)考慮，暫時覺得沒必要弄得這么細(xì)，所以通用業(yè)務(wù)組件這一塊，在我們 Vue 項目架構(gòu)就沒采用視圖和容器這種組合方式了。

跨模塊通信

為了保證模塊的純粹性，所以跨模塊通信采用中介者模式來解耦。我們建立了一個 pageTalk 目錄用中介者模式來處理跨模塊通信。

總結(jié)

以上便是我們基于螞蟻這套架構(gòu)實現(xiàn)了 Vue 架構(gòu)版。此套架構(gòu)實現(xiàn)僅為我方團(tuán)隊的理解，不能作為標(biāo)準(zhǔn)，但可以為大家提供參考價值。

歡迎入群交流

源碼下載

總結(jié)

以上是生活随笔為你收集整理的基于蚂蚁金服「如何管理好10万行代码」搭建了 Vue 项目架构的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。