几大主流的前端框架（UI/JS）框架

如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已，现在的前端越来越复杂，知识点越来越丰富。

要做WEB前端，就需要知道前端到底是什么，需要学习那些知识；前端至少要懂的三个部分：HTML，CSS，JavaScript（简称JS），那首先先明确这三个概念：

HTML负责结构，网页想要表达的内容由html书写。

CSS负责样式，网页的美与丑由它来控制

JS负责交互，用户和网页产生的互动由它来控制。

web前端发展至今，演变出了无数的库和框架；说到库第一时间想到的是不是jquery？在小编刚接触库的时候也是从jQuery开始的；今天我们就来说说前端发展到现在都有哪些好用的库框架。

2016年开始应该是互联网飞速发展的几年，同时也是Web前端开发非常火爆的一年，Web 前端技术发展速度让人感觉几乎不是继承式的迭代，而是一次次的变革和创造。这一年中有很多热门的前端开发框架，下面源码时代web小编为大家总结2016年至今最受欢迎的几款前端框架。

在这互联网飞速发展的信息时代，技术的更新迭代也在加快。目前看来，火了十几年的Java技术现在仍然是棵常青树。回想两年前初来咋到，也是想好好当一名java程序员，五年计划都行想好了，最后还是阴差阳错搞了前端。前端目前来看还是非常火的，随着IT技术的百花齐放，新的前端框架不断推出，但大多都还在狂吼的阶段。其实一直以来对技术的理解是技术服务于业务和产品，产品又在不同程度的推进着技术的演进。Web、无线、物联网、VR、PC从不同方向推进着技术的融合与微创新。程序员在不同业务场景下的角色互换。而随着Node.js的出现语言的角色也在发生着转变，js扮演了越来越重要的角色。也就有了茶余饭后也把了解到的知识整理一下。

一、前端UI框架组件库：

说到前端框架我第一印象中想起React、Vue和Angular，不知道你是否与我一样想到这些，现在常用的有：Bootstrap、jQuery UI、BootMetro、AUI常用的还有很多、就不一一跟大家举例出来了，因为很多朋友认为在不同项目开发中用到的前端框架不一样，其实也有一款可以适用于多种项目开发的前端框架，只是没发现。

用前端框架开发项目的原因？

这个应该是最好解决的问题，首先就是减少造轮子的想法，能够快速的开发一款web应用对于公司来说都是非常愿意开到的，在时间和成本之间就能够节约很多的时间，这是其中一点，另外一点就是使用前端框架的组件功能，只要组件功能强大，什么样的项目都能够开发（前提是：要熟悉前端框架的功能！），时间成本问题就能够轻松解决。

没有设计师也能做出精美页面效果的前端框架

虽然市场中有很多的前端框架，但部分UI框架是属于组件库，然而QUICK UI跟当下流行的三大底层框架React、Vue和Angular不同，QUICK UI提供了一整套前端解决方案，包括前后端分离的开发框架、100多种功能强大的UI控件、几十套精美的皮肤模板和近16万字的开发文档，满足你所以开发项目都不是问题。

二、前端框架库：

1.Node.Js

地址：http://www.runoob.com/nodejs/nodejs-tutorial.html (中文网)
描述：Node.js是一个Javascript运行环境(runtime)。实际上它是对Google V8引擎进行了封装。V8引 擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。
　　Node.js是一个基于Chrome JavaScript运行时建立的平台， 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动， 非阻塞I/O 模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

简单的说 node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于Chrome javascript 运行时建立的一个平台。

Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。

用途：
　　1. RESTful API（目前比较流行的接口开发风格）

这是NodeJS最理想的应用场景，可以处理数万条连接，本身没有太多的逻辑，只需要请求API，组织数据进行返回即可。它本质上只是从某个数据库中查找一些值并将它们组成一个响应。由于响应是少量文本，入站请求也是少量的文本，因此流量不高，一台机器甚至也可以处理最繁忙的公司的API需求。

2. 统一Web应用的UI层

目前MVC的架构，在某种意义上来说，Web开发有两个UI层，一个是在浏览器里面我们最终看到的，另一个在server端，负责生成和拼接页面。

不讨论这种架构是好是坏，但是有另外一种实践，面向服务的架构，更好的做前后端的依赖分离。如果所有的关键业务逻辑都封装成REST调用，就意味着在上层只需要考虑如何用这些REST接口构建具体的应用。那些后端程序员们根本不操心具体数据是如何从一个页面传递到另一个页面的，他们也不用管用户数据更新是通过Ajax异步获取的还是通过刷新页面。

