學(xué)習(xí)Vue之前-快速了解前端體系和前后端分離的演變史

前端體系

想要成為真正的互聯(lián)網(wǎng)Java全棧工程師剧辐，前端是繞不開的一門必修課。
接下來我們就來認(rèn)識(shí)前端蜘醋、了解前端胁塞、掌握前端，為成為互聯(lián)網(wǎng)Java全棧工程師而前進(jìn)压语。

前端三要素

前端三要素為：

  • HTML（結(jié)構(gòu)）：超文本標(biāo)記語言（Hyper Text Markup Language）啸罢，決定網(wǎng)頁的結(jié)構(gòu)和內(nèi)容。
  • CSS（表現(xiàn)）：層疊樣式表（Cascading Style Sheets）胎食，設(shè)定網(wǎng)頁的表現(xiàn)樣式扰才。
  • Javascript（行為）：是一種弱類型腳本語言，其源代碼不需經(jīng)過編譯厕怜，而是由瀏覽器解釋運(yùn)行衩匣，用于控制網(wǎng)頁的行為。

結(jié)構(gòu)層（HTML）比較簡單粥航，省略琅捏。

表現(xiàn)層（CSS）

CSS 層疊樣式表是一門標(biāo)記語言，并不是編程語言递雀，因此不可以自定義變量柄延，不可以引用等，換句話說就是不具備任何語法支持缀程。
它的主要缺陷如下：

  • 語法不夠強(qiáng)大搜吧，例如無法嵌套書寫市俊，導(dǎo)致模塊化開發(fā)中需要書寫很多重復(fù)的選擇器。
  • 沒有變量和合理的樣式復(fù)用機(jī)制滤奈，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出秕衙，導(dǎo)致難以維護(hù)。

因?yàn)檫@些缺陷導(dǎo)致我們?cè)诠ぷ髦袩o端增加了許多工作量僵刮。為了解決這個(gè)問題，前端開發(fā)人員會(huì)使用一種稱之為CSS 預(yù)處理器的工具鹦牛，提供 CSS 缺失的樣式層復(fù)用機(jī)制搞糕、減少冗余代碼，提高樣式代碼的可維護(hù)性曼追。大大提高了前端在樣式上的開發(fā)效率窍仰。
什么是CSS預(yù)處理器？
CSS 預(yù)處理器定義了一種新的語言礼殊，其基本思想是驹吮，用一種專門的編程語言，為 CSS 增加了一些編程的特性晶伦，將 CSS 作為目標(biāo)生成文件碟狞，然后開發(fā)者就只要使用這種語言進(jìn)行 CSS 的編碼工作。
簡單來說就是：用一種專門的編程語言婚陪，進(jìn)行 Web 頁面樣式設(shè)計(jì)族沃，再通過編譯器轉(zhuǎn)化為正常的 CSS 文件，以供項(xiàng)目使用泌参。
常用的CSS預(yù)處理器

  • SASS脆淹，基于 Ruby，通過服務(wù)端處理沽一，功能強(qiáng)大盖溺。解析效率高。需要學(xué)習(xí) Ruby 語言铣缠，上手難度高于LESS烘嘱。
  • LESS，基于 NodeJS攘残，通過客戶端處理拙友，使用簡單。功能比 SASS 簡單歼郭，解析效率也低于 SASS遗契，但在實(shí)際開發(fā)中足夠了，所以后臺(tái)人員一般建議使用 LESS病曾。
    一些大型的網(wǎng)站每到一些節(jié)日的時(shí)候都有一套不一樣的皮膚牍蜂。其實(shí)是因?yàn)樗麄冊(cè)诤笈_(tái)已經(jīng)編寫好了多套主題漾根，要使用的時(shí)候通過LESS一鍵切換。

行為層（Javascript）

