Web App架構

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 暴露出去的接口不變，就沒有任何問題。

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