3. 大量Ajax请求的应用

例如个性化应用，每个用户看到的页面都不一样，缓存失效，需要在页面加载的时候发起Ajax请求，NodeJS能响应大量的并发请求。　　总而言之，NodeJS适合运用在高并发、I/O密集、少量业务逻辑的场景。

2.angular.Js（比较厉害，github排名也比较高）

地址：http://www.runoob.com/angularjs/angularjs-tutorial.html (中文网)
描述：AngularJS[1] 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
用途：通过描述我们应该就能很好的明白AngularJS的真实用途了，MVVM，模块化，自动化双向数据绑定等等。除了简单的dom操作外，更能体现Js编程的强大。当然应用应该视场合而定。
它的出现比较早，也是曾经比较流行的前端js框架，但是今年来随着reactJS与VueJS的出现，它的热度在慢慢降低。

3.JQuery Mobile

地址：http://www.w3school.com.cn/jquerymobile/ (中文网)
描述：Query Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说：能开发这个项目，我们非常兴奋。移动Web太需要一个跨浏览器的框架，让开发人员开发出真正的移动Web网站。
用途：jQuery Mobile 是创建移动 web 应用程序的框架。
　　　　　　jQuery Mobile 适用于所有流行的智能手机和平板电脑。

jquery Mobile 使用 HTML5 和 CSS3 通过尽可能少的脚本对页面进行布局。

4.requirejs

地址：http://www.requirejs.cn/
描述：RequireJS的目标是鼓励代码的模块化，它使用了不同于传统

用途：模块化动态加载。

5.Vue.js(目前市场上的主流)

地址：http://cn.vuejs.org/
描述：Vue.js 是用于构建交互式的 Web 界面的库。它提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。从技术上讲， Vue.js 集中在 MVVM 模式上的视图模型层，并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。相比其它的 MVVM 框架，Vue.js 更容易上手。
目前市场上比较流行的前后端分离的开发模式，大多前端都是vueJS做的，具体的优点请大家看官方文档。

6.backbone.js

地址：http://www.css88.com/doc/backbone/
描述：Backbone 为复杂Javascript应用程序提供模型(models)、集合(collections)、视图(views)的结构。其中模型用于绑定键值数据和自定义事件；集合附有可枚举函数的丰富API； 视图可以声明事件处理函数，并通过RESTful JSON接口连接到应用程序。

7.React.js（gihub排名仅次于vue.js）

地址：http://reactjs.cn/react/docs/why-react.html
描述：React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。很多人认为 React 是 MVC 中的 V（视图）。我们创造 React 是为了解决一个问题：构建随着时间数据不断变化的大规模应用程序。为了达到这个目标，React 采用下面两个主要的思想。

8.Amaze UI

Amaze UI是轻量级的前端应用框架，是国内比较流行的框架，比较适用于移动端响应式开发框架，可以按照项目要求生成专属的UI框架库进行使用，组件非常丰富，可以构建出漂亮的web页面。

官网地址：http://amazeui.org/

三、可视化组件

1.Echarts

地址：http://echarts.baidu.com/
描述：ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

2.tableau(收费)

地址：http://www.yuandingit.com/special/tableau/index.html
描述：Tableau 是桌面系统中最简单的商业智能工具软件，Tableau 没有强迫用户编写自定义代码，新的控制台也可完全自定义配置。在控制台上，不仅能够监测信息，而且还提供完整的分析能力。Tableau控制台灵活，具有高度的动态性。

四、前端构建工具

1.gulp

地址：

描述：易于使用
　　　　　　通过代码优于配置的策略，Gulp 让简单的任务简单，复杂的任务可管理。
　　　　　　构建快速
　　　　　　利用 Node.js 流的威力，你可以快速构建项目并减少频繁的 IO 操作。

插件高质
　　　　　　Gulp 严格的插件指南确保插件如你期望的那样简洁高质得工作。

易于学习
　　　　　　通过最少的 API，掌握 Gulp 毫不费力，构建工作尽在掌握：如同一系列流管道。

2、ES or webPackage

1.Bootstrap中文网

