前端常用的框架都有哪些？

Posted 2023-03-31

前端常用的框架有哪些？

一、 Web前端框架之Angular 2+

Angular 2+优点解析：

Angular 2+ 的最大优势在于它的流行程度。也有人认为它和 Google 密切相关的名字，会影响团队使用它。Angular 1 的迅速流行是因为那些来自其他交互式应用程序开发环境的人会发现对于开发单页面 Web 应用程序具有相似的模型-视图模式。通过对 Angular 1 进行现代化演变和重新构建框架的某些部分，Angular 2+ 已经真正的爆发了，大量的正式的和非正式培训机构数量都让人印象深刻，开发者有很强的市场竞争力。对于用户来说它有一套用于构建用户界面的丰富组件，这也是本系列中少有的几个框架能够做到这点。

缺点解析：

我们觉得 Angular 框架着重于在单个页面应用程序中创建用户界面并没有处理构建完整的 Web 应用这个更大的关注点，如果不及早确定下来，这将会导致整个项目难以维护，在实际项目中，运行时提供不属于核心框架的技术往往让人觉得不可思议，这大大降低了 TypeScript 对最终开发者的价值。

发展方向：

Angular 5 刚刚发布，这看来是 Angular 已经成功的印证了快速发布版本的承诺，在 Google 的持续支持下，Angular 会越来越成熟。

像许多的大型组织一样，Google 具有多重(分裂)的人格，从外表上看，Angular 团队和那些专注于浏览器标准的团队之间显得很和谐。但我们的观点是，和谐只是一层薄薄的窗户纸。Angular 团队对于 Web 组件和渐进式 Web 应用没有一个真正解决方案。我们认为，业界普遍认可的标准将会在 Angular 框架中会逐步实现，这将会影响到如何更好的构建 Angular 应用将成为一个中/长期的风险。

使用环境：

如果你需要在一个大型的框架内获取技术资源，框架内的技术通常很容易移植;或者你需要在框架中训练开发人员，并且还要有一定的信心，他们会在短期内获得一定的开发能力，这样的话你可以考虑 Angular 2+ 。需要注意的是 Angular1(angular.js)与 Angular2+ 是截然不同的，其中的应用、技术和经验不能直接移植到 Angular2+ 的开发中去。

如果你的 Web 应用能够很好的转化为标准的模型-视图模式，那么你也可以忽略其他直接考虑使用 Angular2+ 。

如果你对 Google Material UX 设计模式满意，那么 Material Angular 是遵循该模式的一种快速、简单且可靠的方式。

二、Web前端框架之React + Redux

React + Redux优势解析：

React 和 Redux 的最大优势在于它们相对简单和专注。做一件事情并把它做好是非常困难的，但这两个库都很有效地完成了它们的目标。虽然对于某些状态容器方法可能是外部的，但大多数开发人员还是可以轻松掌握概念，并了解单向数据体系结构的好处，简化大量的用户界面应用程序。

缺点解析：

React 和 Redux 最大的弱点不是它们是什么，而是它们不是什么。要构建一个功能丰富的 Web 应用程序，你需要许多功能，一旦脱离 React 和 Redux 和其他一些库的核心，你将发现一个非常分散的社区，拥有无数的解决方案和模式，不容易整合在一起。

因此，虽然 React 和 Redux 都是非常专注的库，但缺乏经验的团队还是会很容易地生成不可维护的解决方案，而不是意识到他们所做的选择会导致性能不佳或错误。即使有经验的开发人员也可能意识到，一个松散的架构或惯例可能会在未来困扰他们。

假省钱是一种对自己的欺骗，组织范围内采用 React 和 Redux 将轻松降低无效率问题。没有其他库和模式的广泛约定和标准化，标准化 React + Redux 比较于我们正在采用的 javascript 来编写我们的应用程序效率要高。

发展方向：

Facebook 和 React 最近从繁琐的附加专利纠纷中抽离，他们认识到，就像其他项目一样，更广泛的社区能够提高自己的声音。我觉得这有助于 Facebook 意识到他们还不能更好地了解我们，相信我们来引导项目。希望这将继续贯穿项目的特点和技术方向。

