概述

​ Vue(讀音/viu/，類似于 view)是一套用于構(gòu)建用戶界面的漸進(jìn)式框架，發(fā)布干 2014 年 2 月.

與其它大型框架不同的是，Vue 被設(shè)計(jì)為可以自底向上逐層應(yīng)用。Vue 的核心庫(kù)只關(guān)注視圖層，不僅
易于上手，還便于與第三方庫(kù)(如:vue-router:跳轉(zhuǎn)，vue-resource:通信， vuex:管理)或既有項(xiàng)目整合。

官網(wǎng):https://cn.vuejs.org/v2/guide/

前端知識(shí)體系

想要成為真正的“互聯(lián)網(wǎng) Java 全棧工程師”還有很長(zhǎng)的一段路要走，其中“我大前端”是繞不開(kāi)的一門必修課。本階段課程的主要目的就是帶領(lǐng)我Java 后臺(tái)程序員認(rèn)識(shí)前端、了解前端、掌握前端，為實(shí)現(xiàn)成為“互聯(lián)網(wǎng) Java 全棧丁程師”再向前邁進(jìn)一步。

前端三要素

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

表現(xiàn)層（CSS）

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

• 語(yǔ)法不夠強(qiáng)大，比如無(wú)法嵌套書(shū)寫(xiě)，導(dǎo)致模塊化開(kāi)發(fā)中需要書(shū)寫(xiě)很多重復(fù)的選擇器;
• 沒(méi)有變量和合理的樣式復(fù)用機(jī)制，使得邏輯上相關(guān)的屬性值必須以字面量的形式重復(fù)輸出，導(dǎo)致難以維護(hù);

這就導(dǎo)致了我們?cè)诠ぷ髦袩o(wú)端增加了許多工作量。為了解決這個(gè)問(wèn)題，前端開(kāi)發(fā)人員會(huì)使用一種稱之為CSS 預(yù)處理器的工具，提供 CSS 缺失的樣式層復(fù)用機(jī)制，減少冗余代碼，提高樣式代碼的p維護(hù)性。大大提高了前端在樣式上的開(kāi)發(fā)效率。

什么是 CSS 預(yù)處理器

CSS 預(yù)處理器定義了一種新的語(yǔ)言，其基本思想是，用一種專門的編程語(yǔ)言，為 CSS 增加了一些編程的特性，將 CSS 作為目標(biāo)生成文件，然后開(kāi)發(fā)者就只要使用這種語(yǔ)言進(jìn)行 CSS 的編碼工作。轉(zhuǎn)化成通俗易懂的話來(lái)說(shuō)就是“用一種專門的編程語(yǔ)言，進(jìn)行 Web 頁(yè)面樣式設(shè)計(jì)，再通過(guò)編譯器轉(zhuǎn)化為正常的 CSS 文件，以供項(xiàng)目使用”。

常用的 CSS 預(yù)處理器有哪些

• SASS:基于 Ruby，通過(guò)服務(wù)端處理，功能強(qiáng)大。解析效率高。需要學(xué)習(xí) Ruby 語(yǔ)言，上手難度高于 LESS。
• LESS:基干 NodeJS，通過(guò)客戶端處理，使用簡(jiǎn)單。功能比 SASS 簡(jiǎn)單，解析效率也低于SASS，但在實(shí)際開(kāi)發(fā)中足夠了，所以我們后臺(tái)人員如果需要的話，建議使用 LESS。

行為層（JavaScript）

JavaScript 一門弱類型腳本語(yǔ)言，其源代碼在發(fā)往客戶端運(yùn)行之前不需經(jīng)過(guò)編譯，而是將文本格式的字符代碼發(fā)送給瀏覽器由瀏覽器解釋運(yùn)行。

Native 原生 JS 開(kāi)發(fā)

原生 JS 開(kāi)發(fā)，也就是讓我們按照**【ECMAScript】**標(biāo)準(zhǔn)的開(kāi)發(fā)方式，簡(jiǎn)稱是 ES，特點(diǎn)是所有瀏
覽器都支持。截止到當(dāng)前博客發(fā)布時(shí)間，ES 標(biāo)準(zhǔn)已發(fā)布如下版本:

• ES3
• ES4(內(nèi)部，未正式發(fā)布)。ES5(全瀏覽器支持)
• ES6(常用，當(dāng)前主流版本:webpack打包成為ES5支持!)
• ES7
• ES8
• ES9

