前端架構(gòu)演進(jìn)及主流UI

2020-4-24    前端達(dá)人

文章目錄



    前端三要素

    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(行為):是一種弱類(lèi)型腳本語(yǔ)言,其源代碼不需經(jīng)過(guò)編譯,而是由瀏覽器解釋運(yùn)行, 用于控制網(wǎng)頁(yè)的行為
    HTML 稱(chēng)為超文本標(biāo)記語(yǔ)言,是一種標(biāo)識(shí)性的語(yǔ)言。它通過(guò)一系列標(biāo)簽組合,組成一個(gè)個(gè)不同結(jié)構(gòu)的頁(yè)面!關(guān)于html標(biāo)簽的學(xué)習(xí)可以去菜鳥(niǎo)教程學(xué)習(xí),此處不再贅述!

    CSS層疊樣式表 也是一門(mén)標(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ì)使用一種稱(chēng)之為 【CSS 預(yù)處理器】 的工具,提供 CSS 缺失的樣式層復(fù)用機(jī)制、減少冗余代碼,提高樣式代碼的可維護(hù) 性。大大提高了前端在樣式上的開(kāi)發(fā)效率。

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

    CSS 預(yù)處理器定義了一種新的語(yǔ)言,其基本思想是,用一種專(zhuān)門(mén)的編程語(yǔ)言,為 CSS 增加了一些編程的 特性,將 CSS 作為目標(biāo)生成文件,然后開(kāi)發(fā)者就只要使用這種語(yǔ)言進(jìn)行 CSS 的編碼工作。轉(zhuǎn)化成通俗易 懂的話來(lái)說(shuō)就是“用一種專(zhuān)門(mén)的編程語(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 一門(mén)弱類(lèi)型腳本語(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)稱(chēng)是 ES,特點(diǎn)是所有瀏覽器都支持。

    ES 標(biāo)準(zhǔn)已發(fā)布如下版本:

    ES3
    ES4(內(nèi)部,未正式發(fā)布)
    ES5(全瀏覽器支持)
    ES6(常用,當(dāng)前主流版本:webpack打包成為ES5支持!)
    ES7
    ES8
    ES9(草案階段)
    從 ES6 開(kāi)始每年發(fā)布一個(gè)版本,以年份作為名稱(chēng),區(qū)別就是逐步增加新特性。

    TypeScript 微軟的標(biāo)準(zhǔn)
    TypeScript 是一種由微軟開(kāi)發(fā)的自由和開(kāi)源的編程語(yǔ)言。它是 JavaScript 的一個(gè)超集,而且本質(zhì)上向這 個(gè)語(yǔ)言添加了可選的靜態(tài)類(lèi)型和基于類(lèi)的面向?qū)ο缶幊獭S砂驳滤埂ず査共?C#、Delphi、 TypeScript 之父;.NET 創(chuàng)立者)主導(dǎo)。

    JavaScript 框架

    1.jQuery庫(kù)

    大家最熟知的 JavaScript庫(kù),優(yōu)點(diǎn)是簡(jiǎn)化了 DOM 操作,缺點(diǎn)是 DOM 操作太頻繁,影響前端性能;在 前端眼里使用它僅僅是為了兼容 IE6、7、8;

    2.Angular庫(kù)

    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è)東西;已推出了 Angular6)

    3.React

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

    4.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);

    5.Axios

    前端通信框架;因?yàn)?Vue 的邊界很明確,就是為了處理 DOM,所以并不具備通信能力,此時(shí)就需要額 外使用一個(gè)通信框架與服務(wù)器交互;當(dāng)然也可以直接選擇使用 jQuery 提供的 A JAX 通信功能;

    JavaScript 構(gòu)建工具

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

    NodeJs


    Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境,說(shuō)白了就是運(yùn)行在服務(wù)端的JavaScript;

    前端人員為了方便開(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)聲稱(chēng)放棄 NodeJS(說(shuō)是架構(gòu)做的不好再加上笨重的node_modules,可能讓作者不爽了吧),開(kāi)始開(kāi)發(fā)全新架構(gòu)的 什么是Deno?跟Node.js有何區(qū)別?

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

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

    常用UI框架


    Ant-Design:阿里巴巴出品,基于 React 的 UI 框架
    ElementUI、MintUi、iview、ic、:餓了么出品,基于 Vue 的 UI 框架
    Bootstrap:Twitter 推出的一個(gè)用于前端開(kāi)發(fā)的開(kāi)源工具包
    AmazeUI:又叫“妹子 UI”,一款 HTML5 跨屏前端框架
    Layui:輕量級(jí)框架(Layer)
    Ant-Design

    ant.design是基于react開(kāi)發(fā)的一個(gè)解放ui和前端的工具,它提供了一致的設(shè)計(jì)方便我們快速開(kāi)發(fā)和減少不必要的設(shè)計(jì)與代碼,很多實(shí)用react框架的開(kāi)發(fā)者都已經(jīng)在使用ant.design了,且其在github上的star數(shù)也早已上萬(wàn),足見(jiàn)其火熱程度。

    ant.design的目的也在于提高用戶、開(kāi)發(fā)者等多方的體驗(yàn)與幸福感。

    ant.design設(shè)計(jì)很精妙,vue的iview就是模仿ant.design來(lái)實(shí)現(xiàn)的

    官網(wǎng)地址:https://ant.design/index-cn
    github地址:https://github.com/ant-design/ant-design/
    ElementUi

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

    官網(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
    MintUi

    MintUi是由餓了么前端團(tuán)隊(duì)推出的一個(gè)基于 Vue.js的移動(dòng)端組件庫(kù),組件比較單一,功能簡(jiǎn)單易上手!

    官網(wǎng)地址:https://mint-ui.github.io/#!/zh-cn
    github地址:https://github.com/ElemeFE/mint-ui
    iview

    iview 是一個(gè)強(qiáng)大的基于 Vue 的 UI 庫(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)地址:https://www.iviewui.com/
    github地址:https://github.com/TalkingData/iview-weapp
    iview-admin: https://github.com/iview/iview-admin
    備注:屬于前端主流框架,選型時(shí)可考慮使用,主要特點(diǎn)是移動(dòng)端支持較多

    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)用。

    官網(wǎng)地址:https://alibaba.github.io/ice
    github地址 :https://github.com/alibaba/ice
    備注:主要組件還是以 React 為主,對(duì) Vue 的支持還不太完善, 目前尚處于觀望階段

    VantUI

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

    官網(wǎng)地址: https://youzan.github.io/vant/#/zh-CN/intro
    github地址: https://github.com/youzan/vant
    AtUi

    at-ui是一款基于Vue 2.x的前端UI組件庫(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)格。

    官網(wǎng)地址:https://at-ui.github.io/at-ui/#/zh
    github地址: https://github.com/at-ui/at-ui
    CubeUI
    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ā).

    官網(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)有代碼一起工作, 它被世界各地的開(kāi)發(fā)者和組織使用, 并且 Flutter 是免費(fèi)和開(kā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 庫(kù),Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開(kāi)發(fā) 框架。通過(guò) SASS 構(gòu)建應(yīng)用程序,它提供了很多 UI 組件來(lái)幫助開(kāi)發(fā)者開(kāi)發(fā)強(qiáng)大的應(yīng)用。它使用 JavaScript MVVM 框架和 AngularJS/Vue 來(lái)增強(qiáng)應(yīng)用。提供數(shù)據(jù)的雙向綁定,使用它成為 Web 和移動(dòng) 開(kāi)發(fā)者的共同選擇。

    官網(wǎng)地址:https://ionicframework.com/
    github地址:https://github.com/ionic-team/ionic
    mpvue

    mpvue 是美團(tuán)開(kāi)發(fā)的一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架,目前支持 微信小程序、百度智能小程 序,頭條小程序 和 支付寶小程序。 框架基于 Vue.js,修改了的運(yùn)行時(shí)框架 runtime 和代碼編譯器 compiler 實(shí)現(xiàn),使其可運(yùn)行在小程序環(huán)境中,從而為小程序開(kāi)發(fā)引入了 Vue.js 開(kāi)發(fā)體驗(yàn)。

    官網(wǎng)地址:http://mpvue.com/
    github地址:https://github.com/Meituan-Dianping/mpvue
    備注:完備的 Vue 開(kāi)發(fā)體驗(yàn),并且支持多平臺(tái)的小程序開(kāi)發(fā),推薦使用

    WeUi

    WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù),由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序 量身設(shè)計(jì),令用戶的使用感知更加統(tǒng)一。包含 button、cell、dialog、toast、article、icon 等各式元 素。

    官網(wǎng)地址:https://weui.io/
    github地址:https://github.com/weui/weui.git

    前后端分離的演進(jìn)

    為了降低開(kāi)發(fā)的復(fù)雜度,以后端為出發(fā)點(diǎn),比如:Struts、SpringMVC 等框架的使用,就是后端的 MVC 時(shí)代;

    以 SpringMVC 流程為例:


    1.發(fā)起請(qǐng)求到前端控制器(DispatcherServlet)
    2.前端控制器請(qǐng)求HandlerMapping查找 Handler (可以根據(jù)xml配置、注解進(jìn)行查找)
    3.處理器映射器HandlerMapping向前端控制器返回Handler,HandlerMapping會(huì)把請(qǐng)求映射為HandlerExecutionChain對(duì)象(包含一個(gè)Handler處理器(頁(yè)面控制器)對(duì)象,多個(gè)HandlerInterceptor攔截器對(duì)象),通過(guò)這種策略模式,很容易添加新的映射策略
    4.前端控制器調(diào)用處理器適配器去執(zhí)行Handler
    5.處理器適配器HandlerAdapter將會(huì)根據(jù)適配的結(jié)果去執(zhí)行Handler
    6.Handler執(zhí)行完成給適配器返回ModelAndView
    7.處理器適配器向前端控制器返回ModelAndView (ModelAndView是springmvc框架的一個(gè)底層對(duì)象,包括 Model和view)
    8.前端控制器請(qǐng)求視圖解析器去進(jìn)行視圖解析 (根據(jù)邏輯視圖名解析成真正的視圖(jsp)),通過(guò)這種策略很容易更換其他視圖技術(shù),只需要更改視圖解析器即可
    9.視圖解析器向前端控制器返回View
    10.前端控制器進(jìn)行視圖渲染 (視圖渲染將模型數(shù)據(jù)(在ModelAndView對(duì)象中)填充到request域)
    11.前端控制器向用戶響應(yīng)結(jié)果
    優(yōu)點(diǎn):

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

    缺點(diǎn):

    前端開(kāi)發(fā)重度依賴(lài)開(kāi)發(fā)環(huán)境,開(kāi)發(fā)效率低,這種架構(gòu)下,前后端協(xié)作有兩種模式:

    1、第一種是前端寫(xiě) DEMO,寫(xiě)好后,讓后端去套模板。好處是 DEMO 可以本地開(kāi)發(fā),很。不足是 還需要后端套模板,有可能套錯(cuò),套完后還需要前端確定,來(lái)回溝通調(diào)整的成本比較大;

    2、另一種協(xié)作模式是前端負(fù)責(zé)瀏覽器端的所有開(kāi)發(fā)和服務(wù)器端的 View 層模板開(kāi)發(fā)。好處是 UI 相關(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è)很大的灰色地帶是,頁(yè)面路由等功能本應(yīng)該是前端最關(guān)注的,但卻是由后端來(lái)實(shí)現(xiàn)。

    ajax 的時(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)是 A JAX 接口??雌饋?lái)是如此美妙,但回過(guò) 頭來(lái)看看的話,這與 JSP 時(shí)代區(qū)別不大。復(fù)雜度從服務(wù)端的 JSP 里移到了瀏覽器的 JavaScript,瀏覽器 端變得很復(fù)雜。類(lèi)似 Spring MVC,這個(gè)時(shí)代開(kāi)始出現(xiàn)瀏覽器端的分層架構(gòu):

    [外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-fP8yZYUq-1587440620216)()]
    缺點(diǎn):

    前后端接口的約定: 如果后端的接口一塌糊涂,如果后端的業(yè)務(wù)模型不夠穩(wěn)定,那么前端開(kāi)發(fā)會(huì)很 痛苦;不少團(tuán)隊(duì)也有類(lèi)似嘗試,通過(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)了大量的前端框架,比如: AngularJS 、 React 、Vue.js 、 EmberJS 等,這些框架總的原則是先按類(lèi)型分層,比如 Templates、Controllers、Models,然后再在層內(nèi)做切分,




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

    前后端職責(zé)很清晰: 前端工作在瀏覽器端,后端工作在服務(wù)端。清晰的分工,可以讓開(kāi)發(fā)并行,測(cè) 試數(shù)據(jù)的模擬不難,前端可以本地開(kāi)發(fā)。后端則可以專(zhuān)注于業(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ā)模式:
    ————————————————
    版權(quán)聲明:本文為CSDN博主「叁有三分之一」的原創(chuàng)文章,遵循CC 4.0 BY-SA版權(quán)協(xié)議,轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。
    原文鏈接:https://blog.csdn.net/iME_cho/article/details/105654633


分享本文至:

日歷

鏈接

個(gè)人資料

存檔