前端技术有哪些常见框架？

在日常的 Web 前端技术开发中，适时地运用一些框架，可以事半功倍哦！那么，我们熟悉的有哪些常用的 Web 前端技术框架呢？接下来我带大家去揭晓吧！

web 前端框架有：

1. angular，一种用于创建单一应用程序界面的前端框架；
2. react，一个用来构建用户界面的 javascript 开发框架；
3. vue，一套用于构建用户界面的渐进式 javascript 框架；
4. Ant Design – 一套企业级 UI 设计语言和 React 组件库
5. bootstartp，是基于 html、css、javascript 的前端框架；
6. quick ui，一套企业级 web 前端开发解决方案；
7. sui，一个前端组件库。

web 前端框架有哪些？

1、Angular

AngularJS 由 Misko Hevery 等人于 2009 年创建，后来呗谷歌所收购。它是一款优秀的前端 JS 框架被应用多多种产品中去。它不仅是一个理念先进的前端开发框架，还是一种端对端的解决方案。它遵循架构设计中的 MVC 模式，提倡数据与逻辑处理组件的松耦合。AngularJS 通过指令技术实现了对 HTML 的自然扩展，以及通过编译技术实现了数据模型与展现视图的双向自动同步，减轻了复杂的 DOM 操作。另外它也对前端的自动化测试技术提供了良好的支持。

Angular 是一种用于创建单一应用程序界面的前端框架，它有许多核心功能例如数据绑定，服务，指令以及依赖注入等等。它具有模块功能强大，拥有自定义命令等优点

特性：

• 1.良好的应用程序结构
• 2.双向数据绑定
• 3.指令
• 4.HTML 模板
• 5.可嵌入、注入和测试

优点：

• 1.模板功能强大丰富，自带了极其丰富的 angular 指令。
• 2.是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
• 3.自定义指令，自定义指令后可以在项目中多次使用。
• 4.ng 模块化比较大胆的引入了 Java 的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
• 5.angularjs 是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

缺点：

• 1.angular 入门很容易但深入后概念很多,学习中较难理解。
• 2.文档例子非常少,官方的文档基本只写了 api,一个例子都没有,很多时候具体怎么用都是 google 来的,或直接问 misko,angular 的作者。
• 3.对 IE6/7 兼容不算特别好,就是可以用 jQuery 自己手写代码解决一些。
• 4.指令的应用的最佳实践教程少,angular 其实很灵活,如果不看一些作者的使用原则,很容易写出四不像的代码,例如 js 中还是像 jQuery 的思想有很多 dom 操作。
• 5.DI 依赖注入如果代码压缩需要显示声明。

2、React

React，facebook 出品，正式版推出是在 2013 年，比 angular 晚了 4 年，但得益于其创新式的 VirtualDOM，性能上碾压 angularJS，一经推出，火的一塌糊涂。 特点很多，VirtualDOM、JSX、Diff 算法等，支持 ES6 语法，采用函数式编程，门槛稍高，但也更灵活，能让开发具有更多可能性。

特性

• 1.声明式设计：React 采用声明范式，可以轻松描述应用。
• 2.高效：React 通过对 DOM 的模拟，最大限度地减少与 DOM 的交互。
• 3.灵活：React 可以与已知的库或框架很好地配合。

优点：

• 1.速度快：在 UI 渲染过程中，React 通过在虚拟 DOM 中的微操作来实现对实际 DOM 的局部更新。
• 2.跨浏览器兼容：虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的 API，甚至在 IE8 中都是没问题的。
• 3.模块化：为你程序编写独立的模块化 UI 组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
• 4.单向数据流：Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构 5.同构、纯粹的 javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是 JavaScript 的执行，预渲染你的应用有助于搜索引擎优化。6.兼容性好：比如使用 RequireJS 来加载和打包，而 Browserify 和 Webpack 适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。缺点：React 本身只是一个 V 而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上 ReactRouter 和 Flux 才能写大型应用。

3、Vue

Vue 作为最后推出的框架（2014 年），借鉴了前辈 angular 和 react 的特点（如 VirtualDOM、双向数据绑定、diff 算法、响应式属性、组件化开发等）并做了相关优化，使其使用起来更加方便，更容易上手，比较少适合初学者。

特性：

• 1.轻量级的框架
• 2.双向数据绑定
• 3.指令
• 4.插件化

优点：

• 1.简单：官方文档很清晰，比 Angular 简单易学。
• 2.快速：异步批处理方式更新 DOM。
• 3.组合：用解耦的、可复用的组件组合你的应用程序。
• 4.紧凑：~18kbmin+gzip，且无依赖。
• 5.强大：表达式无需声明依赖的可推导属性(computedproperties)。
• 6.对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

缺点：

• 1.新生儿：Vue.js 是一个新的项目，没有 angular 那么成熟。
• 2.影响度不是很大：google 了一下，有关于 Vue.js 多样性或者说丰富性少于其他一些有名的库
• 3.不支持 IE8。

4、Ant Design of React

antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

特性

• 🌈 提炼自企业级中后台产品的交互语言和视觉风格。
• 📦 开箱即用的高质量 React 组件。
• 🛡 使用 TypeScript 开发，提供完整的类型定义文件。
• ⚙️ 全链路开发和设计工具体系。
• 🌍 数十个国际化语言支持。
• 🎨 深入每个细节的主题定制能力。

