最初，前端是沒有架構的，因為功能簡單的代碼毫無架構可言，通過一個簡單的jQuery庫操作DOM就能完成的作業，無需復雜的設計模式和代碼管理機制，也就不需要架構來支持起應用，
前端開發的發展歷史分為以下幾個階段：
- 古典時代：由后端渲染出前端HTML，用Table布局，用CSS進行簡單的輔助
- 動效時代：前端開始撰寫一些簡單的JavaScript腳本來做影片效果，如輪播廣告
- Ajax異步通信時代：2005年，Google在諸多Web應用中使用了異步通信技術如 Google地圖，開啟了Web前端的一個新時代
一旦前端應用需要從后端獲取資料，就意味著前端應用在運行時是動態地渲染內容的，這便是Model（模型）UI層解耦，jQuery能夠提供DOM操作方法和模型引擎等，這時的開發人員需要做下面兩件事：
- 動態生成HTML，由后端回傳前端所需要的HTML，再動態替換頁面的DOM頁面，早期的典型架構如jQuery Mobile，事先在前端寫好模板與渲染邏輯，用戶的行為觸發后臺并回傳對應的資料來渲染檔案
- 模板分離，由后端用API回傳前端所需要的JSON資料，再由前端來計算生成這些HTML，前端的模板再使用HTML，而是使用諸如 Mustache 這樣的模板引擎來渲染HTML
由于HTML的動態生成、模板的獨立與分離，前端應用開始變得復雜，后端的MVC架構進一步影響了前端開發，便誕生了一系列操起的MVC框架，如Backbone、Knockout等，與此同時，在 Ryan Lienhart Dahl等人開發了Node.js之后，前端的軟體功能便不斷地改善：
- 更好的構建工具，誕生了諸如 Grant 和 Gulp 等構建工具
- 包管理，產生了用于前端的包管理工具 Bower 和 Npm
- 模塊管理，也出現了AMD、Common.js 等不同的模塊管理方案
隨著單頁面應用的流行，前后端分離框架也成為行業內的標準實踐，由此，前端進入了一個新的時代，要考慮的內容也越來越多：
- API 管理，采用了諸如 Swagger 的 API 管理工具，各式的 Mock Server 也成為標準實踐，
- 大前端，由前端來開發跨平臺移動應用框架，采用諸如 Ionic、React Native、Flutter 等框架，
- 組件化，前端應用從此由一個個細小的組件結合而成，而不再是一個大的頁面組件，
系統變得越來越復雜，架構在前端的作用也變得越來越重要，MVC 滿足不了開發人員的需求，于是采用了組件化架構，而組件化 + MV 也無法應對大型的前端應用，微前端便又出現在我們的面前，它解決了以下問題：
- 跨框架，在一個頁面上運行，可以同時使用多個前端框架，
- 應用拆分，將一個復雜的應用拆解為多個微小的應用，類似于微服務，
- 遺留系統遷移，讓舊的前端框架，可以直接嵌入現有的應用運行，
復雜的前端應用發展了這么久，也出現了一系列需要演進的應用：考慮重寫、遷移、重構，等等，
本文由博客一文多發平臺 OpenWrite 發布！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/21700.html
標籤：JavaScript
上一篇：node日志管理 / pm2-logrotate-ext日志管理
下一篇：Chrome性能調優技巧