0917-3876090
0917-3876090
框架
框架在計算機科學(xué)的軟件領(lǐng)域中即軟件框架（software framework），通常指的是為了實(shí)現某個(gè)業(yè)界標準或完成特定基本任務(wù)的軟件組件規范，也指為了實(shí)現某個(gè)軟件組件規范時(shí)，提供規范所要求之基礎功能的軟件產(chǎn)品。
框架的功能類(lèi)似于基礎設施，與具體的軟件應用無(wú)關(guān)，但是提供并實(shí)現最為基礎的軟件架構和體系。軟件開(kāi)發(fā)者通常依據特定的框架實(shí)現更為復雜的商業(yè)運用和業(yè)務(wù)邏輯。這樣的軟件應用可以在支持同一種框架的軟件系統中運行。
簡(jiǎn)而言之，框架就是制定一套規范或者規則（思想），大家（程序員）在該規范或者規則（思想）下工作。或者說(shuō)使用別人搭好的舞臺來(lái)做編劇和表演。
在網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程中JavaScript語(yǔ)言尤為重要，一些JavaScript函數庫（Library）被歸類(lèi)為框架，因為其展示了一般JavaScript庫中沒(méi)有的全棧功能和屬性。
下面列舉一些流行或常見(jiàn)的JavaScript框架：
JavaScript框架
React
React（也稱(chēng)為React.js或ReactJS）是一個(gè)自由及開(kāi)放源代碼的前端JavaScript工具庫，用于基于UI組件構建用戶(hù)界面。
它由Meta（前身為Facebook）和由個(gè)人開(kāi)發(fā)者和公司組成的社群維護。React可用作開(kāi)發(fā)具有Next.js等框架的單頁(yè)、手機或服務(wù)器渲染應用程序的基礎。然而，React只專(zhuān)注狀態(tài)管理和將狀態(tài)渲染到DOM，因此創(chuàng )建React應用程序通常需要使用額外的工具庫來(lái)進(jìn)行路由實(shí)現，以及某些客戶(hù)端功能。
styled-components
Styled-components是一個(gè)CSS-in-JS樣式框架，它在JavaScript中使用標記的模板字面量。利用標記模板字面量(JavaScript的新特性)和CSS的強大功能，樣式組件styled-components允許開(kāi)發(fā)人員編寫(xiě)實(shí)際的CSS代碼來(lái)為組件設置樣式。它還消除了組件和樣式之間的映射——使用組件作為低級的樣式構造很簡(jiǎn)單。
GSAP
GSAP是一個(gè)動(dòng)畫(huà)庫，允許您使用JavaScript創(chuàng )建動(dòng)畫(huà)。可以制作現代web的專(zhuān)業(yè)級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è)應用的Web應用框架。Vue.js由尤雨溪創(chuàng )建，由他和其他活躍的核心團隊成員維護[5]。
2016年一項針對JavaScript框架的調查表明，Vue有著(zhù)89%的開(kāi)發(fā)者滿(mǎn)意度。[6]在GitHub上，該項目平均每天能收獲95顆星，為GitHub有史以來(lái)星標數第3多的項目。
Vue.js是一個(gè)開(kāi)源的模型-視圖-視圖模型JavaScript框架，用于構建用戶(hù)界面和單頁(yè)面應用程序。
Emotion
Emotion是一個(gè)專(zhuān)為使用JavaScript編寫(xiě)CSS樣式而設計的庫。它提供了強大的、可預測的樣式組合，以及具有源映射、標簽和測試實(shí)用程序等特性的優(yōu)秀開(kāi)發(fā)人員體驗。字符串和對象樣式都受支持。
Backbone.js
在處理涉及大量JavaScript的web應用程序時(shí)，首先要學(xué)習的一件事是停止將數據綁定到DOM。創(chuàng )建的JavaScript應用程序很容易變成一堆亂七八糟的jQuery選擇器和回調，它們都瘋狂地試圖在HTML UI、JavaScript邏輯和服務(wù)器上的數據庫之間保持數據同步。對于富客戶(hù)端應用程序，更結構化的方法通常會(huì )有所幫助。
使用Backbone，可以將數據表示為模型，可以創(chuàng )建、驗證、銷(xiāo)毀和保存到服務(wù)器。每當UI操作導致模型的屬性發(fā)生變化時(shí)，模型就會(huì )觸發(fā)一個(gè)“change”事件;所有顯示模型狀態(tài)的視圖都可以收到更改的通知，以便它們能夠做出相應的響應，用新信息重新呈現它們自己。在完成的Backbone應用程序中，不需要編寫(xiě)粘合代碼，在DOM中查找具有特定id的元素，并手動(dòng)更新HTML—當模型更改時(shí)，視圖只需自行更新即可。
AngularJS
AngularJS是一個(gè)基于javascript的開(kāi)源web應用框架，由Google的Angular團隊領(lǐng)導。
HTML對于聲明靜態(tài)文檔非常有用，但是當我們試圖在web應用程序中使用它來(lái)聲明動(dòng)態(tài)視圖時(shí)，它就不那么好用了。AngularJS允許你為應用擴展HTML詞匯表。生成的環(huán)境非常具有表現力、可讀性和開(kāi)發(fā)速度。
RequireJS
RequireJS是一個(gè)JavaScript文件和模塊加載器。它針對瀏覽器內使用進(jìn)行了優(yōu)化，但也可以在Rhino和Node等其他JavaScript環(huán)境中使用。使用像RequireJS這樣的模塊化腳本加載器可以提高代碼的速度和質(zhì)量。
Stimulus
Stimulus是一個(gè)微型的JavaScript框架。它并不試圖接管您的整個(gè)前端——事實(shí)上，它根本不關(guān)心呈現HTML。相反，它的目的是用足夠的行為來(lái)增強HTML，使其發(fā)光。刺激配對精美的渦輪提供了一個(gè)完整的解決方案，快速，引人注目的應用程序與最小的努力。與其他前端框架不同，Stimulus旨在通過(guò)使用簡(jiǎn)單的注釋將JavaScript對象連接到頁(yè)面上的元素，從而增強靜態(tài)或服務(wù)器渲染的HTML(即“你已經(jīng)擁有的HTML”)。
這些JavaScript對象被稱(chēng)為控制器，Stimulus會(huì )持續監視頁(yè)面，等待HTML數據控制器屬性的出現。對于每個(gè)屬性，Stimulus查看屬性的值以找到相應的控制器類(lèi)，創(chuàng )建該類(lèi)的新實(shí)例，并將其連接到元素。
Handlebars
Handlebars是一種簡(jiǎn)單的模板語(yǔ)言。
它使用模板和輸入對象來(lái)生成HTML或其他文本格式。車(chē)把模板看起來(lái)像嵌入了車(chē)把表達式的普通文本。emplate
<p>{{firstname}}{{lastname}}</p>
一個(gè)handlebars表達式是一個(gè){{，一些內容，后面跟著(zhù)一個(gè)}}。當模板執行時(shí)，這些表達式將被替換為來(lái)自輸入對象的值。
圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片圖片
UI是什么？
用戶(hù)界面（User Interface，簡(jiǎn)稱(chēng)UI，亦稱(chēng)使用者界面[1]）是系統和用戶(hù)之間進(jìn)行交互和信息交換的介質(zhì)，它實(shí)現信息的內部形式與人類(lèi)可以接受形式之間的轉換。
用戶(hù)界面是介于用戶(hù)與硬件而設計彼此之間交互溝通相關(guān)軟件，目的在使得用戶(hù)能夠方便有效率地去操作硬件以達成雙向之交互，完成所希望借助硬件完成之工作，用戶(hù)界面定義廣泛，包含了人機交互與圖形用戶(hù)界面，凡參與人類(lèi)與機械的信息交流的領(lǐng)域都存在著(zhù)用戶(hù)界面。
用戶(hù)和系統之間一般用面向問(wèn)題的受限自然語(yǔ)言進(jìn)行交互。目前有系統開(kāi)始利用多媒體技術(shù)開(kāi)發(fā)新一代的用戶(hù)界面。
組成要素
基本要素：必須有人類(lèi)感官與作用體所產(chǎn)生輸出、輸入與運作內容三方交互設計。
用戶(hù)界面使得用戶(hù)與系統之間雙向的信息傳遞成為可能：
輸入：允許用戶(hù)操作執行一套系統。
輸出：允許系統向用戶(hù)傳達操作效果。
人性要素（Human Factor）：
人類(lèi)感官知覺(jué)、心理情緒、認知、學(xué)習、記憶、反應、以及處理信息的模式、個(gè)別背景之差異等等每一項都和用戶(hù)界面有密切的關(guān)系，直接或間接地影響用戶(hù)界面的性能。
下面列舉部分常用UI框：
Bootstrap
Bootstrap是一個(gè)功能強大、功能豐富的前端工具包。在幾分鐘內構建任何東西——從原型到產(chǎn)品。
Bootstrap是一個(gè)免費的開(kāi)源CSS框架，用于響應式、移動(dòng)優(yōu)先的前端web開(kāi)發(fā)。它包含CSS和基于javascript的設計模板，用于排版、表單、按鈕、導航和其他界面組件。
Animate.css
Animate.css是一個(gè)現成的跨瀏覽器動(dòng)畫(huà)庫，可以在你的web項目中使用。非常適合強調、主頁(yè)、滑塊和注意力引導提示。
ZURB Foundation
Zurb Foundation用于在瀏覽器中創(chuàng )建原型。允許快速創(chuàng )建網(wǎng)站或應用程序，同時(shí)利用移動(dòng)和響應技術(shù)。前端框架是包含設計模式的HTML、CSS和Javascript的集合。
Tailwind CSS
Tailwind CSS的工作原理是掃描所有HTML文件、JavaScript組件和任何其他模板中的類(lèi)名，生成相應的樣式，然后將它們寫(xiě)入靜態(tài)CSS文件。它快速、靈活、可靠——運行時(shí)間為零
Marko
Marko將HTML重新想象為一種用于構建動(dòng)態(tài)和響應式用戶(hù)界面的語(yǔ)言。
開(kāi)始使用Marko最簡(jiǎn)單的方法是使用“嘗試在線(xiàn)”功能。你可以在另一個(gè)標簽中打開(kāi)它并跟隨。如果您更愿意在本地開(kāi)發(fā)，請查看Installation頁(yè)面。
CivicTheme
CivicTheme是一個(gè)開(kāi)源的、包容的、基于組件的設計系統。它的創(chuàng )建是為了讓政府和企業(yè)能夠迅速整合現代、一致和合規的數字體驗。
UIKit
UIKit是用于開(kāi)發(fā)iOS應用程序的框架。
Element UI
Element UI是一個(gè)專(zhuān)門(mén)為Vue.js設計的開(kāi)源組件庫，提供了一系列預先設計的UI組件，如按鈕、表單、表格和模態(tài)。
MUI
MUI(以前稱(chēng)為Material UI)是一個(gè)簡(jiǎn)單且可定制的組件庫，用于構建更快、更美觀(guān)、更易于訪(fǎng)問(wèn)的React應用程序。
Material Design Lite
Material Design Lite是一個(gè)面向web開(kāi)發(fā)人員的組件庫。Material Design Lite可以讓你給你的網(wǎng)站添加一個(gè)Material Design的外觀(guān)和感覺(jué)。它不依賴(lài)于任何JavaScript框架，旨在針對跨設備使用進(jìn)行優(yōu)化，在舊瀏覽器中優(yōu)雅地降級，并提供立即訪(fǎng)問(wèn)的體驗。