兼容环境

• 现代浏览器
• 支持服务端渲染。
• Electron

5、Bootstartp

Bootstrap 是 Twitter 开源的基于 HTML、CSS、JavaScript 的前端框架。它是为实现快速开发 Web 应用程序而设计的一套前端工具包。它支持响应式布局，并且在 V3 版本之后坚持移动设备优先。

Bootstrap 提供了优雅的 HTML 和 CSS 规范，它即是由动态 CSS 语言 Less 写成。Bootstrap 一经推出后颇受欢迎，一直是 GitHub 上的热门开源项目，包括 NASA 的 MSNBC（微软全国广播公司）的 Breaking News 都使用了该项目。 国内一些移动开发者较为熟悉的框架，如 WeX5 前端开源框架等，也是基于 Bootstrap 源码进行性能优化而来。

Bootstrap 特点

Bootstrap 非常流行，得益于它非常实用的功能和特点。主要核心功能特点如下：

1）跨设备、跨浏览器

可以兼容所有现代浏览器，包括比较诟病的 IE7、8。当然，本课程不再考虑 IE9 以下浏览器。

2）响应式布局

不但可以支持 PC 端的各种分辨率的显示，还支持移动端 PAD、手机等屏幕的响应式切换显示。

3）提供的全面的组件

Bootstrap 提供了实用性很强的组件，包括：导航、标签、工具条、按钮等一系列组件，方便开发者调用。

4）内置 jQuery 插件

Bootstrap 提供了很多实用性的 jquery 插件，这些插件方便开发者实现 Web 中各种常规特效。

5）支持 HTML5、CSS3

HTML5 语义化标签和 CSS3 属性，都得到很好的支持。

6）支持 LESS 动态样式

LESS 使用变量、嵌套、操作混合编码，编写更快、更灵活的 CSS。它和 Bootstrap 能很好的配合开发。

6、QUICK UI

QUICK UI 一套完整的企业级 web 前端开发解决方案，由基础框架、UI 组件库、皮肤包、示例工程和文档等组成。使用 QUICKUI 开发者可以极大地减少工作量提高开发效率，快速构建功能强大、美观、兼容的 web 应用系统。

7、MDC Web

Material Components for the web(MDC Web)，谷歌为 Web 设计的全新前端框架。MDC Web 帮助开发人员执行 Material Design，组件由谷歌的核心工程师团队和 UX 设计人员开发。这些组件可以建立可靠的开发工作流程以构建美观且功能强大的 Web 项目。

8、Pure

Bootstrap，Patternfly 和 MDC Web 功能非常强大的 CSS 框架，但非常繁琐复杂。如想要一个轻量级的 CSS 框架建议尝试 Pure.css，本身更接近于 CSS 编程，但又可以帮助构建一个不错的网页。Pure 是具有最小占用空间的轻量级 CSS 框架由 Yahoo 开发根据 BSD 许可是开源。

9、Foundation

Foundation 声称是世界上最先进的响应式前端框架。它提供了用于构建专业网站的高级功能和教程。许多公司，组织都使用该框架，并且该框架具有大量可用的文档。

10、Bulma

Bulma 基于 Flexbox 的开源框架可根据 MIT 许可证开源。一个非常轻量级的框架，只需要一个 CSS 文件。Bulma 拥有简洁明了的文档可轻松选择想要的主题。还具有许多 Web 组件可以在设计中使用它们。

11、Skeleton

轻量级框架 Skeleton。Skeleton 库只有大约 400 行，且该框架仅提供一些基本的 CSS 框架组件。Skeleton 还是提供了详细的文档来帮助快速上手。

12、Materialize

Materialize 是一个基于 Material Design 风格的一个现代化的响应式前端框架，解决了最繁重的工作，结合的自定义组件为提供默认的样式。Materialize 的文档页面非常全面很容易遵循。其组件页面包括按钮，卡片，导航等。

13、Bootflat

Bootflat 是从 Twitter 的 Bootstrap 派生的开源 CSS 框架。与 Bootstrap 相比 Bootflat 更简单更加轻量级。大部分都是图像没有太多的文字。

14、PatternFly

PatternFly 是 Red Hat 的开源 CSS 框架，和 Bootstrap 不同的是 Bootstrap 是为那些想要创建漂亮网站的人而设计，而 PatternFly 主要专注于企业应用程序开发人员提供诸如条形图、图表、导航之类的组件，实际上 Red Hat 就是使用它创建了 OpenShift。除了静态 HTML，PatternFly 还支持 ReactJS 框架，这是 Facebook 开发的流行 JavaScript 框架。PatternFly 具有许多适用于企业级应用程序的高级组件，如条形图，图表，模式和布局。

15、SUI

“SUI 是一套基于 bootstrap 开发的前端组件库，同时它她也是一套设计规范。通过 SUI，可以非常方便的设计和实现精美的页面”。 果然 还是直接引用官方给的枯燥无味广告要节省自己的脑细胞( 囧… )，当然了就像广告说的，如果你之前用过 Bootstrap， 那么可以轻松转 向 SUI，这可能就是淘宝给前端屌丝们的福利了。

结语

关于”前端技术有哪些常见框架”这一问题的介绍已经给出。对于从事前端开发的同行来说，除了熟悉上述常见的前端开发框架外，还需要掌握几种常用开发框架的技术应用，以提高工作效率，并满足不同产品需求。