Web App 架構分為兩種：一種是工程架構，一種是項目架構。

工程架構則主要有以下幾個方面的內容：

　　1，?解放生產力，我們希望在開發項目的過程中把全部目光都放到書寫業務代碼上，不需要去考慮一些重復性的工作，如文件復制，瀏覽器刷新等內容。 這些重復性的勞動，我們希望構造工程幫我們解決掉。

　　2，?圍繞枝術方案去搭建開發環境。開發webapp時，我們有很多技術方案可以選擇，比如vue, react. ?但是這些技術方案，它們都有各自特定的語法，如使用vue時，我們用.vue文件，使用react時我們用的是jsx , 而這些語法呢? 瀏覽器又都不支持。所以還要進行編譯，編譯成瀏覽器認識的js文件, 讓它們能夠在瀏覽器中運行。我們工程要解決的編譯問題。

　　3，?保證項目質量。最基本的就是代碼規范，每一個項目，每一個團隊都會考慮定制一套代碼規范。項目成員之間容易熟悉代碼，看懂代碼，?比如使用editor config，?其次就是提前發現我們代碼中的bug ,?如eslint配置.? 最后就是代碼提交，git commit 預處理， 代碼中有錯誤，不能提交態碼。

　　　如果你用vue?或 react?開發過項目，你會發現，這不就是vue-cli或create-react-app?腳手架工具幫我們做的事情嗎？確實是，但它們太通用了，有時候不滿足我們特定項目的需求，所以還要進行修改，這就需要我們有工程架構的能力，需要學一下前端構建工具。說起前端構建工具，你可能聽說過gulp, grunt, webpack?等，但現在應該是webpack的天下了，我們只要學習webpack?就可以了。

　　項目架構：考慮的是，業務代碼如何分層， 更好地實現網頁功能， 為將來項目的擴展性留有一定空間。

　　1，?技術選型。

　　要不要使用框架，使用哪一個框架？ 這還是要根據需求的大小來決定的，平時我開發項目是使用的vue, ?有一天接到一個需求是一個靜態的宣傳頁面，附帶有幾個動態效果，相對簡單一點，并且網上也有現成的實現方案，我就沒有框架，直接Jq 就實現了，也挺快的。

　　對于框架來說，現在主要有三大框架，Angular, React, Vue，到底使用哪一個框架呢？其實，這三個框架從本質來說都一致了，都是組件化，虛擬DOM的思想，不同的只是三個框架的語法，三個框架各自編程的思想。所以具體使用哪個框架，就看你的熟練和掌握程度。

　　Angular 沒有用過，不好評價，只是看過文章介紹，了解到它是一個大而全的框架，什么都給你提供好了，你不用選擇用什么的問題。但是它的學習曲線比較陡峭，因為它首先用的就是TypeScript 語法，到現在，我也沒有學習TypeScript.

　　React vue 都簡單用過，相對于Angular的大而全，它們只是解決一個問題，就是視圖層view。兩者對比，Vue 簡單一點。Vue 的語法簡單， 它的模版和handlebars等模版語法很像，js 的書寫，只要會ES5 完全沒有問題。但React 就不一樣了，它上來就是ES6 的class語法， 并且還發明了jsx 語法，在js中可以書寫類html的語法，剛開始學的時候，也是比較難以入手， 學習React 之前，最好先學習，ES6 及 ES6+的語法。

　　React 和Vue 只解決視圖的問題，那整個程序運行過程中的狀態變化，要怎么處理？?Vue 官方提供了vuex, ?React 官方并沒有提供相應的狀態管理，現有解決方案是Redux， 當然還有Mobx. ?它們都是單向數據流的思想，只是實現方案不太一致。這種單向數據流的思想是最為重要的，確實和以前的開發大不一樣，思想的的變化，確實需要時間，只能一點一點的去適應。相對而言，vuex 是相對好理解的，但我當時也花了1-2個月的時間才算是明白。Redux 則是函數式編程的思想，最主要的還有一個中間件的思想。Mobx也學了一點，但不知道它要實現的思想， 在項目中沒有用過。

?　　當涉及到單頁應用的時候，vue 和React 都有相應的router, vue是vue-router, React則是React-router, ?它們的不同點是vue-router使用的是配置文件，react-router 則是完全組件化的思想，但內部的思想都是一樣的，學會一個，另外一個也就差不多了。

　　2， 整個項目文件的組織方式

　　在深入學習React?和Redux?一書中，它對此有過說明，對于組件化開發來說，按照功能角色進行組織比較合理，也就是把完成同一功能的代碼放到一個目錄下，這個目錄包含實現該功能的各個角色的代碼。在React中，不同的角色就是reducer, actions 和視圖。拿TodoList 應用為例，它有兩個功能就是TodoList 和Filter. 所以文件目錄就可以如下組件

　　注意，每一個目錄或功能模塊下，都有一個index.js文件，它的主要作用是，把該模塊下的所有角色都導入到該文件下，再統一導出，相當于給外界提供一個接口。當外界想使用這個功能模塊時，只需要導入index.js 就可以了，我們模塊內部的內容，它沒有必要知道， 這樣，即使我們模塊內部做任何改動，只要保證index.js 暴露出去的接口不變，就沒有任何問題。

　　不同的功能模塊之間的依賴關系應該簡單而清晰，也就是所謂的保持模塊之間低耦合; ?一個模塊應該把它自己的功能封裝好，讓外界不要太依賴于自己內部的結構，這樣不會因為內部的變化而影響外部模塊的功能，這就是所謂高內聚。

?

轉載于:https://www.cnblogs.com/SamWeb/p/9242431.html

總結

以上是生活随笔為你收集整理的Web App架构的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。