<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          前端架構演進及主流UI
          
				
           2020-4-24      前端達人      
          
			
          
			
          
				
          
    文章目錄

          

            
    
    
            
        
            
    
            
    
    
            
        
            
    
            
    
            
        前端三要素
    
            
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 創立者)主導。
            
    
            
        JavaScript 框架
    
            
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:模塊打包器，主要作用是打包、壓縮、合并及按序加載
            

            
    
            
        NodeJs
    
            
    
            
        
            
    
            
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 的關系
            
    
            
        常用UI框架
    
            
    
            
        
            
    
            
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
            
github地址：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
            
github地址：https://github.com/ElemeFE/mint-ui
            
iview
            

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

            
官網地址：https://www.iviewui.com/
            
github地址：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
            
github地址： 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
            
github地址： https://github.com/at-ui/at-ui
            
CubeUI
            
cube-ui 是滴滴團隊開發的基于 Vue.js 實現的精致移動端組件庫。支持按需引入和后編譯，輕量靈活; 擴展性強，可以方便地基于現有組件實現二次開發.
            

            
官網地址：https://didi.github.io/cube-ui/#/zh-CN
            
github地址：https://github.com/didi/cube-ui/
            
Flutter
            

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

            
官網地址：https://flutter.dev/docs
            
github地址：https://github.com/flutter/flutter
            
備注:Google 出品，主要特點是快速構建原生 APP 應用程序，如做混合應用該框架為必選框架
            

            
Ionic
            

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

            
官網地址：https://ionicframework.com/
            
github地址：https://github.com/ionic-team/ionic
            
mpvue
            

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

            
官網地址：http://mpvue.com/
            
github地址：https://github.com/Meituan-Dianping/mpvue
            
備注:完備的 Vue 開發體驗，并且支持多平臺的小程序開發，推薦使用
            

            
WeUi
            

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

            
官網地址：https://weui.io/
            
github地址：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 開始有能力運行在服務端。這意味著可以有一種新的研發模式:
            
————————————————
            
版權聲明：本文為CSDN博主「叁有三分之一」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
            
原文鏈接：https://blog.csdn.net/iME_cho/article/details/105654633
            

            
    
            
    
            
        
            
    
            

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合