區(qū)別就是逐步增加新特性。

TypeScript 微軟的標(biāo)準(zhǔn)

TypeScript 是一種由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言。它是JavaScript 的一個(gè)超集，而且本質(zhì)上向這個(gè)語(yǔ)言添加了可選的靜態(tài)類型和基于類的面向?qū)ο缶幊?。由安德斯·海爾斯伯?C#、Delphi、TypeScript 之父;.NET 創(chuàng)立者)主導(dǎo)。

該語(yǔ)言的特點(diǎn)就是除了具備 ES 的特性之外還納入了許多不在標(biāo)準(zhǔn)范圍內(nèi)的新特性，所以會(huì)導(dǎo)致很多瀏覽器不能直接支持 TypeScript 語(yǔ)法，需要編譯后(編譯成JS)才能被瀏覽器正確執(zhí)行。

JavaScript 框架 

• jQuery:大家熟知的 JavaScript 框架，優(yōu)點(diǎn)是簡(jiǎn)化了 DOM 操作，缺點(diǎn)是 DOM 操作太頻繁，影響前端性能:在前端眼里使用它僅僅是為了兼容IE6、7、8:
• Angular: Google 收購(gòu)的前端框架，由一群 Java 程序員開(kāi)發(fā)，其特點(diǎn)是將后臺(tái)的 MVC 模式搬到了前端并增加了模塊化開(kāi)發(fā)的理念，與微軟合作，采用 TypeScript 語(yǔ)法開(kāi)發(fā);對(duì)后臺(tái)程序員友好，對(duì)前端程序員不太友好:最大的缺點(diǎn)是版本迭代不合理(如:1代 ->2代，除了名字，基本就是兩個(gè)東西;截止發(fā)表博客時(shí)已推出了 Angular6)
• React:Facebook 出品，一款高性能的 JS 前端框架:特點(diǎn)是提出了新概念 **【虛擬 DOM】用于減少真實(shí) DOM 操作，在內(nèi)存中模擬 DOM 操作，有效的提升了前端渲染效率;缺點(diǎn)是使用復(fù)雜，因?yàn)樾枰~外學(xué)習(xí)一門【JSX】**語(yǔ)言;
• Vue:一款漸進(jìn)式JavaScript 框架，所謂漸進(jìn)式就是逐步實(shí)現(xiàn)新特性的意思，如實(shí)現(xiàn)模塊化開(kāi)發(fā)、路由、狀態(tài)管理等新特性。其特點(diǎn)是綜合了 Angular(模塊化) 和 React (虛擬 DOM)的優(yōu)點(diǎn);
• Axios:前端通信框架;因?yàn)?nbsp;Vue 的邊界很明確，就是為了處理 DOM，所以并不具備通信能力，此時(shí)就需要額外使用一個(gè)通信框架與服務(wù)器交互;當(dāng)然也可以直接選擇使用 jQuery 提供的AJAX通信功能

UI框架

• Ant-Design:阿里巴巴出品，基于 React 的 UI 框架
• ElementUl、iview、ice:餓了么出品，基于 Vue 的 Ul 框架
• Bootstrap:Twitter 推出的一個(gè)用于前端開(kāi)發(fā)的開(kāi)源工具包。
• AmazeUl:又叫“妹子 UI”，一款 HTML5 跨屏前端框架

JavaScript 構(gòu)建工具

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

三端統(tǒng)一

混合開(kāi)發(fā)（Hybrid App）

主要目的是實(shí)現(xiàn)一套代碼三端統(tǒng)一(PC、Android:.apk、iOs:ipa)并能夠調(diào)用到設(shè)備底層硬件(如:傳感器、GPS、攝像頭等)，打包方式主要有以下兩種:

• 云打包:HBuild ->HBuildX，DCloud 出品;API Cloud
• 本地打包:Cordova(前身是 PhoneGap)

微信小程序

詳見(jiàn)微信官網(wǎng)，這里就是介紹一個(gè)方便微信小程序 UI 開(kāi)發(fā)的框架:WeUl

后端技術(shù)

前端人員為了方便開(kāi)發(fā)也需要掌握一定的后端技術(shù)，但我們 Java 后臺(tái)人員知道后臺(tái)知識(shí)體系極其龐大復(fù)雜，所以為了方便前端人員開(kāi)發(fā)后臺(tái)應(yīng)用，就出現(xiàn)了 NodeJS 這樣的技術(shù)。

