顶级的JavaScript框架、库、工具及其使用
几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃、多样,并在多个领域快速成长。想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务。接下来,我会分享一些前端开发的最著名和最有影响力的框架和库。下面,就让我们一起来看看,顶级的 JavaScript web 前端框架、库和工具及其使用。
请注意:
- 如果没有包括你最喜欢的 JavaScript 的框架和库,请多包涵。
- 请实时更新你的框架和库,最新版本往往有更好的跨浏览器和跨设备支持。可以使用检测设备一样的工具,来帮助确定一个旧版本,是否可以和配置最好的设备兼容。
接下来,让我们看看下面的列表!
AngularJS
AngularJS 是一种流行的企业框架,许多开发人员使用其构建和维护复杂的 Web 应用程序。AngularJS 是十分受欢迎的,许多公司都使用它,像达美乐披萨、瑞安航空、iTunes Connect,PayPal 支付,谷歌等。AngularJS 是由谷歌支持的开源框架。AngularJS 把自己描述为一个 HTML 的扩展,可用来构建复杂的 Web 应用程序。此外,如果你熟悉 TypeScript,将会很清楚 AngularJS 是如何编写的。
AngularJS 是一个 MVC 类型的框架,它提供了双向的数据模型和视图之间的绑定。这种数据绑定,允许在双方只要有一个数据变化时,自动进行更新。它使你可以构建可重用的 View 组件。同时,它也提供了一个服务框架,以便前后端服务的轻松通信。最后,它只是普通的 JavaScript。
什么时候使用 AngularJS?当你正在建立一个复杂的 web 前端应用程序,并且需要一个模块化的框架来处理一切时。
React
React 是今年最受喜爱的 JavaScript 的工程!每个人似乎都在谈论 ReactJS。每一个会议上,去年出席的会议,至少有两个人是在讨论 React。React 是开源的,主要是由 facebook 借助其它公司的主要技术开发出来的。React 描述自己是一个 JavaScript 库,用于构建用户界面。
React 在 MVC 中,主要是 View。它完全专注于 MVC 那部分,无视应用程序的其它部分。它提供了一个成分层,可以更容易使用UI元素,并将它们组合在一起。它抽象了 DOM,使其擅长于优化渲染,并允许使用 node.js 来表述 React ; 它实现了一个单向灵活的数据流,使得它更容易理解和使用其它框架。
作为在 MVC 中的 V,许多工程结合 React 和 AngularJS 或 Ember 一起使用。
什么时候使用 React?当你想要一个强大的 View 层,但应用的其它部分却不需要详尽的框架时,或者当你的应用中想要一个结合 了Angular、Backbone 或 Ember 的视图层时,又或者是创建一个同构的 Web 框架时。
Backbone
Backbone 是一个很著名的简单的框架,融入了一个单一的 JavaScript 文件。Backbone 流行了一段时间。由 Jeremy Ashkenas 从CoffeeScript 和 Underscore 框架中开发出来的。对于追寻小型架构的团队来说,Backbone 是特别受欢迎的。因为他们小型的 Web 应用是不需要使用像 AngularJS 和 Ember 这样的大型框架的。
Backbone 提供了一个完整的 MVC 框架和路由。该模型允许键-值绑定和处理数据变化的事件。Models(和 Collections)可以连接到 RESTful API 中。Views 可以声明事件处理,而路由器则可以非常出色地处理 URL 和状态管理。在建立一个不提供太多功能和非必要复杂功能的单页面应用时,能提供你所需的所有功能。
什么时候使用 Backbone?Backbone 是适用于简单 Web 应用的 GOTO 框架。
Ember
Ember 是一个独立的 Web 应用程序框架,专注于编码效率。Ember 是比较受欢迎的,核心团队包括牛人 Yehuda Katz,他是 Ruby on Rails 和 jQuery 的核心团队之一。Ember 描述自己为一个不浪费你的时间,能用于创建伟大 Web 应用程序的框架。 这是非常有主见,这也使你有了很多选择。
Ember 也是一个 MVC 框架。它包括一个模板和视图引擎,保证了数据变化时的自动更新,就像 AngularJS,Backbone 和 React 一样。它包括的概念 web 组件,让你用自己的标签来扩展 HTML(就像 AngularJS)。它也有一个路由和模型引擎,能够和 RESTful API 协同工作。
什么时候使用 Ember?如果你只是想要一个能够工作的框架时、或者你的预算紧张、又或者最后期限将近时,不追求太多的灵活性,可以使用 Ember。
JQuery
jQuery 是一个不需要过多介绍的框架。它凭一己之力使得跨浏览器站点成为现实并促使 Web 发展到今天。Web 标准被大多数主要浏览器厂商所采纳真正的尊重,jQuery 是其原因之一。jQuery 的基金会的使命是“通过开发和支持开源软件,提高开放的网络,使之为所有人开放,并与开发社区合作。”
jQuery 是世界上最常用的 JavaScript 库,没有应用程序不去使用它,除非不在乎编码效率。它使得在所有浏览器中,DOM traversal、事件处理、动画、AJAX 是如此的简单和容易。
什么时候使用 jQuery?除你想使用像 Zepto 这样的轻量级版本之外,都可以使用 jQuery。
Wijmo
Wijmo Enterprise 是为企业应用程序开发而推出的一系列包含 HTML5 和 JavaScript 的开发控件集。包含有先进的 JavaScript 控件、经典的 jQuery 小部件、金融图标、以及 FlexSheet 和 OLAP,能够满足移动端、PC 端和支持 IE6 等应用程序的需求。同时,Wijmo 还支持其它流行的框架,如 Angular、Angular 2、KnockOut、Vue、React 等。
什么时候使用 Wijmo?当你想为应用程序构建具有良好用户体验的用户界面时。
Underscore&lodash
对于程序开发者来说,一些 JavaScript 的内置,效率是不够高的。总有缺少实用的功能或将代码化简的函数。Underscore(和 lodash)是一个 JavaScript 库,提供了实用功能,同时不需要 JavaScript 对象内置的猴子补丁。这两个库提供超过 100 个帮助函数和其它特别好用的功能;,包括像地图,过滤器,调用,缩减,模板,调节,绑定,扩展,挑选,克隆和更多的功能。
什么时候使用 Underscore?当你需要一个单一 JavaScript 文件来提高编码效率时。
什么时候使用 lodash?当你需要一个模块和轻量高效的,容易被 AMD 和社区插件支持 Underscore 版本时。
D3.js
数据可视化和图表是 Web 应用程序的常见需求。当涉及到任何数据操作和可视化,D3.js 是事实上的标准。它是在 GitHub 上最受欢迎的项目之一,并在被数百个组织使用。大量的图形,图表和可视库建立在 D3 上。
D3 允许操作任何数据源的文件,并且可以转换为 DOM、SVG 或 CSS。D3 专注于现代网络标准,并确保像 Flash 或 Silverlight 等专有格式的免费。
什么时候使用 D3.JS?当你需要任何形式的可视化时。
Babylon.js
想要创建一个完全运行在现代 Web 标准和跨浏览器上的视频游戏?可以考虑 Babylon.js,Babylon.js 是一个建立在 WebGL 和 JavaScript 上的 3D 游戏引擎。你可以创建一个难以置信的高质量的游戏引擎,包括物理,音频和粒子系统。
什么时候使用 Babylon.js?当你正在构建一个包含任何复杂 3D 场景的视频游戏时。
three.js
想要创建一个 3D 可视化,却又不需要完整的游戏引擎?Three.js 提供了一个轻量的 3D 库来将 3D 渲染成一个 HTML5 canvas、SVG 和 WebGL。这确实是一个明确的库,在 Three.js 的用例展示中,有几百个效果很好的例子。
什么时候使用 three.js?每当你需要一个简单的三维可视化,可以输出到画布上时。
Mocha & Chai
在很长一段时间里,JavaScript 的测试令人难以置信的烦恼。从头开始,测试任何代码通常被视为令人讨厌的,但它是每一个开发者应该做的。同时,测试他们的代码,每个开发者似乎总是很不屑,而选择忽略它。有一个办法来改善这个问题,就是使用 Mocha & Chai 的形式。虽然这两个库从美味的热饮中得名的,但是它们都可以以不同的方式测试你的代码。
Mocha 是一个 JavaScript 测试框架,可以很轻松地在 node 模型和浏览器应用程序中测试异步代码。Mocha 测试可以串联运行,并且对于正确的测试用例具有高质量的跟踪异常。
Chai 是一个行为驱动的开发/测试驱动开发断言库,可以与 Mocha 配套使用。它使得可以很容易的以一种可读的方式去表达你的测试内容。
什么时候使用 Mocha 和Chai? 永远都可以!请测试你的代码,使世界变得更美好。
Karma
这个列表上包含了 Mocha 和 Chai,如果不包含运行这些测试和设定持续集成测试的运行者,那么这将是不完整的。Karma 是一个旨在帮助针对不同的浏览器自动运行测试的工具。这将帮助你在所有的浏览器上运行 Mocha 和 Chai。
并不是每一个浏览器都可以在每个平台上运行,幸运的是,有一些免费的工具,你可以用来测试其他浏览器, 例如浏览器截图。如果你在 OS X 上运行,并希望测试 Edge 或 Internet Explorer,您可以使用这种免费工具。
什么时候使用 Karma?当你的应用程序有一个完整的测试套件,并想要确保在所有的浏览器上测试通过时。
PhantomJS
运行全功能浏览器,以测试你的代码内存和 CPU 密集型。PhantomJS 允许你在 Safari 和 Chrome 上运行 headless WebKit 的渲染引擎。这样你就可以运行你的测试,捕捉屏幕截图,监视网络,使用 JavaScript API 自动浏览页面。
什么时候使用 PhantomJS? 当你需要做更多的测试,操作页面并监视网络请求时。
Grunt & Gulp
产品网站建设通常会涉及到一些提高性能的任务,例如缩小 JavaScript 和 CSS,CoffeeScript/TypeScript 的编译,单元测试,性能 lintin。也许你已经为产品网站准备好了工具链,但是如果还没有,那么你可以使用 Grunt 和 Gulp 这样的工具。这两个工具都有很多插件,来帮助你完善产品网站。
什么时候使用 Grunt?如果你喜欢写配置文件,并且不介意任务运行期间产生中间文件时。
什么时候使用 Gulp?如果对比于写配置文件,你更喜欢写代码,并且想要使用 node.js 的流媒体功能来更快的执行任务时。
Babel
JavaScript 作为一门语言,发展地很快。2015年夏天的 ECMAScript 发布了它的许多在最新的浏览器中实现的新功能。如果你想看看2015年的 ECMAScript 兼容,你可以看看来自原 @kangax 的列表。你会发现最新版本的 Edge,Firefox 和 Chrome,具有近乎完全的兼容性。
我们不是生活在一个完美的世界。作为开发人员,我们需要继续支持那些没有最新 JavaScript 特性的旧版浏览器。我们要推进网络并提高我们的代码库。Babel 是一个 JavaScript 编译器,可以将最新的 JavaScript 标准编译成 ES5 兼容的 JavaScript,这样就允许在像 IE9 这样较老的浏览器上运行。它有一些插件,使得很容易的使用 React 去开发,甚至使用一些规格之外的特性去开发。
什么时候使用 Babel?当你要使用新的 JavaScript 语言特性,同时继续支持旧版浏览器时。
更多的Web开发实践
本文来自于 JavaScript 学习文章中微软技术布道者和工程师的系列文章之一,同时最好的文章里也包含微软的 Edge 浏览器和新的 EdgeHTML 渲染引擎。
我们鼓励大家测试跨浏览器和设备,例如微软的 Edge(Windows10 默认的浏览器)
- Scan your site for out-of-date libraries, layout issues, and accessibility
- Download free virtual machines for Mac, Linux, and Windows
- Check Web Platform status across browsers including the Microsoft Edge roadmap
- Remotely test for Microsoft Edge on your own device
从工程师和布道者那里更深度的学习
- Coding Lab on GitHub: Cross-browser testing and best practices
- Microsoft Edge Web Summit 2015 (from our engineering team and JS community)
- Woah, I can test Edge & IE on a Mac & Linux! (from Rey Bango)
- Advancing JavaScript without Breaking the Web (from Christian Heilmann)
- The Edge Rendering Engine that makes the Web just work (from Jacob Rossi)
- Unleash 3D rendering with WebGL (from David Catuhe)
- Hosted web apps and web platform innovations (from Kevin Hill and Kiril Seksenov)
开源社区项目:
- vorlon.JS (cross-device remote JavaScript testing)
- manifoldJS (deploy cross-platform hosted web apps)
- babylonJS (3D graphics made easy)
更多免费工具和后端Web开发
- Visual Studio Code for Linux, MacOS, and Windows
- Code with node.JS with trial on Azure Clo
文章来源:by Rami Sayar
原文链接:http://www.codeproject.com/Articles/1066408/Top-JavaScript-Frameworks-Libraries-Tools-and-Wh
顶级的JavaScript框架、库、工具及其使用相关推荐
- javascript框架库_2019年使用的最佳JavaScript框架,库和工具
javascript框架库 似乎有比开发人员更多JavaScript框架,库和工具. 在2018年底, 在GitHub上的快速搜索显示230万个JavaScript项目. npm已成为全球最大的模块系 ...
- javascript漏洞-检测到目标站点存在javascript框架库漏洞
一般是让升级为最新的版本的脚本文件,但是实际使用过程中,有的插件不兼容,盲目升级会导致网站部分插件不可用. 下面是一种解决方案. 比如漏洞扫描出jquery:2.1.4.作以下处理: 一.根据web应 ...
- Javascript框架库漏洞验证
Javascript框架库漏洞
- js页面检测到目标站点存在javascript框架库漏洞
一.概述 在系统验收前安全检查时,绿盟检查到系统存在页面检测到目标站点存在javascript框架库漏洞,如下所示: 二.分析处理 这个漏洞是绿盟扫描比较常见的一个漏洞,原因就是jquery版本过低. ...
- 简洁、快速的JavaScript框架/库:jQuery
基础知识 简介 jQuery是一个快速.简洁的JavaScript框架. jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情. jQ ...
- 检测到目标站点存在javascript框架库漏洞 (随手记录)
问题总结: js-cookie 系列解决问题 vue项目里面引用了js-cookie用来存放登录的一些信息了.删除js-cookie重新打包就可以了.至于页面上的数据,那就存放在localstroge ...
- 检测到目标站点存在javascript框架库漏洞
这个漏洞是绿盟扫描比较常见的一个漏洞,原因就是jquery版本过低.升级到3.3以上就可以了. ----------重点专用分割线---------- vue项目并没有所谓的Jquery,为什么还会扫 ...
- JavaScript学习总结(12)——2016 年 7 个顶级 JavaScript 框架
当涉及到Web开发时,JavaScript框架往往是一些开发人员和企业最受欢迎的平台.可能,你有机会尝试过一两个顶级的JavaScript框架,但你仍然有点不确定哪个才是最佳的最值得掌握的,或者哪个值 ...
- Vue -渐进式JavaScript框架
介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架 库和框架的区别 我们所说的前端框架与库的区别? Library 库,本质上是一些函 ...
最新文章
- Javascript中二进制数据处理方法
- Tree-Structured LSTM模型
- Mysql中文乱码问题完美解决方案
- 今夜,我又坐在电脑面前想你
- 【带你入门】java网络编程
- 第五届新疆ACM H-虚无的后缀
- 显式调用构造函数产生的悲剧
- 本科 8年经验,20k的Offer,接还是不接?
- caffe使用训练好的模型对自己的一张图片进行测试
- python中的正则表达式是干嘛的_python中正则表达式总结
- debug assertion failed是什么意思?_如何使用 pdb 来性感 debug 你的 Python 代码?
- 08-06 性能测试--测试报告与数据
- 原 python下DataFrame, Series, ndarray, list, dict, tuple的相互转换
- 【软件】WPS VBA 7.0.1590(百度云免费下载链接)
- 给宝宝的固态硬盘装机教程
- 通过matlab语言来实现对硬币的计数问题
- 抖音死亡计算机在线测,抖音死亡计算器测试
- 自己实现的promise
- 【英语语法入门】 第21讲 将来时
- 08年十大可能被炒CEO出炉 AMD鲁毅智位列第一
热门文章
- 精彩的问题回答于解答5
- 手机相机ISO是什么
- Asp.net mvc 强类型View
- 人工智能在医疗保健服务演变中的作用越来越大
- 酷狗音乐的个性化推荐系统的设计与实现探究
- 剑指offer系列-----item3字符串空格替换
- brew 运行mysql ERROR 2002 (HY000): Can‘t connect to local MySQL server through socket ‘/tmp/mysql.sock
- 浏览器无需下载插件 解决网页长截图的小技巧
- 基于php运动器材会员管理系统
- ssm运动器材共享平台 毕业设计-附源码201816