JavaScript 一門弱類型腳本語言鲫竞，其源代碼在發(fā)往客戶端運(yùn)行之前不需經(jīng)過編譯辐怕，而是將文本格式的字符代碼發(fā)送給瀏覽器由瀏覽器解釋運(yùn)行。
Native原生JS開發(fā)
原生JS開發(fā)从绘，也就是讓我們按照ECMAScript標(biāo)準(zhǔn)的開發(fā)方式寄疏，簡稱是 ES，特點(diǎn)是支持所有瀏覽器僵井。ES 標(biāo)準(zhǔn)已發(fā)布如下版本：

  • ES3
  • ES4（內(nèi)部陕截，未正式發(fā)布）
  • ES5（全瀏覽器支持）
  • ES6（常用，當(dāng)前主流版本批什，webpack打包成為ES5支持）
  • ES7
  • ES8
  • ES9（草案階段）

從ES6開始每年發(fā)布一個(gè)版本农曲，以年份作為名稱，區(qū)別就是逐步增加新特性驻债。
微軟的標(biāo)準(zhǔn)：TypeScript
TypeScript 是一種由微軟開發(fā)的自由和開源的編程語言乳规。它是 JavaScript 的一個(gè)超集，而且本質(zhì)上向這個(gè)語言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊毯夏拧Ｓ砂驳滤埂ず査共瘢–#暮的、Delphi、 TypeScript 之父淌实，.NET創(chuàng)立者）主導(dǎo)青扔。

Javascript框架

jQuery

大家最熟知的Javascript庫。優(yōu)點(diǎn)是簡化了 DOM 操作翩伪，缺點(diǎn)是DOM 操作太頻繁微猖，影響前端性能。在前端眼里使用它僅僅是為了兼容 IE6缘屹、7凛剥、8。

Angular

Google收購的前端框架轻姿，由一群Java程序員開發(fā)犁珠，其特點(diǎn)是將后臺(tái)的MVC模式搬到了前端并增加了模塊化開發(fā)的理念，與微軟合作互亮，采用TypeScript 語法開發(fā)犁享。對(duì)后臺(tái)程序員友好，對(duì)前端程序員不太友好豹休。最大的缺點(diǎn)是版本迭代不合理炊昆，如：1代 -> 2代，除了名字，基本就是兩個(gè)東西凤巨，已推出了Angular6视乐。

React

Facebook出品，一款高性能的 JS 前端框架敢茁。特點(diǎn)是提出了新概念虛擬 DOM用于減少真實(shí)DOM操作佑淀，在內(nèi)存中模擬DOM操作，有效的提升了前端渲染效率彰檬，缺點(diǎn)是使用復(fù)雜伸刃，因?yàn)樾枰~外學(xué)習(xí)一門JSX語言。

Vue

一款漸進(jìn)式Javascript 框架逢倍，所謂漸進(jìn)式就是逐步實(shí)現(xiàn)新特性的意思奕枝，如實(shí)現(xiàn)模塊化開發(fā)、路由瓶堕、狀態(tài)管理等新特性。
其特點(diǎn)是綜合了 Angular（模塊化） 和 React（虛擬 DOM） 的優(yōu)點(diǎn)症歇。

Axios

前端通信框架郎笆。因?yàn)閂ue 的邊界很明確，就是為了處理 DOM忘晤，所以并不具備通信能力宛蚓，此時(shí)就需要額外使用一個(gè)通信框架與服務(wù)器交互，當(dāng)然也可以直接選擇使用jQuery提供的 AJAX 通信功能设塔。

Javascript構(gòu)建工具

  • Babel：JS 編譯工具凄吏，主要用于瀏覽器不支持的 ES 新特性，比如用于編譯TypeScript闰蛔。
  • WebPack：模塊打包器痕钢，主要作用是打包、壓縮序六、合并及按序加載任连。

前端需要掌握的后端技術(shù)