先分享下，如果有想一起学习web前端，HTML5及JavaScript的可以来一下我的前端群733581373，好友都会在里面交流，分享一些学习的方法和需要注意的小细节，每天也会准时的讲一些前端的炫酷特效，及前端直播课程学习
Bootstrap，让你的页面更简洁、直观、强悍、移动设备优先的前端开发框架,让web开发更迅速、更简单。它还提供了更优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。有着丰富的网格布局系统以及丰富的可重用组件，还有强大的支持十几的JavaScript、jQuery插件以及组件定制等。
Bootstrap中文网地址：http://www.bootcss.com/

2. Layui

layer是一款口碑极佳的web弹层组件，是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。layui 首个版本发布于2016年秋，她区别于那些基于 MVVM 底层的 UI 框架，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。

Layui官网地址：https://www.layui.com/

3.ElementUI

Element-Ul是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架，手机端有对应框架是Mint UI 。适合于Vue的UI框架；
官网地址：http://element-cn.eleme.io/#/zh-CN

4.Mint UI

Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库，Mint UI 包含丰富的 CSS 和 JS 组件，能够满足日常的移动端开发需要。通过它，可以快速构建出风格统一的页面，提升开发效率。
官网地址：http://mint-ui.github.io/

5.angular

AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是MVW（Model-View-Whatever）、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
官网地址：http://www.angularjs.net.cn/

6.React

React 可以非常轻松地创建用户交互界面。为你应用的每一个状态设计简洁的视图,在数据改变时 React 也可以高效地更新渲染界面。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
官网地址：http://react-china.org/

7.vue.js

近几年最火的前端框架当属Vue.js了，Vue.js是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。很多使用过vue的程序员这样评价它，“vue.js兼具angular.js和react.js的优点，并剔除了它们的缺点”。授予了这么高的评价的vue.js，也是开源世界华人的骄傲，因为它的作者是位中国人–尤雨溪
几款常用的高质量web前端框架
Web前端框架就是为了节约开发成本和时间，一般开发一个项目都会用到前端框架（除非自己有前端开发团队），根据我经验找的几款web前端框架做出了分析。都是个人意见，仁者见仁智者见智。

QUICK UI
QUICK UI是一套完整的企业级web前端开发解决方案，由基础框架、UI组件库、皮肤包、示例工程和文档等组成。使用QUICKUI开发者可以极大地减少工作量，提高开发效率，快速构建功能强大、美观、兼容的web应用系统。
QUICK UI优势：
①功能最为强大
QUICKUI经历了7年的迭代更新，不断从客户的各种业务中对组件的需求进行归纳和抽离，从而打造新的组件和功能。现在最新的4.0版本框架包含了一百多种组件，一千多个应用场景示例。可以说在前端框架领域中，QUICKUI拥有功能最强大组件库。

②运行最为稳定
　　很多其他的第三方UI控件在简单场合使用OK，到了复杂的场景中就会出现很多问题，这种现象很常见，因为在组件设计时无法预料到所有的应用场合。而QUICKUI在7年间经历了数千个项目实际检验，在各种复杂场景都应用过，并根据客户的反馈不断完善和调整。目前的第四代可以说是最稳定、最完美的版本。

③丰富精美的界面皮肤
　　跟其他web前端框架仅仅是一套组件库不同，QUICKUI是一整套前端解决方案，拥有丰富的外观界面解决方案。采用现今流行的扁平化设计理念，推出了包括登录、响应式web、工作桌面、地图类、门户风格、大屏展示风格等等几百套制作精美、用户体验优秀的界面。这些界面是以QUICKUI皮肤包的形式发布，使用和更换都非常方便。

④事无巨细的开发文档
QUICKUI拥有16万字+的开发文档，框架和组件的每一个功能点都有详细的讲解和代码示例，用于开发过程中随时查阅。除了框架机制讲解和组件使用教程，文档还涉及web前端开发的很多知识。仔细阅读并结合框架使用的话，你很快就能成为web开发的高手。

⑤上手开发非常容易
QUICKUI采用组件化思想来构建组件，一个组件就是一两句html的标签，使用起来非常简单。将开发人员从繁琐的JS编码中解脱出来，很大程度减少前台编码的出错率；保留了HTML的布局方式，从而快速进行页面布局。对开发者前台技术要求也非常低，只需要了解html语法和一些简单的JS即可，从而把更多精力放在业务功能的实现上，极大地提高开发效率。

