vue學習筆記-01-前端的發展歷史（從后端到前端，再到前后端分離，再到全棧）

??這篇文章是博主在看vue-前端發展簡史的時候做的筆記，以供后續學習復習

文章目錄

• vue學習筆記-01-前端的發展歷史（從后端到前端，再到前后端分離，再到全棧）
• 1.后端為主的mvc時代
• 2.基于ajax帶來的spa時代
• 3.前端為主的mv*時代
• 4.node js帶來的全棧時代
• 5.總結

1.后端為主的mvc時代

springmvc流程圖

優點

• 一個很好的開發模式，降低代碼的耦合，從架構上能讓開發者明白代碼應該寫在哪里，為了讓view更純粹，可以使用thymeleaf，freemarker等模板引擎，使模板里面無法寫入java代碼，讓前后端分工更加清晰

缺點

• 前端開發重度依賴開發環境，開發效率底下，這種架構下，有兩種協同模式，
  • 前端寫demo，寫好后讓后端套模板，感覺像是前端寫好靜態頁面，然后將頁面交給后端，后端套成jsp，渲染數據啥的，很麻煩，套完了還需要前端確定，溝通成本挺大的
  • 前端負責瀏覽器端的所有開發和服務器端的view層模板開發，好處是ui相關的代碼都是前端寫，后端不用關注，不足就是前端需要重度綁定后端環境，環境成為影響前端開發的重要因素
• 前端指責糾纏不清，模板引擎功能屌，依舊可以通過上下文變量來實現各種業務邏輯，只要前端弱勢一些，就會被后端要求在模板層寫出不少業務代碼**，還有個重要的是灰色地帶controller層，這個層是用來實現頁面路由的，而這個頁面路由本來應該是前端所關注的，但是卻是由后端來實現的223**。此外controller本身也跟model糾纏不清，讓人看了咬牙的業務代碼經常出現controller層，坑爹。不過這些問題不能全部歸于程序員的素養，不然jsp就夠了223
• 對前端發揮的局限性，性能優化之在前端做，空間非常有限，于是經常要后端來合作，但是由于后端框架限制，很難用comet，bigpipe等技術方案來優化性能

2.基于ajax帶來的spa時代

??2005年-》ajax-》異步javascrip和xml被正式提出，js王者歸來223（在這之前js都是在網頁上貼狗皮藥膏的223），于是開啟了spa（single page application）單頁面應用時代時代。

優點

??前端后端分工非常清晰，前后端關鍵協作點是ajax接口，看起來很美妙，但是回過頭看看的話這和jsp差別不大，復雜度從服務器端的jsp里面移到了瀏覽器的js，使得瀏覽器變得很復雜，類似springmvc，這個時候開始出現瀏覽器端的分層架構。

缺點

• 前后端接口的約定：如果后端接口一塌糊涂，或者說后端業務模型不夠穩定，那么前端開發會很痛苦。不少團隊也有類似嘗試，通過接口規則，接口平臺等方式來做，有了和后端一起沉淀的接口規則，還可以用來模擬數據，使得前后端可以在約定接口后實現高效并行開發
• 前端開發的復雜度控制：spa應用大多以交互型為主，js代碼超過十萬行很正常（草），大量的js代碼組織，與view層的綁定等，都不是容易的事。

3.前端為主的mv*時代

• mvc（同步通信為主）：model，view，controller
• mvp（異步通訊）：model，view，presenter
• mvvm（異步通信為主）：model，view，viewModel

大前端時代：后端：輕松

? 為了降低前端開發復雜度，涌現了大量的前端框架，比如angular js，react，vue js，ember js等，這些框架總的原則是先按模型分層，比如templates，controllers，model，然后再在層內做切分如下圖：

優點

• 前后端職責清晰：前端工作在瀏覽器端，后端工作在服務器端，清晰的分工，可以讓開發并行，測試數據的模擬不難，前端可以本地開發，后端則可以專注于業務邏輯的處理，輸出用resful等接口
• 前端開發的復雜度可控：前端代碼很重，但合理的分層，讓前端代碼能各司其職，這一塊值得贊賞，簡單如模板的特性選擇，就有很多研究，并非越強大越好，限制什么，留下哪些自由，代碼如何組織，所有的一切設計，都值得話一本書講講。
• 部署相對獨立，可以快速改善產品體驗

缺點

• 代碼不能復用，比如后端依舊要對數據做各種校驗，校驗邏輯無法復用瀏覽器端的代碼，如果可以復用，那么后端的數據校驗相對簡單化。
• 全異步，對seo不利，往往還要做服務器同步渲染的降級方案
• 性能并非最佳，特別是移動互聯網的環境下
• spa不能滿足所有需求，依舊存在大量多頁面應用程序，url design 依舊需要后端配合，前端無法完全掌控

4.node js帶來的全棧時代

? 前端為主的MV*模式解決了很多很多問題，但如上所述，依舊存在不少不足之處。隨著NodeJS的興起，JavaScript 開始有能力運行在服務端。這意味著可以有一種新的研發模式:

在這種研發模式下，前后端的職責很清晰。對前端來說，兩個UI層各司其職:

• Front-end UI layer處理瀏覽器層的展現邏輯。通過CSS渲染樣式，通過JavaScript添加交互功能，HTML的生成也可以放在這層，具體看應用場景。
• Back-end UI layer處理路由、模板、數據獲取、Cookie等。通過路由，前端終于可以自主把控URL Design,這樣無論是單頁面應用還是多頁面應用，前端都可以自由調控。后端也終于可以擺脫對展現的強關注，轉而可以專心于業務邏輯層的開發。

??通過Node, Web Server層也是JavaScript代碼，這意味著部分代碼可前后復用，需要SEO
的場景可以在服務端同步渲染，于異步請求太多導致的性能問題也可以通過服務端來緩解。前一-種模
式的不足，通過這種模式幾乎都能完美解決掉。
??與JSP模式相比，全棧模式看起來是一種回歸，也的確是-種向原始開發模式的回歸，不過是一種螺旋上升式的回歸。

基于NodeJS的全棧模式，依舊面臨很多挑戰:

• 要前端對服務端編程有更進一步的認識。比如TCP/IP等網絡知識的掌握。

• NodeJS層與Java層的高效通信。NodeJS模式下，都在服務器端，RESTful HTTP通信未必高
  效，通過SOAP等方式通信更高效。一 切需要在驗證中前行。
  對部署、運維層面的熟練了解，需要更多知識點和實操經驗。

• 大量歷史遺留問題如何過渡。這可能是最大最大的阻力。

5.總結

? 綜上所述，模式也好，技術也好，沒有好壞優劣之分，只有合適不合適，前后端分離的開發思想主要是基于SOC（關注度分離原則），上面幾種模式，都是讓前后端職責更加清晰，分工更加高效合理

總結

以上是生活随笔為你收集整理的vue学习笔记-01-前端的发展历史（从后端到前端，再到前后端分离，再到全栈）的全部內容，希望文章能夠幫你解決所遇到的問題。

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