框架

　　框架在计算机科学的软件领域中即软件框架（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框架，旨在针对跨设备使用进行优化，在旧浏览器中优雅地降级，并提供立即访问的体验。