很难预测 React 和 Redux 的未来。但是，将库集中在一起，确实会显着提高适应性，大多数React + Redux 模式都会促进一个分离的体系结构，从而可以轻松地进行重构和迭代。两年前，大家喜欢的还是React + Flux，但整个社区很快就拥抱了Redux。思维或模式的其他重大转变可能很容易被采纳。这种关键能力可能会持续到未来。

使用环境：

如果你很少需要手把手指导，并且正在寻找更好的库而不是全面的框架，那么 React + Redux 可能是正确的。在这一过程中，你不仅需要对你的团队和组织的能力保持诚实，还要在你的初始开发过程中，以及在整个应用程序的长期维护过程中保持诚实。

三、Web前端框架之Vue.js

vue.js优势介绍：

渐进式构建能力是vue.js最大的优势，vue 有一个简洁而且合理的架构，使得它易于理解和构建。

vue 有一个强大的充满激情人群的社区，这为vue.js增加了巨大的价值，使得为一个空白项目创建一个综合的解决方案变得十分容易。

缺点介绍：

在模型-视图应用程序和状态容器类型的应用程序之间的互相转换可能会令人感到困惑，即使没有完美包含一个模式到另一个模式的完美转换，但让人感觉希望能维持两个模式的相关性。对于那些期待vue.js完美解决方案，并可能导致难以维护不一致的应用程序的人来说，这至少是令人困惑的。

一个更大的挑战是vue.js依赖于一个单独的人，很明显，其他的项目基本是由一个组织提供支持，但这让人感觉更加有意义，虽然它有一个强大文件的社区和许多有创新的新增项目，但是 vue 核心的开发基本落在一个人身上。

我们很高兴看到 vue 更加容易接受新兴的标准方法，但是它的类似于 Web 组件的模式，而不是真正的 Web 组件，这可能是 vue 所得不偿失的地方。

发展前景：

虽然vue.js有相当广泛的应用，但也很难预测在中期发展中这个势头能持续多久，它不是由一个商业组织直接支持并维护，因此，这很大程度上依赖于维护者的生存能力和继续维护下去的愿望来决定。

它也表现出了一定程度的语言适应能力，并且随着某些模式的落伍和失宠而继续保持自身语言的现代化和时代性，目前没有迹象表明vue.js架构将来无法适应进一步发展。

使用场景：

如果你有一个传统的Web应用程序，并需要一个强壮稳健的应用程序层，那么vue.js 可能是一个很好的选择，它有清晰的模式，即使没有经验的团队也能正确或者错误的使用它。尽管vue UX框架没有开箱即用的功能，但在vue.js上也能大量持续性构建应用，这将有利于你的项目。

以上就是今天为大家分享的关于常用的Web前端框架优缺点分析的文章。想要成为合格的前端人才，一定要掌握这些框架。

参考技术A 给你介绍Web前端三大主流框架
React：
　　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才能写大型应用。

Vue：
Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。
　　它有以下的特性：
　　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。

Angular：
　　Angular是一款优秀的前端JS框架，已经被用于Google的多款产品当中。
　　它有以下的特性：
　　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依赖注入如果代码压缩需要显示声明。 参考技术B 介绍一些好用的Web前端开发框架供大家选择：
一、 Foundation框架
Foundation框架比Bootstrap略显高大上一点，但他们俩的设计理念都非常清楚，Bootstrap有引导，尝试处理你项目中的一切所需。Foundation有基础、地基及支柱，给项目中强有力的创造与支持。相对于Bootstrap丰富的组件及插件，Foundation仅提供了有限的几种元素，其目标是即使你使用预定义的UI元素，也不应该与大家的网站长得太像。
二、 Bootstrap
Bootstrap在业界非常受欢迎，以致于有很多前端框架都在其基础上开发，如WeX5就是在Bootstrap源码基础上优化而来。Bootstrap是基于HTML、CSS和Javascript的，简洁灵活使得Web开发更加敏捷。提供优雅的HTML和CSS规范，在jQuery的基础上进行更加个性化和人性化的完善。兼容大部分jQuery插件，并包含了丰富的Web组件，如下拉菜单、按钮式下拉菜单、导航条、按钮组、分页、缩略图、进度条和媒体对象等。自带了13个jQuery插件，其中有模式对话框、标签页、滚动条和弹出框等。
三、Curl
Curl是一个命令行工具，用于通过HTTP(s)、FTP和数十种其它协议进行请求。使用Curl可以进行文件下载、检查响应标题和自由访问远程数据。在Web开发中Curl经常和RESTfulAPI一起使用用于测试连接。

