前端架構演進及主流UI

@

目錄

• 前端三要素
• JavaScript 架構
• NodeJs
• 常用UI架構
• 前後端分離的演進
• MVVM模式
• 總結

前端演進到現在，各種技術架構已經層出不窮了，作為一名開發少不了要幹一些前端的活兒，那麼整個前端的架構體系是怎樣的呢？讓我們一起來了解回顧一下

• HTML(結構):超文本标記語言(Hyper Text Markup Language)，決定網頁的結構和内容
• CSS(表現):層疊樣式表(Cascading Style Sheets)，設定網頁的表現樣式
• JavaScript(行為):是一種弱類型腳本語言，其源代碼不需經過編譯，而是由浏覽器解釋運作， 用于控制網頁的行為

HTML 稱為超文本标記語言，是一種辨別性的語言。它通過一系列标簽組合，組成一個個不同結構的頁面！關于html标簽的學習可以去菜鳥教程學習，此處不再贅述！

CSS層疊樣式表 也是一門标記語言，并不是程式設計語言，是以不可以自定義變量，不可以引用等，換句話說

就是不具備任何文法支援，它主要缺陷如下：

• 文法不夠強大，比如無法嵌套書寫，導緻子產品化開發中需要書寫很多重複的選擇器;
• 沒有變量和合理的樣式複用機制，使得邏輯上相關的屬性值必須以字面量的形式重複輸出，導緻難 以維護;

這就導緻了我們在工作中無端增加了許多工作量。為了解決這個問題，前端開發人員會使用一種稱之為 【CSS 預處理器】 的工具，提供 CSS 缺失的樣式層複用機制、減少備援代碼，提高樣式代碼的可維護 性。大大提高了前端在樣式上的開發效率。

什麼是CSS 預處理器呢？

CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的程式設計語言，為 CSS 增加了一些程式設計的 特性，将 CSS 作為目标生成檔案，然後開發者就隻要使用這種語言進行 CSS 的編碼工作。轉化成通俗易 懂的話來說就是“用一種專門的程式設計語言，進行 Web 頁面樣式設計，再通過編譯器轉化為正常的 CSS 文 件，以供項目使用”。

常用的 CSS 預處理器有哪些？

• SASS:基于 Ruby，通過服務端處理，功能強大。解析效率高。需要學習 Ruby 語言，上手難度高于 LESS。
• LESS:基于 NodeJS，通過用戶端處理，使用簡單。功能比 SASS 簡單，解析效率也低于 SASS，但在實際開發中足夠了，是以我們背景人員如果需要的話，建議使用 LESS。

JavaScript 一門弱類型腳本語言，其源代碼在發往用戶端運作之前不需經過編譯，而是将文本格式的字 符代碼發送給浏覽器由浏覽器解釋運作。

Native 原生 JS 開發

原生 JS 開發，也就是讓我們按照 【ECMAScript】 标準的開發方式，簡稱是 ES，特點是所有浏覽器都支援。

ES 标準已釋出如下版本：

• ES3
• ES4(内部，未正式釋出)
• ES5(全浏覽器支援)
• ES6(常用，目前主流版本:webpack打包成為ES5支援!)
• ES7
• ES8
• ES9(草案階段)

從 ES6 開始每年釋出一個版本，以年份作為名稱，差別就是逐漸增加新特性。

TypeScript 微軟的标準

