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