四、Tree
Tree是一个小型的命令行实用程序，将目录中的文件以可视化的方式进行显示。它采用递归运行的方式，遍历每个级别的嵌套并绘制所有内容的格式树。这样就能快速的浏览并查找需要的文件。
五、Tmux
根据维基的解释，Tmux是一个终端复用器。通俗的说，它是一个能将多个终端连接到单个终端会话的工具。Tmux允许用户在终端中的程序之间切换，添加屏幕窗格，并将多个终端连接到同一个会话，使其保持同步。在远程服务器上工作时，Tmux特别有用，允许用户创建新的选项卡而无需再次登录。
六、du
du命令用于生成关于文件和目录的空间使用情况的报告。du很容易使用，可以递归地运行，遍历每个子目录并返回每个文件的大小。du常见用例：当某个驱动器的空间不足，用户不清楚每个存储器的大小。使用此命令可以快速查看每个文件夹所占用的存储空间，从而找到占用最大空间的存储器。
七、 AUI
AUI专为APIClound设计的一套框架，解决了许多移动端开发实际中遇到的许多问题是一个纯CSS框架。使用容器+布局+模块的构建方式，JS辅助，更自由更灵活更易于扩展使用。遵循GoogleMaterial设计规范，完美适配各个机型。面向HTML5，使用CSS3实现动画交互，轻量级高性能。
八、AmazeUI
据称是中国首个开源HTML5跨屏前端框架。妹子UI以移动优先为理念，从小屏逐渐到大屏，实现响应式网页。AmazeUI包含20+个CSS组件、20+个JS组件，更有多个包含不同主题的Web组件。相比国外框架，UI关注中文排版提供本地化支持。面向HTML5开发，使用CSS3来实现动画交互，轻量级高性能。
九、FrozenUI
FrozenUI是一款开源简单易用，轻量敏捷的移动端框架。基于手Q样式规范，目前全面应用于企鹅手Q增值业务中。基础样式效果简单色调清爽，社区活跃，组件自然不少。包括按钮、列表、表单、通知、提示条、弹出框、选项卡等等常用组件。还包括一个FrozenJs的JS组件库。可以在主流的android和ios上应用。基本样式使用离线包的方式减少请求提供快速接入方案。
程序员在不同业务场景下的角色互换，需要掌握多种开发工具，因此多了解一些Web前端开发框架对于工作非常有帮助。 参考技术C 1. Twitter BootStrap （Apache v2.0；响应式）
时髦、直观并且强大的前端框架，让Web开发变得更加容易。

2. Foundation （MIT；响应式）
最先进的响应式前端框架。
3. 960gs（GPL&MIT；响应式）
960gs提供了一个简单的网格系统，适合快速开发。
4. Skeleton（MIT；响应式）
非常漂亮的Web模板，适合响应式、移动友好的开发。
5. 99lime HTML KickStart（Free）
适合网站快速开发的极简HTML构建模块。
6. Kube（Free；响应式）
面向专业人员的CSS框架。
7. Less Framework（MIT；响应式）
自适应的CSS网格系统。
8. Flameinwork（Free）
适合懒人开发者的前端微框架。
9. G5 Framework（Free）
(x)HTML5、CSS、php前端开发框架。
10. Easy Framework（Free）
Easy Framework是一个一体化前端解决方案，分structural、 presentational、interactive三层。
11. Blueprint（Free）
一个旨在减少开发时间的前端框架。
12. YAML（Creative Commons）
(x)HTML+CSS框架，适合开发现代化浮动布局。
13. BlueTrip（Free）
一个功能全面、并且美丽的CSS框架，适合于Blueprint搭配使用。
14. YUI3:Grids CSS（BSD）
YUI Grids CSS是最著名的CSS框架之一，是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。
15. 52framework（Creative Commons）
对HTML5支持非常好，简单易用。
16. elastiCSS（MIT）
一个基于Web接口和印刷布局的简单CSS框架。
17. Emastic（Free）
一个与众不同的CSS框架。
18. Fluid 960 Gride System（GPL/MIT）

Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System：传承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS（MIT）
一个面向对象的CSS框架，能让你的工作流更加简洁。xCSS基于CSS，可以在开发复杂样式时，提供面向对象的工作流。
20. EM CSS Framework（MIT/GPL）
EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。 参考技术D React：
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才能写大型应用。