前端人員為了方便開發(fā)也需要掌握一定的后端技術(shù)，但Java 后臺(tái)人員知道后臺(tái)知識(shí)體系極其龐大復(fù)雜例诀，所以為了方便前端人員開發(fā)后臺(tái)應(yīng)用随抠，就出現(xiàn)了Node.js這樣的技術(shù)。
Node.js的作者已經(jīng)聲稱放棄 Node.js（可能是因?yàn)榧軜?gòu)做的不好再加上笨重的 node_modules讓作者不爽了）繁涂，并且開始開發(fā)全新架構(gòu)的Deno拱她。
既然是后臺(tái)技術(shù)，那肯定也需要框架和項(xiàng)目管理工具扔罪，Node.js框架及項(xiàng)目管理工具如下：

  • Express：Node.js框架秉沼。
  • Koa：Express簡化版。
  • NPM：項(xiàng)目綜合管理工具，類似于Maven氧猬。
  • YARN：NPM的替代方案背犯，類似于Maven和Gradle的關(guān)系。

UI框架

常用框架

  • Ant-Design：阿里巴巴出品盅抚，基于 React 的 UI 框架漠魏。
  • ElementUI、iview妄均、ice：餓了么出品柱锹，基于 Vue 的 UI 框架。
  • Bootstrap：Twitter 推出的一個(gè)用于前端開發(fā)的開源工具包丰包。
  • AmazeUI：又叫“妹子 UI”禁熏，一款 HTML5 跨屏前端框架。
  • Layui：輕量級(jí)框架（Layer）邑彪。

iView

iView是一個(gè)強(qiáng)大的基于 Vue 的 UI 庫瞧毙，有很多實(shí)用的基礎(chǔ)組件比ElementUI的組件更豐富，主要服務(wù)于PC界面的中后臺(tái)產(chǎn)品寄症。使用單文件的Vue組件化開發(fā)模式宙彪，基于npm + webpack + babel開發(fā)，支持ES2015（ES6）高質(zhì)量有巧、功能豐富释漆、友好的 API ，自由靈活地使用空間篮迎。
官網(wǎng)地址： https://www.iviewui.com/
Github： https://github.com/TalkingData/iview-weapp
iview-admin： https://github.com/iview/iview-admin
備注：屬于前端主流框架男图，選型時(shí)可考慮使用，主要特點(diǎn)是移動(dòng)端支持較多甜橱。

ElementUI

ElementUI是餓了么前端開源維護(hù)的Vue UI組件庫逊笆，組件齊全，基本涵蓋后臺(tái)所需的所有組件岂傲，文檔講解詳細(xì)览露，例子也很豐富。主要用于開發(fā)PC端的頁面譬胎，是一個(gè)質(zhì)量比較高的Vue UI組件庫差牛。
官網(wǎng)地址：http://element-cn.eleme.io/#/zh-CN
Github：https://github.com/ElementUI/element-starter
vue-element-admin：https://github.com/PanJiaChen/vue-element-admin
備注：屬于前端主流框架，選型時(shí)可考慮使用堰乔，主要特點(diǎn)是桌面端支持較多偏化。

ICE

飛冰是阿里巴巴團(tuán)隊(duì)基于React/Angular/Vue 的中后臺(tái)應(yīng)用解決方案，在阿里巴巴內(nèi)部镐侯，已經(jīng)有270多個(gè)來自幾乎所有BU 的項(xiàng)目在使用侦讨。飛冰包含了一條從設(shè)計(jì)端到開發(fā)端的完整鏈路驶冒，幫助用戶快速搭建屬于自己的中后臺(tái)應(yīng)用。
官網(wǎng)地址：https://alibaba.github.io/ice
Github：https://github.com/alibaba/ice
備注：主要組件還是以React 為主韵卤，截止2019年2月17日更新博客前對(duì) Vue 的支持還不太完善骗污，目前尚處于觀望階段。

VantUI

VantUI是有贊前端團(tuán)隊(duì)基于有贊統(tǒng)一的規(guī)范實(shí)現(xiàn)的Vue組件庫沈条，提供了一整套UI基礎(chǔ)組件和業(yè)務(wù)組件需忿。通過VantUI，可以快速搭建出風(fēng)格統(tǒng)一的頁面蜡歹，提升開發(fā)效率屋厘。
官網(wǎng)地址：https://youzan.github.io/vant/#/zh-CN/intro
Github：https://github.com/youzan

