框架

　　框架在計(jì)算機(jī)科學(xué)的軟件領(lǐng)域中即軟件框架（software framework），通常指的是為了實(shí)現(xiàn)某個(gè)業(yè)界標(biāo)準(zhǔn)或完成特定基本任務(wù)的軟件組件規(guī)范，也指為了實(shí)現(xiàn)某個(gè)軟件組件規(guī)范時(shí)，提供規(guī)范所要求之基礎(chǔ)功能的軟件產(chǎn)品。

　　框架的功能類(lèi)似于基礎(chǔ)設(shè)施，與具體的軟件應(yīng)用無(wú)關(guān)，但是提供并實(shí)現(xiàn)最為基礎(chǔ)的軟件架構(gòu)和體系。軟件開(kāi)發(fā)者通常依據(jù)特定的框架實(shí)現(xiàn)更為復(fù)雜的商業(yè)運(yùn)用和業(yè)務(wù)邏輯。這樣的軟件應(yīng)用可以在支持同一種框架的軟件系統(tǒng)中運(yùn)行。

　　簡(jiǎn)而言之，框架就是制定一套規(guī)范或者規(guī)則（思想），大家（程序員）在該規(guī)范或者規(guī)則（思想）下工作?；蛘哒f(shuō)使用別人搭好的舞臺(tái)來(lái)做編劇和表演。

　　在網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中JavaScript語(yǔ)言尤為重要，一些JavaScript函數(shù)庫(kù)（Library）被歸類(lèi)為框架，因?yàn)槠湔故玖艘话鉐avaScript庫(kù)中沒(méi)有的全棧功能和屬性。

　　下面列舉一些流行或常見(jiàn)的JavaScript框架：

　　JavaScript框架

　　React

　　React（也稱(chēng)為React.js或ReactJS）是一個(gè)自由及開(kāi)放源代碼的前端JavaScript工具庫(kù)，用于基于UI組件構(gòu)建用戶(hù)界面。

　　它由Meta（前身為Facebook）和由個(gè)人開(kāi)發(fā)者和公司組成的社群維護(hù)。React可用作開(kāi)發(fā)具有Next.js等框架的單頁(yè)、手機(jī)或服務(wù)器渲染應(yīng)用程序的基礎(chǔ)。然而，React只專(zhuān)注狀態(tài)管理和將狀態(tài)渲染到DOM，因此創(chuàng)建React應(yīng)用程序通常需要使用額外的工具庫(kù)來(lái)進(jìn)行路由實(shí)現(xiàn)，以及某些客戶(hù)端功能。

　　styled-components

　　Styled-components是一個(gè)CSS-in-JS樣式框架，它在JavaScript中使用標(biāo)記的模板字面量。利用標(biāo)記模板字面量(JavaScript的新特性)和CSS的強(qiáng)大功能，樣式組件styled-components允許開(kāi)發(fā)人員編寫(xiě)實(shí)際的CSS代碼來(lái)為組件設(shè)置樣式。它還消除了組件和樣式之間的映射——使用組件作為低級(jí)的樣式構(gòu)造很簡(jiǎn)單。

　　GSAP

　　GSAP是一個(gè)動(dòng)畫(huà)庫(kù)，允許您使用JavaScript創(chuàng)建動(dòng)畫(huà)?？梢灾谱鳜F(xiàn)代web的專(zhuān)業(yè)級(jí)JavaScript動(dòng)畫(huà)。

　　Vue.js

　　Vue.js（/vju?/，簡(jiǎn)稱(chēng)Vue）是一個(gè)用于創(chuàng)建用戶(hù)界面的開(kāi)源MVVM前端JavaScript框架，也是一個(gè)創(chuàng)建單頁(yè)應(yīng)用的Web應(yīng)用框架。Vue.js由尤雨溪?jiǎng)?chuàng)建，由他和其他活躍的核心團(tuán)隊(duì)成員維護(hù)[5]。

　　2016年一項(xiàng)針對(duì)JavaScript框架的調(diào)查表明，Vue有著89%的開(kāi)發(fā)者滿(mǎn)意度。[6]在GitHub上，該項(xiàng)目平均每天能收獲95顆星，為GitHub有史以來(lái)星標(biāo)數(shù)第3多的項(xiàng)目。

　　Vue.js是一個(gè)開(kāi)源的模型-視圖-視圖模型JavaScript框架，用于構(gòu)建用戶(hù)界面和單頁(yè)面應(yīng)用程序。

　　Emotion

　　Emotion是一個(gè)專(zhuān)為使用JavaScript編寫(xiě)CSS樣式而設(shè)計(jì)的庫(kù)。它提供了強(qiáng)大的、可預(yù)測(cè)的樣式組合，以及具有源映射、標(biāo)簽和測(cè)試實(shí)用程序等特性的優(yōu)秀開(kāi)發(fā)人員體驗(yàn)。字符串和對(duì)象樣式都受支持。

　　Backbone.js