NodeJS 的作者已經(jīng)聲稱放棄 NodeJS(說(shuō)是架構(gòu)做的不好再加上笨重的node_modules，可能讓作者不爽了吧)，開(kāi)始開(kāi)發(fā)全新架構(gòu)的 Deno

既然是后臺(tái)技術(shù)，那肯定也需要框架和項(xiàng)目管理工具，NodeJS 框架及項(xiàng)目管理工具如下:

• Express:NodeJS 框架
• Koa:Express 簡(jiǎn)化版
• NPM:項(xiàng)目綜合管理工具，類似于 Maven
• YARN:NPM 的替代方案，類似于 Maven 和 Gradle 的關(guān)系

主流前端框架

Vue.js

iView

iview 是一個(gè)強(qiáng)大的基于 Vue 的 Ul 庫(kù)，有很多實(shí)用的基礎(chǔ)組件比 elementui 的組件更豐富，主要服務(wù)于 PC 界面的中后臺(tái)產(chǎn)品。使用單文件的 Vue 組件化開(kāi)發(fā)模式 基于 npm + webpack +babel 開(kāi)發(fā)，支持 ES2015 高質(zhì)量、功能豐富 友好的 API，自由靈活地使用空間。

• 官網(wǎng)地址。
• Github
• iview-admin

備注:屬于前端主流框架，選型時(shí)可考慮使用，主要特點(diǎn)是移動(dòng)端支持較多

ElementUl

Element 是餓了么前端開(kāi)源維護(hù)的 Vue Ul 組件庫(kù)，組件齊全，基本涵蓋后臺(tái)所需的所有組件，文檔講解詳細(xì)，例子也很豐富。主要用于開(kāi)發(fā) PC 端的頁(yè)面，是一個(gè)質(zhì)量比較高的 Vue Ul 組件庫(kù)。

備注:屬于前端主流框架，選型時(shí)可考慮使用，主要特點(diǎn)是桌面端支持較多

ICE

飛冰是阿里巴巴團(tuán)隊(duì)基于 React/Angular/Vue 的中后臺(tái)應(yīng)用解決方案，在阿里巴巴內(nèi)部，已經(jīng)有270 多個(gè)來(lái)自幾乎所有 BU 的項(xiàng)目在使用。飛冰包含了一條從設(shè)計(jì)端到開(kāi)發(fā)端的完整鏈路，幫助用戶快速搭建屬于自己的中后臺(tái)應(yīng)用。

備注:主要組件還是以 React 為主

VantUl

Vant Ul是有贊前端團(tuán)隊(duì)基于有贊統(tǒng)一的規(guī)范實(shí)現(xiàn)的 Vue 組件庫(kù)，提供了一整套 Ul 基礎(chǔ)組件和業(yè)務(wù)組件。通過(guò) Vant，可以快速搭建出風(fēng)格統(tǒng)一的頁(yè)面，提升開(kāi)發(fā)效率。

AtUl

at-ui 是一款基于 Vue 2.x 的前端 Ul 組件庫(kù)，主要用于快速開(kāi)發(fā) PC 網(wǎng)站產(chǎn)品。 它提供了一套npm + webpack + babel 前端開(kāi)發(fā)工作流程，CSS 樣式獨(dú)立，即使采用不同的框架實(shí)現(xiàn)都能保持統(tǒng)一的 UI 風(fēng)格。

CubeUl

cube-ui 是滴滴團(tuán)隊(duì)開(kāi)發(fā)的基于 Vue.js 實(shí)現(xiàn)的精致移動(dòng)端組件庫(kù)。支持按需引入和后編譯，輕量靈活:擴(kuò)展性強(qiáng)，可以方便地基于現(xiàn)有組件實(shí)現(xiàn)二次開(kāi)發(fā)。

等等UI…

前端發(fā)展史

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