AtUI

AtUI是一款基于Vue 2.x的前端UI組件庫，主要用于快速開發(fā)PC網(wǎng)站產(chǎn)品月而。 它提供了一套npm + webpack + babel前端開發(fā)工作流程汗洒，CSS樣式獨(dú)立，即使采用不同的框架實(shí)現(xiàn)都能保持統(tǒng)一的UI風(fēng)格父款。
官網(wǎng)地址：https://at-ui.github.io/at-ui/#/zh
Github：https://github.com/at-ui/at-ui

CubeUI

CubeUI是滴滴團(tuán)隊(duì)開發(fā)的基于Vue.js實(shí)現(xiàn)的精致移動(dòng)端組件庫溢谤。支持按需引入和后編譯，輕量靈活憨攒，擴(kuò)展性強(qiáng)世杀，可以方便地基于現(xiàn)有組件實(shí)現(xiàn)二次開發(fā)。
官網(wǎng)地址：https://didi.github.io/cube-ui/#/zh-CN
Github：https://github.com/didi/cube-ui/

Flutter

Flutter是谷歌的移動(dòng)端UI框架浓恶，可在極短的時(shí)間內(nèi)構(gòu)建Android和iOS上高質(zhì)量的原生級(jí)應(yīng)用。Flutter可與現(xiàn)有代碼一起工作, 它被世界各地的開發(fā)者和組織使用, 并且Flutter是免費(fèi)和開源的结笨。
官網(wǎng)地址：https://flutter.dev/docs
Github：https://github.com/flutter/flutter
備注：Google出品包晰，主要特點(diǎn)是快速構(gòu)建原生APP應(yīng)用程序，如做混合應(yīng)用該框架為必選框架炕吸。

Ionic

Ionic 既是一個(gè)CSS框架也是一個(gè)Javascript UI庫伐憾，Ionic是目前最有潛力的一款HTML5手機(jī)應(yīng)用開發(fā)框架。通過SASS構(gòu)建應(yīng)用程序赫模，它提供了很多UI組件來幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用树肃。它使用Javascript MVVM框架和AngularJS/Vue來增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定瀑罗，使用它成為Web和移動(dòng)開發(fā)者的共同選擇胸嘴。
官網(wǎng)地址：https://ionicframework.com/
官網(wǎng)文檔：https://ionicframework.com/docs/
Github：https://github.com/ionic-team/ionic

mpvue

mpvue 是美團(tuán)開發(fā)的一個(gè)使用Vue.js開發(fā)小程序的前端框架，目前支持微信小程序斩祭、百度智能小程序劣像，頭條小程序和支付寶小程序。 框架基于Vue.js摧玫，修改了的運(yùn)行時(shí)框架runtime 和代碼編譯器compiler實(shí)現(xiàn)耳奕，使其可運(yùn)行在小程序環(huán)境中，從而為小程序開發(fā)引入了Vue.js開發(fā)體驗(yàn)。
官網(wǎng)地址：http://mpvue.com/
Github：https://github.com/Meituan-Dianping/mpvue
備注：完備的Vue開發(fā)體驗(yàn)屋群，并且支持多平臺(tái)的小程序開發(fā)，推薦使用。

WeUI

WeUI是一套同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫遭商，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁和微信小程序量身設(shè)計(jì)宪巨，令用戶的使用感知更加統(tǒng)一。包含 button纸肉、cell溺欧、dialog、toast柏肪、article姐刁、icon 等各式元素。
官網(wǎng)地址：https://weui.io/
Github：https://github.com/weui/weui.git
注：以上知識(shí)點(diǎn)已將 WebApp 開發(fā)所需技能全部梳理完畢烦味。

前后端分離的演變史

后端為主的MVC時(shí)代