　　在處理涉及大量JavaScript的web應(yīng)用程序時(shí)，首先要學(xué)習(xí)的一件事是停止將數(shù)據(jù)綁定到DOM。創(chuàng)建的JavaScript應(yīng)用程序很容易變成一堆亂七八糟的jQuery選擇器和回調(diào)，它們都瘋狂地試圖在HTML UI、JavaScript邏輯和服務(wù)器上的數(shù)據(jù)庫(kù)之間保持?jǐn)?shù)據(jù)同步。對(duì)于富客戶(hù)端應(yīng)用程序，更結(jié)構(gòu)化的方法通常會(huì)有所幫助。

　　使用Backbone，可以將數(shù)據(jù)表示為模型，可以創(chuàng)建、驗(yàn)證、銷(xiāo)毀和保存到服務(wù)器。每當(dāng)UI操作導(dǎo)致模型的屬性發(fā)生變化時(shí)，模型就會(huì)觸發(fā)一個(gè)“change”事件;所有顯示模型狀態(tài)的視圖都可以收到更改的通知，以便它們能夠做出相應(yīng)的響應(yīng)，用新信息重新呈現(xiàn)它們自己。在完成的Backbone應(yīng)用程序中，不需要編寫(xiě)粘合代碼，在DOM中查找具有特定id的元素，并手動(dòng)更新HTML—當(dāng)模型更改時(shí)，視圖只需自行更新即可。

　　AngularJS

　　AngularJS是一個(gè)基于javascript的開(kāi)源web應(yīng)用框架，由Google的Angular團(tuán)隊(duì)領(lǐng)導(dǎo)。

　　HTML對(duì)于聲明靜態(tài)文檔非常有用，但是當(dāng)我們?cè)噲D在web應(yīng)用程序中使用它來(lái)聲明動(dòng)態(tài)視圖時(shí)，它就不那么好用了。AngularJS允許你為應(yīng)用擴(kuò)展HTML詞匯表。生成的環(huán)境非常具有表現(xiàn)力、可讀性和開(kāi)發(fā)速度。

　　RequireJS

　　RequireJS是一個(gè)JavaScript文件和模塊加載器。它針對(duì)瀏覽器內(nèi)使用進(jìn)行了優(yōu)化，但也可以在Rhino和Node等其他JavaScript環(huán)境中使用。使用像RequireJS這樣的模塊化腳本加載器可以提高代碼的速度和質(zhì)量。

　　Stimulus

　　Stimulus是一個(gè)微型的JavaScript框架。它并不試圖接管您的整個(gè)前端——事實(shí)上，它根本不關(guān)心呈現(xiàn)HTML。相反，它的目的是用足夠的行為來(lái)增強(qiáng)HTML，使其發(fā)光。刺激配對(duì)精美的渦輪提供了一個(gè)完整的解決方案，快速，引人注目的應(yīng)用程序與最小的努力。與其他前端框架不同，Stimulus旨在通過(guò)使用簡(jiǎn)單的注釋將JavaScript對(duì)象連接到頁(yè)面上的元素，從而增強(qiáng)靜態(tài)或服務(wù)器渲染的HTML(即“你已經(jīng)擁有的HTML”)。

　　這些JavaScript對(duì)象被稱(chēng)為控制器，Stimulus會(huì)持續(xù)監(jiān)視頁(yè)面，等待HTML數(shù)據(jù)控制器屬性的出現(xiàn)。對(duì)于每個(gè)屬性，Stimulus查看屬性的值以找到相應(yīng)的控制器類(lèi)，創(chuàng)建該類(lèi)的新實(shí)例，并將其連接到元素。

　　Handlebars

　　Handlebars是一種簡(jiǎn)單的模板語(yǔ)言。

　　它使用模板和輸入對(duì)象來(lái)生成HTML或其他文本格式。車(chē)把模板看起來(lái)像嵌入了車(chē)把表達(dá)式的普通文本。emplate

　　<p>{{firstname}}{{lastname}}</p>

　　一個(gè)handlebars表達(dá)式是一個(gè){{，一些內(nèi)容，后面跟著一個(gè)}}。當(dāng)模板執(zhí)行時(shí)，這些表達(dá)式將被替換為來(lái)自輸入對(duì)象的值。

　　圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片

　　UI是什么？

　　用戶(hù)界面（User Interface，簡(jiǎn)稱(chēng)UI，亦稱(chēng)使用者界面[1]）是系統(tǒng)和用戶(hù)之間進(jìn)行交互和信息交換的介質(zhì)，它實(shí)現(xiàn)信息的內(nèi)部形式與人類(lèi)可以接受形式之間的轉(zhuǎn)換。

　　用戶(hù)界面是介于用戶(hù)與硬件而設(shè)計(jì)彼此之間交互溝通相關(guān)軟件，目的在使得用戶(hù)能夠方便有效率地去操作硬件以達(dá)成雙向之交互，完成所希望借助硬件完成之工作，用戶(hù)界面定義廣泛，包含了人機(jī)交互與圖形用戶(hù)界面，凡參與人類(lèi)與機(jī)械的信息交流的領(lǐng)域都存在著用戶(hù)界面。