• 發(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是 SprineMvc框架的一個(gè)底層對(duì)象，包括Model 和 View
• 前端控制器請(qǐng)求視圖解析器去進(jìn)行視圖解析，根據(jù)邏輯視圖名解析成真正的視圖(JSP)
• 視圖解析器向前端控制器返回 View
• 前端控制器進(jìn)行視圖渲染，視圖渲染將模型數(shù)據(jù)(在 ModelAndView 對(duì)象中)填充到 request域
• 前端控制器向用戶響應(yīng)結(jié)果

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

MVC 是一個(gè)非常好的協(xié)作模式，能夠有效降低代碼的耦合度，從架構(gòu)上能夠讓開(kāi)發(fā)者明白代碼應(yīng)該寫(xiě)在哪里。為了讓 View 更純粹，還可以使用 Thymeleaf、Freemarker 等模板引擎，使模板里無(wú)法寫(xiě)入 Java 代碼，讓前后端分工更加清晰。

缺點(diǎn)

• 前端開(kāi)發(fā)重度依賴開(kāi)發(fā)環(huán)境，開(kāi)發(fā)效率低，這種架構(gòu)下，前后端協(xié)作有兩種模式:
  • 第一種是前端寫(xiě) DEMO，寫(xiě)好后，讓后端去套模板。好處是 DEMO 可以本地開(kāi)發(fā)，很高效，不足是還需要后端套模板，有可能套錯(cuò)，套完后還需要前端確定，來(lái)回溝通調(diào)整的成本比較大;
  • 另一種協(xié)作模式是前端負(fù)責(zé)瀏覽器端的所有開(kāi)發(fā)和服務(wù)器端的 View 層模板開(kāi)發(fā)。好外是 U相關(guān)的代碼都是前端去寫(xiě)就好，后端不用太關(guān)注，不足就是前端開(kāi)發(fā)重度綁定后端環(huán)境，環(huán)境成為影響前端開(kāi)發(fā)效率的重要因素。
• 前后端職責(zé)糾纏不清:模板引擎功能強(qiáng)大，依舊可以通過(guò)拿到的上下文變量來(lái)實(shí)現(xiàn)各種業(yè)務(wù)邏輯。
  

這樣，只要前端弱勢(shì)一點(diǎn)，往往就會(huì)被后端要求在模板層寫(xiě)出不少業(yè)務(wù)代碼。還有一個(gè)很大的灰色

地帶是 Controller，頁(yè)面路由等功能本應(yīng)該是前端最關(guān)注的，但卻是由后端來(lái)實(shí)現(xiàn)。

Controller 本身與 Model 往往也會(huì)糾纏不清，看了讓人咬牙的業(yè)務(wù)代碼經(jīng)堂會(huì)出現(xiàn)在Controller 層。這些問(wèn)題不能全歸結(jié)于程序員的素養(yǎng)，否則 JSP 就夠了。

• 對(duì)前端發(fā)揮的局限性:性能優(yōu)化如果只在前端做空間非常有限，于是我們經(jīng)常需要后端合作，但由于后端框架限制，我們很難使用**【Comet】、【BigPipe】**等技術(shù)方案來(lái)優(yōu)化性能。

基于AJAX帶來(lái)的SPA時(shí)代

時(shí)間回到2005 年 AJAX (Asynchronous JavaScript And XML，異步 JavaScript 和 XML,老技術(shù)新用法)被正式提出并開(kāi)始使用 CDN 作為靜態(tài)資源存儲(chǔ)，于是出現(xiàn)了JavaScript 王者歸來(lái)

(在這之前 JS 都是用來(lái)在網(wǎng)頁(yè)上貼狗皮膏藥廣告的)的 SPA(Single Page Application)單頁(yè)面應(yīng)用時(shí)代。

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

這種模式下，前后端的分工非常清晰，前后端的關(guān)鍵協(xié)作點(diǎn)是 AJAX 接口?？雌饋?lái)是如此美妙，但回過(guò)頭來(lái)看看的話，這與JSP 時(shí)代區(qū)別不大。復(fù)雜度從服務(wù)端的 JSP 里移到了瀏覽器的 JavaScript，瀏覽器端變得很復(fù)雜。類似 Spring MVC，這個(gè)時(shí)代開(kāi)始出現(xiàn)瀏覽器端的分層架構(gòu):

缺點(diǎn)

• 前后端接口的約定:如果后端的接口一塌糊涂，如果后端的業(yè)務(wù)模型不夠穩(wěn)定，那么前端開(kāi)發(fā)會(huì)很痛苦:不少團(tuán)隊(duì)也有類似嘗試，通過(guò)接口規(guī)則、接口平臺(tái)等方式來(lái)做。有了和后端一起沉淀的 接口規(guī)則，還可以用來(lái)模擬數(shù)據(jù)，使得前后端可以在約定接口后實(shí)現(xiàn)高效并行開(kāi)發(fā)。
• 前端開(kāi)發(fā)的復(fù)雜度控制: SPA 應(yīng)用大多以功能交互型為主，JavaScript 代碼過(guò)十萬(wàn)行很正常。大量JS 代碼的組織，與 View 層的綁定等，都不是容易的事情。 前端為主的MV*時(shí)代