為了降低開發(fā)的復(fù)雜度聂使，以后端為出發(fā)點(diǎn)，比如：Struts谬俄、SpringMVC 等框架的使用柏靶，就是后端的 MVC時(shí)代。
以SpringMVC流程為例溃论，其運(yùn)行流程如下圖所示屎蜓。


SpringMVC運(yùn)行流程
  • 用戶發(fā)送請(qǐng)求到前端控制器DispatcherServlet。
  • 前端控制器請(qǐng)求HandlerMapping查找Handler钥勋，可以根據(jù)xml配置炬转、注解進(jìn)行查找。
  • 處理器映射器HandlerMapping向前端控制器返回Handler算灸。
  • 前端控制器調(diào)用處理器適配器去執(zhí)行Handler扼劈。
  • 處理器適配器去執(zhí)行Handler。
  • Handler執(zhí)行完成給適配器返回ModelAndView菲驴。
  • 處理器適配器向前端控制器返回ModelAndView荐吵，ModelAndView是SpringMVC框架的一個(gè)底層對(duì)象，包括Model和View赊瞬。
  • 前端控制器請(qǐng)求視圖解析器去對(duì)視圖進(jìn)行解析先煎，根據(jù)邏輯視圖名解析成真正的視圖（JSP）。
  • 視圖解析器向前端控制器返回View巧涧。
  • 前端控制器進(jìn)行視圖渲染榨婆，視圖渲染將模型數(shù)據(jù)（在ModelAndView對(duì)象中）填充到request域。
  • 前端控制器向用戶響應(yīng)結(jié)果褒侧。

優(yōu)點(diǎn)
MVC 是一個(gè)非常好的協(xié)作模式良风，能夠有效降低代碼的耦合度谊迄，從架構(gòu)上能夠讓開發(fā)者明白代碼應(yīng)該寫在哪里。為了讓 View 更純粹烟央，還可以使用 Thymeleaf统诺、Freemarker 等模板引擎，使模板里無法寫入Java代碼疑俭，讓前后端分工更加清晰粮呢。
缺點(diǎn)

  • 前端開發(fā)重度依賴開發(fā)環(huán)境，開發(fā)效率低
    這種架構(gòu)下钞艇，前后端協(xié)作有兩種模式：
    1啄寡、第一種是前端寫DEMO，寫好后哩照，讓后端去套模板挺物。好處是DEMO可以本地開發(fā)，很高效飘弧。不足是還需要后端套模板识藤，有可能套錯(cuò)，套完后還需要前端確定次伶，來回溝通調(diào)整的成本比較大痴昧。
    2、另一種協(xié)作模式是前端負(fù)責(zé)瀏覽器端的所有開發(fā)和服務(wù)器端的View 層模板開發(fā)冠王。好處是 UI 相關(guān)的代碼都是前端去寫就好赶撰，后端不用太關(guān)注，不足就是前端開發(fā)重度綁定后端環(huán)境柱彻，環(huán)境成為影響前端開發(fā)效率的重要因素豪娜。
  • 前后端職責(zé)糾纏不清
    模板引擎功能強(qiáng)大，依舊可以通過拿到的上下文變量來實(shí)現(xiàn)各種業(yè)務(wù)邏輯绒疗。這樣侵歇，只要前端弱勢(shì)一點(diǎn)骂澄，往往就會(huì)被后端要求在模板層寫出不少業(yè)務(wù)代碼吓蘑。還有一個(gè)很大的灰色地帶是Controller ，頁面路由等功能本應(yīng)該是前端最關(guān)注的坟冲，但卻是由后端來實(shí)現(xiàn)磨镶。 Controller 本身與 Model 往往也會(huì)糾纏不清，業(yè)務(wù)代碼經(jīng)常會(huì)出現(xiàn)在 Controller 層健提。
  • 對(duì)前端發(fā)揮的局限性
    性能優(yōu)化如果只在前端做空間非常有限琳猫，于是我們經(jīng)常需要和后端合作。