网页前端常用的库或框架都有哪些

bootstrap是twitter出的一款不错的UI框架，或者与其说是框架不如说是类库（lib），当然这里边牵扯到一个“究竟什么是框架什么是类库？”的问题，我们暂时不谈。毕竟是有大公司背景的代码堆，我觉得没什么“落伍”可言。
angular是前两年之内突然火得一塌糊涂的一个fe框架，这个我觉得可以算的上是真正意义上的框架了，MVVM双向绑定，包括它拥有足够完善的社区、生态，甚至chrome上都有很多好用的相关插件（这一点可以说是占了google出品的光），比较完整的大型项目都是可以考虑引入的。但如果你的网站只是做一些轻量级的东西，杀鸡焉用宰牛刀吧我觉得。
backbone主要针对的MVC中的M层，至少我是这么理解的。对UI层它几乎没什么太多的限制，一方面给出了coder自由度进行发挥，另一方面也等于在这方面框架本身对开发没提供什么太大的帮助。我觉得这更像是一个高手向的框架，另外对于underscore前端模板那一套东西，说实话作为一名php java啥都能写的FE我始终觉得这套东西有那么一种纯JS工程师的一厢情愿的意味。这是个人看法了，不一定准确，况且有人会搬出ajax动态渲染时 前端模板的作用来反驳我，别急着反驳，至少往下看完我说的话。
相比之下，react可以说是一个在MVC中V层做的十分出色和新颖的框架了，独特的jsx编译机制就已经让你的代码变得高大上了，我是觉得这个类库在UI层做的更彻底更专业，或者说让FE的代码更专业了。更何况，react比angular更年轻，而且同样拥有大公司背景，react native一出更是让JS工程师的地位取得了革命性的提升，（不要跟我提phonegap，用过两个东西后你会明白，react打包的app性能甩phonegap几条街没问题）。另外既然楼主提到了之前的网站是bootstrap，不妨可以看一看react-bootstrap这个东西，或许这就是你想要的。 参考技术A 对于初学Web前端的人来说，首先需要了解一些前端开发中的工具，有利于提升开发效率，在这里我们梳理一下目前比较常用的库，组件和构建工具。
前端UI库
1. Bootstrap
网址：https://www.bootcss.com/
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 Web 项目。Bootstrap支持响应式布局设计，让一个网站可以兼容不同分辨率的设备，给用户提供更好的视觉体验。友好的学习曲线，卓越的兼容性，响应式设计等都是bootstrap的优点。
2. ElementUI
网址：https://element.eleme.cn/#/
Element，一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。可以很好的搭配vue来进行项目的开发，提供了很多风格统一美观的组件。
3. Antd Design
网址：https://ant.design/index-cn
antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。封装了很多开箱即用的react组件，提炼自企业级中后台产品的交互语言和视觉风格，并使用Typescript开发，提供完整的类型定义文件。
构建工具
1. Webpack
网址： https://www.webpackjs.com/
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
在webpack看来一切都是模块!这就是它不可不说的优点，包括你的JavaScript代码，也包括CSS和fonts以及图片等等等，只有通过合适的loaders，它们都可以被当做模块被处理。
2. Gulp
网址：https://www.gulpjs.com.cn/
gulp是一个自动化工具，前端开发者可以使用它来处理常见任务，如搭建web服务器，热加载，使用预处理器sass，less，优化资源压缩css,javascript，图片等。另外gulp基于node强大的流(stream)能力，gulp在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。
可视化组件
1. Echarts
网址：https://echarts.apache.org/zh/index.html
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器(IE8/9/10/11，Chrome，Firefox，Safari等)，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
2. HighCharts
网址：https://www.highcharts.com.cn/
方便快捷的纯 JavaScript 交互性图表，Highcharts 已经被成千上万的开发者及 72 个全球100强企业使用，是目前是市面上最简单灵活的图表库。