⑥浏览器兼容性非常好
QUICKUI4.0使用了很多HTML5，CSS3技术用于提高表现力和用户体验，这些新的特性在现代浏览器中会有很好的效果。但是，国内依然有大量的用户在使用IE7、IE8等旧时代的浏览器，为照顾这部分用户，框架采用了渐进式思想，确保低版本浏览器也能正常使用。所以，QUICKUI兼容IE7以上所有主流浏览器。

flex
Apache基金会今天发布了Flex4.8版本，这是Adobe将Flex捐献给Apache基金会后发布的第一个版本。
　　需要注意的是，Flex目前还在孵化阶段，还不是Apache的正式项目，Flex4.8也不是一个正式的Apache版本。
Apache称，该版本标志着Flex新时代的开始，Flex的未来将由社区来驱动，而不是由一个公司驱动。开发者可以通过贡献代码，来帮助改进Flex，如修复bug、增加功能等。
　　从Macromedia卖给Adobe，然后又捐给apache，不知道搞什么名堂。不过还好没有经过大幅重构，否则就真的是悲哀了！

extjs
ExtJS是一种主要用于创建前端用户界面，是一个基本与后台技术无关的前端ajax框架。
　　功能丰富，无人能出其右。
　　无论是界面之美，还是功能之强，ext的表格控件都高居榜首。
　　华丽的界面，灵活的功能，还有开发工具都是配套的，但有个最大的问题，用就得花钱！

easyui
easyui帮助你构建你的web应用更加容易。
　　它是一个基于jquery的插件，开发出来的一套轻量级的ui框架，非常小巧而且功能丰富。
　　但是她有一个最大的问题就是代码只能找到以前的开源的版本，到了1.2以后的版本源代码都是经过混淆的，如果遇到问题修改起来会非常麻烦！不过一个比较大的优势是开源免费，并且界面做的还说的过去！

jQueryUI
jQueryUI是一套jQuery的页面UI插件，包含很多种常用的页面空间，例如Tabs（如本站首页右上角部分）、拉帘效果（本站首页左上角）、对话框、拖放效果、日期选择、颜色选择、数据排序、窗体大小调整等等非常多的内容。　　功能非常全面，界面也挺漂亮的，可以整体使用，也可以分开使用其中的几个模块，免费开源！

MiniUI
　　又一个基于jquery的框架，开发的界面功能都很丰富。
jQueryMiniUI–快速开发WebUI。
　　它能缩短开发时间，减少代码量，使开发者更专注于业务和服务端，轻松实现界面开发，带来绝佳的用户体验。
　　使用MiniUI，开发者可以快速创建Ajax无刷新、B/S快速录入数据、CRUD、Master-Detail、菜单工具栏、弹出面板、布局导航、数据验证、分页表格、树、树形表格等典型WEB应用系统界面。
　　界面做的挺不错，功能也挺丰富，但是有两个比较大的问题，一个是收费，一个是没有源码，说白了，不开源！基于这个开发如果想对功能做扩展就需要找他们的团队进行升级！

DWZ
DWZ富客户端框架(jQueryRIAframework),是中国人自己开发的基于jQuery实现的AjaxRIA开源框架.
　　设计目标是简单实用,快速开发,降低ajax开发成本。
　　欢迎大家提出建议，我们将在下一版本中进一步调整和完善功能．共同推进国内整体ajax开发水平。
　　毕竟是国产的，支持一下，而且源码完全公开，可以选择一下！不过性能怎么样不敢确定！

YUI
Yahoo!UILibrary (YUI)是一个开放源代码的JavaScript函数库，为了能建立一个高互动的网页，它采用了AJAX,DHTML和DOM等程式码技术。它也包含了许多CSS资源。使用授权为 BSD许可证，基本上没怎么研究过！YUICompressor倒是挺出名的，这套UI库不知道应用的情况怎么样！

Sencha
Sencha是由ExtJS、jQTouch以及Raphael三个项目合并而成的一个新项目。
　　大公司的框架，并且是几样库的强强联合，值得推荐！

OperaMasks-UI
OperaMasks-UI是OperaMasks团队2011下半年打造的一款轻量级前端JS组件库，旨在提供一款学习曲线低、定制性灵活、样式统一，且多浏览器支持、覆盖企业业务场景的前端JavaScriptUI组件库。目前，该团队已将这一产品以LGPL开源协议开放给社区。

转载：https://blog.csdn.net/enweitech/article/details/89316979?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160791478419195283045635%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=160791478419195283045635&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_click~default-1-89316979.nonecase&utm_term=%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6&spm=1018.2118.3001.4449