注：在這期間（2005 年以前）私痹，包括早期的 JSP脐嫂、PHP 可以稱之為 Web 1.0 時(shí)代统刮。

基于Ajax帶來的SPA時(shí)代

2005年Ajax（Asynchronous JavaScript And XML，異步 JavaScript 和 XML账千，老技術(shù)新用法）被正式提出并開始使用 CDN 作為靜態(tài)資源存儲(chǔ)侥蒙，于是出現(xiàn)了JavaScript 王者歸來（在這之前JS 都是用來在網(wǎng)頁上貼狗皮膏藥廣告的）的 SPA（Single Page Application）單頁面應(yīng)用時(shí)代。
Ajax的運(yùn)行原理如下圖所示匀奏。

Ajax運(yùn)行原理

優(yōu)點(diǎn)
這種模式下鞭衩，前后端的分工非常清晰，前后端的關(guān)鍵協(xié)作點(diǎn)是 Ajax接口娃善÷垩埽看起來是如此美妙，但回過頭來看看的話聚磺，這與 JSP 時(shí)代區(qū)別不大坯台。復(fù)雜度從服務(wù)端的JSP里移到了瀏覽器的 Javascript，瀏覽器端變得很復(fù)雜咧最。類似 Spring MVC捂人，這個(gè)時(shí)代開始出現(xiàn)瀏覽器端的分層架構(gòu)，其架構(gòu)如下圖所示矢沿。
瀏覽器端的分層架構(gòu)

缺點(diǎn)

  • 前后端接口的約定
    如果后端的接口一塌糊涂或者業(yè)務(wù)模型不夠穩(wěn)定滥搭，那么前端開發(fā)會(huì)很痛苦。不少團(tuán)隊(duì)也有類似嘗試捣鲸，通過接口規(guī)則瑟匆、接口平臺(tái)等方式來做。有了和后端一起沉淀的接口規(guī)則栽惶，還可以用來模擬數(shù)據(jù)愁溜，使得前后端可以在約定接口后實(shí)現(xiàn)高效并行開發(fā)。
  • 前端開發(fā)的復(fù)雜度控制
    SPA 應(yīng)用大多以功能交互型為主外厂，JavaScript 代碼過十萬行很正常冕象。大量JS 代碼的組織，與 View 層的綁定等汁蝶，都比較復(fù)雜渐扮。

前端為主的MV*時(shí)代

這里的MV*模式主要指的是以下三種模式：

  • MVC（同步通信為主）：Model、View掖棉、Controller
  • MVP（異步通信為主）：Model墓律、View、Presenter
  • MVVM（異步通信為主）：Model幔亥、View耻讽、ViewModel

為了降低前端開發(fā)復(fù)雜度，涌現(xiàn)了大量的前端框架帕棉，比如： AngularJS 针肥、 React 饼记、 Vue.js 、 EmberJS 等慰枕，這些框架總的原則是先按類型分層握恳，比如 Templates、Controllers捺僻、Models乡洼，然后再在層內(nèi)做切分，如下圖所示匕坯。

SPA組件化

優(yōu)點(diǎn)

  • 前后端職責(zé)很清晰
    前端工作在瀏覽器端束昵，后端工作在服務(wù)端。清晰的分工葛峻，可以讓開發(fā)并行锹雏，測(cè)試數(shù)據(jù)的模擬不難。前端可以本地開發(fā)术奖，后端則可以專注于業(yè)務(wù)邏輯的處理礁遵，輸出 RESTful等接口。
  • 前端開發(fā)的復(fù)雜度可控
    前端代碼很重采记，但合理的分層佣耐，讓前后端代碼能各司其職。
  • 部署相對(duì)獨(dú)立
    可以快速改進(jìn)產(chǎn)品體驗(yàn)唧龄。