　　用戶(hù)和系統(tǒng)之間一般用面向問(wèn)題的受限自然語(yǔ)言進(jìn)行交互。目前有系統(tǒng)開(kāi)始利用多媒體技術(shù)開(kāi)發(fā)新一代的用戶(hù)界面。

　　組成要素

　　基本要素：必須有人類(lèi)感官與作用體所產(chǎn)生輸出、輸入與運(yùn)作內(nèi)容三方交互設(shè)計(jì)。

　　用戶(hù)界面使得用戶(hù)與系統(tǒng)之間雙向的信息傳遞成為可能：

　　輸入：允許用戶(hù)操作執(zhí)行一套系統(tǒng)。

　　輸出：允許系統(tǒng)向用戶(hù)傳達(dá)操作效果。

　　人性要素（Human Factor）：

　　人類(lèi)感官知覺(jué)、心理情緒、認(rèn)知、學(xué)習(xí)、記憶、反應(yīng)、以及處理信息的模式、個(gè)別背景之差異等等每一項(xiàng)都和用戶(hù)界面有密切的關(guān)系，直接或間接地影響用戶(hù)界面的性能。

　　下面列舉部分常用UI框：

　　Bootstrap

　　Bootstrap是一個(gè)功能強(qiáng)大、功能豐富的前端工具包。在幾分鐘內(nèi)構(gòu)建任何東西——從原型到產(chǎn)品。

　　Bootstrap是一個(gè)免費(fèi)的開(kāi)源CSS框架，用于響應(yīng)式、移動(dòng)優(yōu)先的前端web開(kāi)發(fā)。它包含CSS和基于javascript的設(shè)計(jì)模板，用于排版、表單、按鈕、導(dǎo)航和其他界面組件。

　　Animate.css

　　Animate.css是一個(gè)現(xiàn)成的跨瀏覽器動(dòng)畫(huà)庫(kù)，可以在你的web項(xiàng)目中使用。非常適合強(qiáng)調(diào)、主頁(yè)、滑塊和注意力引導(dǎo)提示。

　　ZURB Foundation

　　Zurb Foundation用于在瀏覽器中創(chuàng)建原型。允許快速創(chuàng)建網(wǎng)站或應(yīng)用程序，同時(shí)利用移動(dòng)和響應(yīng)技術(shù)。前端框架是包含設(shè)計(jì)模式的HTML、CSS和Javascript的集合。

　　Tailwind CSS

　　Tailwind CSS的工作原理是掃描所有HTML文件、JavaScript組件和任何其他模板中的類(lèi)名，生成相應(yīng)的樣式，然后將它們寫(xiě)入靜態(tài)CSS文件。它快速、靈活、可靠——運(yùn)行時(shí)間為零

　　Marko

　　Marko將HTML重新想象為一種用于構(gòu)建動(dòng)態(tài)和響應(yīng)式用戶(hù)界面的語(yǔ)言。

　　開(kāi)始使用Marko最簡(jiǎn)單的方法是使用“嘗試在線(xiàn)”功能。你可以在另一個(gè)標(biāo)簽中打開(kāi)它并跟隨。如果您更愿意在本地開(kāi)發(fā)，請(qǐng)查看Installation頁(yè)面。

　　CivicTheme

　　CivicTheme是一個(gè)開(kāi)源的、包容的、基于組件的設(shè)計(jì)系統(tǒng)。它的創(chuàng)建是為了讓政府和企業(yè)能夠迅速整合現(xiàn)代、一致和合規(guī)的數(shù)字體驗(yàn)。

　　UIKit

　　UIKit是用于開(kāi)發(fā)iOS應(yīng)用程序的框架。

　　Element UI

　　Element UI是一個(gè)專(zhuān)門(mén)為Vue.js設(shè)計(jì)的開(kāi)源組件庫(kù)，提供了一系列預(yù)先設(shè)計(jì)的UI組件，如按鈕、表單、表格和模態(tài)。

　　MUI

　　MUI(以前稱(chēng)為Material UI)是一個(gè)簡(jiǎn)單且可定制的組件庫(kù)，用于構(gòu)建更快、更美觀、更易于訪問(wèn)的React應(yīng)用程序。

　　Material Design Lite

　　Material Design Lite是一個(gè)面向web開(kāi)發(fā)人員的組件庫(kù)。Material Design Lite可以讓你給你的網(wǎng)站添加一個(gè)Material Design的外觀和感覺(jué)。它不依賴(lài)于任何JavaScript框架，旨在針對(duì)跨設(shè)備使用進(jìn)行優(yōu)化，在舊瀏覽器中優(yōu)雅地降級(jí)，并提供立即訪問(wèn)的體驗(yàn)。