框架

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

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

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

　　在網(wǎng)頁開發(fā)過程中JavaScript語言尤為重要，一些JavaScript函數(shù)庫（Library）被歸類為框架，因為其展示了一般JavaScript庫中沒有的全棧功能和屬性。

　　下面列舉一些流行或常見的JavaScript框架：

　　JavaScript框架

　　React

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

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

　　styled-components

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

　　GSAP

　　GSAP是一個動畫庫，允許您使用JavaScript創(chuàng)建動畫。可以制作現(xiàn)代web的專業(yè)級JavaScript動畫。

　　Vue.js

　　Vue.js（/vju?/，簡稱Vue）是一個用于創(chuàng)建用戶界面的開源MVVM前端JavaScript框架，也是一個創(chuàng)建單頁應(yīng)用的Web應(yīng)用框架。Vue.js由尤雨溪創(chuàng)建，由他和其他活躍的核心團隊成員維護[5]。

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

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

　　Emotion

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

　　Backbone.js

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

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

　　AngularJS

　　AngularJS是一個基于javascript的開源web應(yīng)用框架，由Google的Angular團隊領(lǐng)導(dǎo)。

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

　　RequireJS

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

　　Stimulus

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

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

　　Handlebars

　　Handlebars是一種簡單的模板語言。

　　它使用模板和輸入對象來生成HTML或其他文本格式。車把模板看起來像嵌入了車把表達式的普通文本。emplate

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

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

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

　　UI是什么？

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

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

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

　　組成要素

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

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

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

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

　　人性要素（Human Factor）：

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

　　下面列舉部分常用UI框：

　　Bootstrap

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

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

　　Animate.css

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

　　ZURB Foundation

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

　　Tailwind CSS

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

　　Marko

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

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

　　CivicTheme

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

　　UIKit

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

　　Element UI

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

　　MUI

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

　　Material Design Lite

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