缺點(diǎn)

  • 代碼不能復(fù)用兼砖。比如后端依舊需要對(duì)數(shù)據(jù)做各種校驗(yàn)，校驗(yàn)邏輯無法復(fù)用瀏覽器端的代碼既棺。
  • 全異步讽挟，對(duì) SEO 不利。往往還需要服務(wù)端做同步渲染的降級(jí)方案丸冕。
  • 性能并非最佳耽梅，特別是移動(dòng)互聯(lián)網(wǎng)環(huán)境下。
  • SPA 不能滿足所有需求胖烛，依舊存在大量多頁面應(yīng)用眼姐。URL Design 需要后端配合，前端無法完全掌控洪己。

Node.js帶來的全棧時(shí)代

前端為主的 MV* 模式解決了很多很多問題妥凳，但如上所述竟贯，依舊存在不少不足之處答捕。隨著 Node.js 的興起，Javascript 開始有能力運(yùn)行在服務(wù)端屑那，這意味著可以有一種新的研發(fā)模式拱镐，如下圖所示艘款。


Node.js全棧模式

在這種研發(fā)模式下，前后端的職責(zé)很清晰沃琅。對(duì)前端來說哗咆，兩個(gè) UI 層各司其職：

  • Front-end UI layer處理瀏覽器層的展現(xiàn)邏輯。通過 CSS 渲染樣式益眉，通過Javascript 添加交互功能晌柬，HTML 的生成也可以放在這層，依據(jù)應(yīng)用場(chǎng)景而定郭脂。
  • Back-end UI layer處理路由年碘、模板、數(shù)據(jù)獲取展鸡、Cookie 等屿衅。通過路由，前端終于可以自主把控URL Design莹弊，這樣無論是單頁面應(yīng)用還是多頁面應(yīng)用涤久，前端都可以自由調(diào)控。后端也終于可以擺脫對(duì)展現(xiàn)的強(qiáng)關(guān)注忍弛，轉(zhuǎn)而可以專心于業(yè)務(wù)邏輯層的開發(fā)响迂。

通過 Node.js，Web Server 層也是 Javascript 代碼细疚，這意味著部分代碼可前后復(fù)用栓拜，需要 SEO 的場(chǎng)景可以在服務(wù)端同步渲染，由于異步請(qǐng)求太多導(dǎo)致的性能問題也可以通過服務(wù)端來緩解惠昔。前一種模式的不足幕与，通過這種模式也能完美解決。
與 JSP 模式相比镇防，全棧模式是一種向原始開發(fā)模式的回歸啦鸣，不過是一種螺旋上升式的回歸。
基于 NodeJS 的全棧模式来氧，依舊面臨很多挑戰(zhàn)：

  • 需要前端對(duì)服務(wù)端編程有更進(jìn)一步的認(rèn)識(shí)诫给。比如 TCP/IP 等網(wǎng)絡(luò)知識(shí)的掌握。
  • NodeJS 層與 Java 層的高效通信啦扬。Node.js模式下中狂，都在服務(wù)器端，RESTful HTTP 通信未必高效扑毡，通過 SOAP 等方式通信更高效胃榕。一切需要在驗(yàn)證中前行。
  • 對(duì)部署瞄摊、運(yùn)維層面的熟練了解勋又，需要更多知識(shí)點(diǎn)和實(shí)操經(jīng)驗(yàn)苦掘。
  • 大量歷史遺留問題如何過渡？這可能是最大最大的阻力楔壤。

小結(jié)