此處的 MV* 模式如下:

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

為了降低前端開(kāi)發(fā)復(fù)雜度，涌現(xiàn)了大量的前端框架，比如:Angular]s、React、Vue.js、Ember]s 等，這些框架總的原則是先按類型分層，比如Templates、Controllers、Models，然后再在層內(nèi)做切分，如下圖:

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

• 前后端職責(zé)很清晰:前端工作在瀏覽器端，后端工作在服務(wù)端。清晰的分工，可以讓開(kāi)發(fā)并行，測(cè)試數(shù)據(jù)的模擬不難，前端可以本地開(kāi)發(fā)。后端則可以專注于業(yè)務(wù)邏輯的處理，輸出 RESTful等接口。
• 前端開(kāi)發(fā)的復(fù)雜度可控:前端代碼很重，但合理的分層，讓前端代碼能各司其職。這一塊蠻有意思的，簡(jiǎn)單如模板特性的選擇，就有很多很多講究。并非越強(qiáng)大越好，限制什么，留下哪些自由，代碼應(yīng)該如何組織，所有這一切設(shè)計(jì)，得花一本書(shū)的厚度去說(shuō)明。
• 部署相對(duì)獨(dú)立:可以快速改進(jìn)產(chǎn)品體驗(yàn)

缺點(diǎn)

• 代碼不能復(fù)用。比如后端依舊需要對(duì)數(shù)據(jù)做各種校驗(yàn)，校驗(yàn)邏輯無(wú)法復(fù)用瀏覽器端的代碼。如果可以復(fù)用，那么后端的數(shù)據(jù)校驗(yàn)可以相對(duì)簡(jiǎn)單化。
• 全異步，對(duì) SEO 不利。往往還需要服務(wù)端做同步渲染的降級(jí)方案。
• 性能并非最佳，特別是移動(dòng)互聯(lián)網(wǎng)環(huán)境下。
• SPA 不能滿足所有需求，依舊存在大量多頁(yè)面應(yīng)用。URL Design 需要后端配合，前端無(wú)法完全掌控。

NodeJS帶來(lái)的全棧時(shí)代

前段為主的MV*模式解決了很多很多問(wèn)題，但如上所述，存在不少不足之處。隨著NodeJS的興起，JavaScript開(kāi)始有能力運(yùn)行在服務(wù)器。這意味著有一種新的研發(fā)模式：

在這種研發(fā)模式下，前后端的職責(zé)很清晰。對(duì)前端來(lái)說(shuō)，兩個(gè) UI 層各司其職:

• Front-end Ul layer 處理瀏覽器層的展現(xiàn)邏輯。通過(guò) CSS 渲染樣式，通過(guò) JavaScript 添加交互功能，HTML的生成也可以放在這層，具體看應(yīng)用場(chǎng)景。
• Back-end Ul layer 處理路由、模板、數(shù)據(jù)獲取、Cookie 等。通過(guò)路由，前端終于可以自主把控URL Design，這樣無(wú)論是單頁(yè)面應(yīng)用還是多頁(yè)面應(yīng)用，前端都可以自由調(diào)控。后端也終于可以擺脫對(duì)展現(xiàn)的強(qiáng)關(guān)注，轉(zhuǎn)而可以專心于業(yè)務(wù)邏輯層的開(kāi)發(fā)。

通過(guò) Node，Web Server 層也是 JavaScript 代碼，這意味著部分代碼可前后復(fù)用，需要 SEO的場(chǎng)景可以在服務(wù)端同步渲染，由于異步請(qǐng)求太多導(dǎo)致的性能問(wèn)題也可以通過(guò)服務(wù)端來(lái)緩解。前一種模式的不足，通過(guò)這種模式幾乎都能完美解決掉。

與 JSP 模式相比，全棧模式看起來(lái)是一種回歸，也的確是一種向原始開(kāi)發(fā)模式的回歸，不過(guò)是一種螺旋上升式的回歸。

基于 NodeJS 的全棧模式，依舊面臨很多挑戰(zhàn):

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

總結(jié)

本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容！