TypeScript 是一種由微軟開發的自由和開源的程式設計語言。它是 JavaScript 的一個超集，而且本質上向這 個語言添加了可選的靜态類型和基于類的面向對象程式設計。由安德斯·海爾斯伯格(C#、Delphi、 TypeScript 之父;.NET 創立者)主導。

1.jQuery庫

大家最熟知的 JavaScript庫，優點是簡化了 DOM 操作，缺點是 DOM 操作太頻繁，影響前端性能;在 前端眼裡使用它僅僅是為了相容 IE6、7、8;

2.Angular庫

Google 收購的前端架構，由一群 Java 程式員開發，其特點是将背景的 MVC 模式搬到了前端并增加了模 塊化開發的理念，與微軟合作，采用 TypeScript 文法開發;對背景程式員友好，對前端程式員不太友 好;最大的缺點是版本疊代不合理(如:1代 -> 2代，除了名字，基本就是兩個東西;已推出了 Angular6)

3.React

Facebook 出品，一款高性能的 JS 前端架構;特點是提出了新概念 【虛拟 DOM】 用于減少真實 DOM 操作，在記憶體中模拟 DOM 操作，有效的提升了前端渲染效率;缺點是使用複雜，因為需要額外學習一 門 【JSX】 語言;

4.Vue

一款漸進式 JavaScript 架構，所謂漸進式就是逐漸實作新特性的意思，如實作子產品化開發、路由、狀态 管理等新特性。

其特點是綜合了 Angular(子產品化) 和 React(虛拟 DOM) 的優點;

5.Axios

前端通信架構;因為 Vue 的邊界很明确，就是為了處理 DOM，是以并不具備通信能力，此時就需要額 外使用一個通信架構與伺服器互動;當然也可以直接選擇使用 jQuery 提供的 A JAX 通信功能;

JavaScript 建構工具

• Babel:JS 編譯工具，主要用于浏覽器不支援的 ES 新特性，比如用于編譯 TypeScript
• WebPack:子產品打包器，主要作用是打包、壓縮、合并及按序加載

Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運作環境,說白了就是運作在服務端的JavaScript;

前端人員為了友善開發也需要掌握一定的後端技術，但我們 Java 背景人員知道背景知識體系極其龐大複 雜，是以為了友善前端人員開發背景應用，就出現了 NodeJS 這樣的技術。NodeJS 的作者已經聲稱放棄 NodeJS(說是架構做的不好再加上笨重的node_modules，可能讓作者不爽了吧)，開始開發全新架構的 什麼是Deno？跟Node.js有何差別？

既然是背景技術，那肯定也需要架構和項目管理工具，NodeJS 架構及項目管理工具如下:

• Express: NodeJS 架構
• Koa: Express 簡化版
• NPM: 項目綜合管理工具，類似于 Maven
• YARN: NPM 的替代方案，類似于 Maven 和 Gradle 的關系

• Ant-Design:阿裡巴巴出品，基于 React 的 UI 架構
• ElementUI、MintUi、iview、ic、:餓了麼出品，基于 Vue 的 UI 架構
• Bootstrap:Twitter 推出的一個用于前端開發的開源工具包
• AmazeUI:又叫“妹子 UI”，一款 HTML5 跨屏前端架構
• Layui:輕量級架構(Layer)

Ant-Design

ant.design是基于react開發的一個解放ui和前端的工具，它提供了一緻的設計友善我們快速開發和減少不必要的設計與代碼，很多實用react架構的開發者都已經在使用ant.design了，且其在github上的star數也早已上萬，足見其火熱程度。

ant.design的目的也在于提高使用者、開發者等多方的體驗與幸福感。

ant.design設計很精妙，vue的iview就是模仿ant.design來實作的

• 官網位址：

  https://ant.design/index-cn

• github位址：

  https://github.com/ant-design/ant-design/

ElementUi

ElementUi是餓了麼前端開源維護的VueUI元件庫，元件齊全基本涵蓋背景所需的所有元件，文檔講解詳細，例子也很豐富。主要用于開發PC端的頁面，是一個品質比較高的VueUI元件庫!

• http://element-cn.eleme.io/#/zh-CN

• https://github.com/ElementUI/element-starter

• vue-element-admin：

  https://github.com/PanJiaChen/vue-element-admin

MintUi

MintUi是由餓了麼前端團隊推出的一個基于 Vue.js的移動端元件庫，元件比較單一，功能簡單易上手！

• https://mint-ui.github.io/#!/zh-cn

• https://github.com/ElemeFE/mint-ui

iview

iview 是一個強大的基于 Vue 的 UI 庫，有很多實用的基礎元件比 elementui 的元件更豐富，主要服務于 PC 界面的中背景産品。使用單檔案的 Vue 元件化開發模式 基于 npm + webpack + babel 開發，支援 ES2015 高品質、功能豐富 友好的 API ，自由靈活地使用空間。

• https://www.iviewui.com/

• https://github.com/TalkingData/iview-weapp

• iview-admin:

  https://github.com/iview/iview-admin

備注:屬于前端主流架構，選型時可考慮使用，主要特點是移動端支援較多

ICE

飛冰是阿裡巴巴團隊基于 React/Angular/Vue 的中背景應用解決方案，在阿裡巴巴内部，已經有 270 多 個來自幾乎所有 BU 的項目在使用。飛冰包含了一條從設計端到開發端的完整鍊路，幫助使用者快速搭建 屬于自己的中背景應用。

• https://alibaba.github.io/ice

• github位址 ：

  https://github.com/alibaba/ice

備注:主要元件還是以 React 為主，對 Vue 的支援還不太完善， 目前尚處于觀望階段

VantUI

Vant UI 是有贊前端團隊基于有贊統一的規範實作的 Vue 元件庫，提供了一整套 UI 基礎元件和業務組 件。通過 Vant，可以快速搭建出風格統一的頁面，提升開發效率。

• https://youzan.github.io/vant/#/zh-CN/intro

• https://github.com/youzan/vant

AtUi

at-ui是一款基于Vue 2.x的前端UI元件庫，主要用于快速開發PC網站産品。 它提供了一套npm + webpack + babel 前端開發工作流程，CSS樣式獨立，即使采用不同的架構實作都能保持統一的 UI風格。

• https://at-ui.github.io/at-ui/#/zh

• https://github.com/at-ui/at-ui

CubeUI

cube-ui 是滴滴團隊開發的基于 Vue.js 實作的精緻移動端元件庫。支援按需引入和後編譯，輕量靈活; 擴充性強，可以友善地基于現有元件實作二次開發.

• https://didi.github.io/cube-ui/#/zh-CN

• https://github.com/didi/cube-ui/

Flutter

Flutter 是谷歌的移動端 UI 架構，可在極短的時間内建構 Android 和 iOS 上高品質的原生級應用。 Flutter 可與現有代碼一起工作, 它被世界各地的開發者群組織使用, 并且 Flutter 是免費和開源的。

• https://flutter.dev/docs

• https://github.com/flutter/flutter

備注:Google 出品，主要特點是快速建構原生 APP 應用程式，如做混合應用該架構為必選架構

Ionic

Ionic 既是一個 CSS 架構也是一個 Javascript UI 庫，Ionic 是目前最有潛力的一款 HTML5 手機應用開發 架構。通過 SASS 建構應用程式，它提供了很多 UI 元件來幫助開發者開發強大的應用。它使用 JavaScript MVVM 架構和 AngularJS/Vue 來增強應用。提供資料的雙向綁定，使用它成為 Web 和移動 開發者的共同選擇。

• https://ionicframework.com/

• https://github.com/ionic-team/ionic

mpvue

mpvue 是美團開發的一個使用 Vue.js 開發小程式的前端架構，目前支援 微信小程式、百度智能小程 序，頭條小程式 和 支付寶小程式。 架構基于 Vue.js，修改了的運作時架構 runtime 和代碼編譯器 compiler 實作，使其可運作在小程式環境中，進而為小程式開發引入了 Vue.js 開發體驗。

• ：

  http://mpvue.com/

• https://github.com/Meituan-Dianping/mpvue

備注:完備的 Vue 開發體驗，并且支援多平台的小程式開發，推薦使用

WeUi

WeUI 是一套同微信原生視覺體驗一緻的基礎樣式庫，由微信官方設計團隊為微信内網頁和微信小程式 量身設計，令使用者的使用感覺更加統一。包含 button、cell、dialog、toast、article、icon 等各式元 素。

• https://weui.io/

• https://github.com/weui/weui.git

為了降低開發的複雜度，以後端為出發點，比如:Struts、SpringMVC 等架構的使用，就是後端的 MVC 時代;

以 SpringMVC 流程為例:

• 1.發起請求到前端控制器(DispatcherServlet)
• 2.前端控制器請求HandlerMapping查找 Handler （可以根據xml配置、注解進行查找）
• 3.處理器映射器HandlerMapping向前端控制器傳回Handler，HandlerMapping會把請求映射為HandlerExecutionChain對象（包含一個Handler處理器（頁面控制器）對象，多個HandlerInterceptor攔截器對象），通過這種政策模式，很容易添加新的映射政策
• 4.前端控制器調用處理器擴充卡去執行Handler
• 5.處理器擴充卡HandlerAdapter将會根據适配的結果去執行Handler
• 6.Handler執行完成給擴充卡傳回ModelAndView
• 7.處理器擴充卡向前端控制器傳回ModelAndView （ModelAndView是springmvc架構的一個底層對象，包括 Model和view）
• 8.前端控制器請求視圖解析器去進行視圖解析 （根據邏輯視圖名解析成真正的視圖(jsp)），通過這種政策很容易更換其他視圖技術，隻需要更改視圖解析器即可
• 9.視圖解析器向前端控制器傳回View
• 10.前端控制器進行視圖渲染 （視圖渲染将模型資料(在ModelAndView對象中)填充到request域）
• 11.前端控制器向使用者響應結果

優點:

MVC 是一個非常好的協作模式，能夠有效降低代碼的耦合度，從架構上能夠讓開發者明白代碼應該寫在 哪裡。為了讓 View 更純粹，還可以使用 Thymeleaf、Freemarker 等模闆引擎，使模闆裡無法寫入 Java 代碼，讓前後端分工更加清晰。單體應用!

缺點:

前端開發重度依賴開發環境，開發效率低，這種架構下，前後端協作有兩種模式:

1、第一種是前端寫 DEMO，寫好後，讓後端去套模闆。好處是 DEMO 可以本地開發，很高效。不足是 還需要後端套模闆，有可能套錯，套完後還需要前端确定，來回溝通調整的成本比較大;

2、另一種協作模式是前端負責浏覽器端的所有開發和伺服器端的 View 層模闆開發。好處是 UI 相關的 代碼都是前端去寫就好，後端不用太關注，不足就是前端開發重度綁定後端環境，環境成為影響前端開 發效率的重要因素。

前後端職責糾纏不清:模闆引擎功能強大，依舊可以通過拿到的上下文變量來實作各種業務邏輯。但這樣隻要前端弱勢一點，往往就會被後端要求在模闆層寫出不少業務代碼。還有一個很大的灰色地帶是，頁面路由等功能本應該是前端最關注的，但卻是由後端來實作。

ajax 的時代

時間回到 2005 年 AJAX (Asynchronous JavaScript And XML，異步 JavaScript 和 XML，老技術新 用法) 被正式提出并開始使用 CDN 作為靜态資源存儲，于是出現了 JavaScript 王者歸來(在這之前 JS 都是用來在網頁上貼狗皮膏藥廣告的)的 SPA(Single Page Application)單頁面應用時代。

這種模式下，前後端的分工非常清晰，前後端的關鍵協作點是 A JAX 接口。看起來是如此美妙，但回過 頭來看看的話，這與 JSP 時代差別不大。複雜度從服務端的 JSP 裡移到了浏覽器的 JavaScript，浏覽器 端變得很複雜。類似 Spring MVC，這個時代開始出現浏覽器端的分層架構:

[外鍊圖檔轉存失敗,源站可能有防盜鍊機制,建議将圖檔儲存下來直接上傳(img-fP8yZYUq-1587440620216)()]

• 前後端接口的約定: 如果後端的接口一塌糊塗，如果後端的業務模型不夠穩定，那麼前端開發會很 痛苦;不少團隊也有類似嘗試，通過接口規則、接口平台等方式來做。有了和後端一起沉澱的 接口 規則，還可以用來模拟資料，使得前後端可以在約定接口後實作高效并行開發。
• 前端開發的複雜度控制: SPA 應用大多以功能互動型為主，JavaScript 代碼過十萬行很正常。大量 JS 代碼的組織，與 View 層的綁定等，都不是容易的事情

前端為主的 MV* 時代

此處的 MV* 模式如下:

• MVC(同步通信為主):Model、View、Controller
• MVP(異步通信為主):Model、View、Presenter
• MVVM(異步通信為主):Model、View、ViewModel

為了降低前端開發複雜度，湧現了大量的前端架構，比如: AngularJS 、 React 、Vue.js 、 EmberJS 等，這些架構總的原則是先按類型分層，比如 Templates、Controllers、Models，然後再在層内做切分，如下圖:

• 前後端職責很清晰: 前端工作在浏覽器端，後端工作在服務端。清晰的分工，可以讓開發并行，測 試資料的模拟不難，前端可以本地開發。後端則可以專注于業務邏輯的處理，輸出 RESTful等接 口。

• 前端開發的複雜度可控: 前端代碼很重，但合理的分層，讓前端代碼能各司其職。這一塊蠻有意思 的，簡單如模闆特性的選擇，就有很多很多講究。并非越強大越好，限制什麼，留下哪些自由，代 碼應該如何組織，所有這一切設計，得花一本書的厚度去說明。

  -部署相對獨立: 可以快速改進産品體驗

• 代碼不能複用。比如後端依舊需要對資料做各種校驗，校驗邏輯無法複用浏覽器端的代碼。如果可 以複用，那麼後端的資料校驗可以相對簡單化。
• 全異步，對 SEO 不利。往往還需要服務端做同步渲染的降級方案。 性能并非最佳，特别是移動網際網路環境下。
• SPA 不能滿足所有需求，依舊存在大量多頁面應用。URL Design 需要後端配合，前端無法完全掌控。

NodeJS 帶來的全棧時代

前端為主的 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 等方式通信更高效。一切需要在驗證中前行。
• 對部署、運維層面的熟練了解，需要更多知識點和實操經驗。
• 大量曆史遺留問題如何過渡。這可能是最大最大的阻力。

什麼是MVVM模式呢？

MVVM(Model-View-ViewModel)是一種軟體架構設計模式，由微軟 WPF(用于替代 WinForm，以 前就是用這個技術開發桌面應用程式的)和 Silverlight(類似于 Java Applet，簡單點說就是在浏覽器上 運作的 WPF) 的架構師 Ken Cooper 和 Ted Peters 開發，是一種簡化使用者界面的事件驅動程式設計方式。 由 John Gossman(同樣也是 WPF 和 Silverlight 的架構師)于 2005 年在他的部落格上發表。

MVVM 源自于經典的 MVC(Model-View-Controller)模式。MVVM 的核心是 ViewModel 層，負責轉 換 Model 中的資料對象來讓資料變得更容易管理和使用，其作用如下:

• 該層向上與視圖層進行雙向資料綁定
• 向下與 Model 層通過接口請求進行資料互動

  

MVVM 已經相當成熟了，當下流行的 MVVM 架構有 Vue.js ， AngularJS 等。

為什麼要用MVVM模式？

所有的架構本質都是為了解耦!

MVVM 模式和 MVC 模式一樣，主要目的是分離視圖(View)和模型(Model)，有幾大好處:

• 低耦合: 視圖(View)可以獨立于 Model 變化和修改，一個 ViewModel 可以綁定到不同的 View 上，當 View 變化的時候 Model 可以不變，當 Model 變化的時候 View 也可以不變。
• 可複用: 你可以把一些視圖邏輯放在一個 ViewModel 裡面，讓很多 View 重用這段視圖邏輯。
• 獨立開發: 開發人員可以專注于業務邏輯和資料的開發(ViewModel)，設計人員可以專注于頁 面設計。
• 可測試: 界面素來是比較難于測試的，而現在測試可以針對 ViewModel 來寫。

mvvm的整體結構圖：

View:

View 是視圖層，也就是使用者界面。前端主要由 HTML 和 CSS 來建構，為了更友善地展現 ViewModel 或者 Model層的資料，已經産生了各種各樣的前後端模闆語言，比如 FreeMarker、 Thymeleaf 等等，各大 MVVM 架構如 Vue.js，AngularJS，EJS 等也都有自己用來建構使用者界面的内置 模闆語言。

Model:

Model 是指資料模型，泛指後端進行的各種業務邏輯處理和資料操控，主要圍繞資料庫系統展開。這裡

的難點主要在于需要和前端約定統一的 接口規則

ViewModel:

ViewModel 是由前端開發人員組織生成和維護的視圖資料層。在這一層，前端開發者對從後端擷取的 Model 資料進行轉換處理，做二次封裝，以生成符合 View 層使用預期的視圖資料模型。

需要注意的是 ViewModel 所封裝出來的資料模型包括視圖的狀态和行為兩部分，而Model層的資料模型是隻包含狀态的。

• 比如頁面的這一塊展示什麼，那一塊展示什麼這些都屬于視圖狀态(展示)
• 頁面加載進來時發生什麼，點選這一塊發生什麼，這一塊滾動時發生什麼這些都屬于視圖行為(交 互)

視圖狀态和行為都封裝在了 ViewModel 裡。這樣的封裝使得 ViewModel 可以完整地去描述 View 層。

由于實作了雙向綁定，ViewModel 的内容會實時展現在 View 層，這樣前端開發者再也不必低效又麻煩地通過操縱DOM去更新視圖。

MVVM 架構已經把最髒最累的一塊做好了，我們開發者隻需要處理和維護 ViewModel，更新資料然後視圖就會自動得到相應更新，真正實作事件驅動程式設計。

View層展現的不是 Model 層的資料，而是 ViewModel 的資料，由 ViewModel 負責與 Model 層互動，這就完全解耦了 View 層和 Model 層，這個解耦是至關重要的，它是前後端分離方

案實施的重要一環。

網際網路誕生初期是沒有前後端這個概念的，幾乎所有的工作都是由背景開發人員來完成，後來視圖層技術發展越來越好,對頁面的渲染支援越來越好，誕生了前端這一專注于視圖層技術的開發人員。處于時代浪潮中的我們如果現在還是停留在單一的技術層面，難免市場和視野都變得狹窄，故全棧這一說又被提上了很多開發者的日程，正所謂天下大勢 分久必合，合久必分，那麼是時候研究學習一波大前端了！

餘路那麼長，還是得帶着虔誠上路...