綜上所述鹤啡，不管是模式還是技術(shù)，沒有好壞優(yōu)劣之分蹲嚣，只有適合不適合递瑰。前后分離的開發(fā)思想主要是基于 SoC （關(guān)注度分離原則），以上提到的種種模式隙畜，都是為了讓前后端的職責(zé)更清晰泣矛，分工更合理高效。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末禾蚕，一起剝皮案震驚了整個(gè)濱河市您朽，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌换淆，老刑警劉巖哗总，帶你破解...
    沈念sama閱讀 218,284評(píng)論 6贊 506
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異倍试，居然都是意外死亡讯屈，警方通過查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評(píng)論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門县习，熙熙樓的掌柜王于貴愁眉苦臉地迎上來涮母，“玉大人，你說我怎么就攤上這事躁愿∨驯荆” “怎么了？”我有些...
    開封第一講書人閱讀 164,614評(píng)論 0贊 354
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵彤钟，是天一觀的道長来候。 經(jīng)常有香客問我，道長逸雹，這世上最難降的妖魔是什么营搅？ 我笑而不...
    開封第一講書人閱讀 58,671評(píng)論 1贊 293
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮梆砸，結(jié)果婚禮上转质，老公的妹妹穿的比我還像新娘。我一直安慰自己帖世，他們只是感情好休蟹，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,699評(píng)論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般鸡挠。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上搬男，一...
    開封第一講書人閱讀 51,562評(píng)論 1贊 305
  • 城市分裂傳說
    那天拣展，我揣著相機(jī)與錄音，去河邊找鬼缔逛。 笑死备埃，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的褐奴。 我是一名探鬼主播按脚，決...
    沈念sama閱讀 40,309評(píng)論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼敦冬！你這毒婦竟也來了辅搬？” 一聲冷哼從身側(cè)響起，我...
    開封第一講書人閱讀 39,223評(píng)論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對(duì)情侶失蹤脖旱，失蹤者是張志新（化名）和其女友劉穎堪遂，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體萌庆，經(jīng)...
    沈念sama閱讀 45,668評(píng)論 1贊 314
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡溶褪，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,859評(píng)論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了践险。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片猿妈。...
    茶點(diǎn)故事閱讀 39,981評(píng)論 1贊 348
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖巍虫，靈堂內(nèi)的尸體忽然破棺而出彭则，到底是詐尸還是另有隱情，我是刑警寧澤占遥，帶...
    沈念sama閱讀 35,705評(píng)論 5贊 347
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布贰剥，位于F島的核電站，受9級(jí)特大地震影響筷频，放射性物質(zhì)發(fā)生泄漏蚌成。R本人自食惡果不足惜，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,310評(píng)論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一凛捏、第九天 我趴在偏房一處隱蔽的房頂上張望担忧。 院中可真熱鬧，春花似錦坯癣、人聲如沸瓶盛。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評(píng)論 0贊 22
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽惩猫。三九已至芝硬，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間轧房，已是汗流浹背拌阴。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評(píng)論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留奶镶，地道東北人迟赃。 一個(gè)月前我還...
    沈念sama閱讀 48,146評(píng)論 3贊 370
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長得像厂镇，于是被迫代替她去往敵國和親纤壁。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,933評(píng)論 2贊 355

推薦閱讀更多精彩內(nèi)容

  • 學(xué)習(xí)完整課程請(qǐng)移步 互聯(lián)網(wǎng) Java 全棧工程師 本節(jié)視頻 【視頻】Vue 漸進(jìn)式 JavaScript 框架-了...
    擼帝閱讀 1,372評(píng)論 0贊 20
  • 基于Vue的一些資料 內(nèi)容 UI組件 開發(fā)框架 實(shí)用庫 服務(wù)端 輔助工具 應(yīng)用實(shí)例 Demo示例 element★...
    嘗了又嘗閱讀 1,151評(píng)論 0贊 1
  • 為什么需要前后分離 后端為主的 MVC 時(shí)代 為了降低開發(fā)的復(fù)雜度捺信，以后端為出發(fā)點(diǎn)酌媒，比如：Struts、Sprin...
    索倫x閱讀 736評(píng)論 0贊 3
  • 2018.2.13 今天應(yīng)該是貼春聯(lián)的日子吧
    謙謙闋歌閱讀 91評(píng)論 0贊 0
  • 今天去朋友家看望朋友的小兒子迄靠。已經(jīng)很久沒見過了馍佑，在他剛出生幾個(gè)月的時(shí)候見到。后來他就回老家梨水，由爺爺奶奶帶著拭荤。這次是...
    H_韓閱讀 25評(píng)論 0贊 0