如果没有包括你最喜欢的 JavaScript 的框架和库,

作者: 前端  发布:2019-11-16

最佳的 JavaScript 前端框架、库和工具

2015/12/22 · JavaScript · 1 评论 · 工具, 库, 框架

本文由 伯乐在线 - cucr 翻译,Heiye 校稿。未经许可,禁止转载!
英文出处:Rami Sayar。欢迎加入翻译组。

好像几乎每隔一周就有一个新的 JavaScript 库在网络社区引起风暴!网络社区越来越充满活力,多样化且在多个方面快速发展。调查每一个主流的 JavaScript 框架和库是不可能完成的壮举。因此,我将分享一些前端开发中最著名和最有影响力的框架和库。让我们看看最佳的 JavaScript web 前端框架,库和工具以及何时使用它们。

另外:

  • 如果我没有包括你最喜欢的 JavaScript 框架,请不要生气。
  • 永远记住持续更新你的框架和库。最新版本的框架和库通常具有最好的跨浏览器和跨设备的支持。你可以使用工具, 比如scanner 来帮助判断一个旧版本是否兼容这一大批设备。

好了,让我们进入列表!

  这篇文章主要描述现今流行的一些 Javascript web 前端框架,库以及它们的适用场景。

本文来自于:葡萄城控件技术团队博客

AngularJS

Angular 是流行的企业级框架,许多开发人员都在使用它来构建和维护复杂的 web 应用程序。Angular 的人气非常高,包括 Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, 谷歌等企业都在使用它。Angular 是一个由谷歌支持的开源框架。Angular 自称是 HTML 的一个扩展,用来构建复杂的 web 应用程序。另外如果你熟悉 TypeScript, Angular 2就是用它构建的。

  新的 Javascript 库层出不穷,从而Web 社区愈发活跃、多样、在多方面快速发展。详细去描述每一种主流的 Javascript 框架和库近乎不可能,所以在这篇文章中主要介绍一些对前端发展最具影响力的前端框架。接下来让我们来共同研究一些主流前端框架、库和工具,并讨论它们的适 用场景。

几乎每隔一个星期,就有一个新的 JavaScript 库席卷网络社区!Web 社区日益活跃、多样,并在多个领域快速成长。想要研究每一个重要的 JavaScript 框架和库,是个不可能完成的任务。接下来,我会分享一些前端开发的最著名和最有影响力的框架和库。下面,就让我们一起来看看,顶级的 JavaScript web 前端框架、库和工具及其使用。

这个作者的更多文章

  • 构建一个基于 Node.js 的聊天室 Web App:远程调试
  • 构建一个基于 Node.js 的聊天室 Web App:通过 WebSockets 连接

Angular 是一个 MVC 类型的框架。它提供了模型和视图之间的双向数据绑定。该数据绑定允许每当数据改变时,两边自动更新。  它使你能够构建可复用的视图组件。它提供了一个服务框架,使得后端-前端服务通信更容易。最后,它只是普通的 JavaScript。

何时使用 AngularJS?当你正在构建一个复杂的 web 前端应用程序,同时需要一个模块化的框架来处理一切时。

GitHub: 
当前版本: 1.4.7/1.2.29
网址: angularjs.org

  同时:

请注意:

React

React 是今年最受欢迎的 JavaScript 项目!每个人都似乎在谈论 ReactJS。去年我参加的每一个会议,至少有好几个议题是关于 React 和同家族的其他库(Flux, Redux)的。React 是开源软件,主要由 Facebook 开发,其他大型科技公司也有贡献。React 自称是一个用于构建用户界面的 JavaScript 库。

React 主要是 MVC 中的 V。它的重点完全在 MVC 的 V 部分,忽视应用程序架构的其余部分。它提供了一个组件层,使得创建 UI 元素,组合元素变得更容易。它使用虚拟 DOM,因此优化了渲染,且允许从 node.js 渲染 React。此外,它实现了单向响应的数据流,因此比其他框架更容易理解和使用。

作为 MVC 中的 V,很多项目将 React 结合 Angular 或 Ember 这样的框架使用。

何时使用 React?当你想要一个强大的视图层,但不需要在应用程序的其余部分使用一个复杂的框架,或者你在 Angular、Backbone 或 Ember 应用上需要一个视图层时。当你正试图建立一个同构 web 框架时。

 

GitHub: 
当前版本: v0.14.0
网址: Facebook.github.io/react/

  如果该篇文章没有包含你喜欢的 Javascript 框架,勿喷

如果没有包括你最喜欢的 JavaScript 的框架和库,请多包涵。

Backbone

Backbone 是一个著名的简易框架,适合单个 JavaScript 文件。Backbone 已经存在有一段时间了,是以 CoffeeScript 和 Underscore 闻名的 Jeremy Ashkenas 所开发的。对于一些为小型 web 应用寻找一个结构简单的框架,而不想引入如 Angular 或 Ember 这些大型框架的团队,Backbone 特别受欢迎。

Backbone 提供一个完整的 MVC 框架以及路由。模型允许键-值绑定和数据变化的事件处理。模型(和集合)可以连接到RESTful API。视图具有声明式事件处理,路由在处理 URL 和状态管理上做的很出色。它包含你创建一个单页面应用程序所需要的一切,且没有提供太多东西,没有不必要的复杂度。

何时使用 Backbone?Backbone 是我创建简单 web 应用程序的首选框架。

GitHub: 

当前版本: 1.2.3
网站: backbonejs.org

  在使用前端框架进行开发时,建议保持版本更新。最新版本的一般都会提供给更好的跨浏览器,跨平台效果。 需检测某个框架的旧版本是否对各种浏览器以及设备的兼容,请使用 类似这个扫描器 的工具

请实时更新你的框架和库,最新版本往往有更好的跨浏览器和跨设备支持。可以使用检测设备一样的工具,来帮助确定一个旧版本,是否可以和配置最好的设备兼容。

Ember

Ember 是一个固执的 web 应用程序框架,关注程序员的工作效率。Ember 比较流行,它的核心团队包括像曾是 Ruby on Rails 和 jQuery 核心团队成员的 Yehuda Katz 的聪明人。Ember 自称是“一个用于创建大规模 web 应用程序的框架”,且不浪费你的时间。它很固执,为你提供了很多选择。

Ember 也是一个 MVC 框架。它包括一个模板和视图引擎,当数据变化时自动更新,就像 Angular,Backbone 和 React 一样。它包含 web组件 的思想,让你使用自己标签扩展 HTML(就像 Angular 一样)。它也有一个知道如何与你的 RESTful API 一起工作的路由和模型引擎。

何时使用 Ember?当你只需要一个可以运行的框架时。当你因为预算紧张或工期很短而不需要灵活性时,请使用 Ember。

GitHub: 
当前版本: 2.1.0
网站: emberjs.com

  准备好了吧,那么接下来逐个讨论它们。

接下来,让我们看看下面的列表!

jQuery

jQuery 是一个无需介绍的库。它凭一己之力让跨浏览器网站使用成为现实,同时把 web 带到今天的位置。Web 标准已经被大多数浏览器制造商采纳并真正地尊重,jQuery 是其中的原因之一。jQuery 基金会的使命是“通过开源软件的开发和支持,以及开发社区的合作,改善开放的 web,让每一个人都可以访问它。”

jQuery 是世界上最常用的 JavaScript 库,所有应用程序都应该使用它,除非你不在意程序员的工作效率。它使得 DOM 遍历、事件处理、动画、AJAX 在所有浏览器上变得更简单、更容易。

何时使用 jQuery?一直使用,除非你想使用一个像 Zepto 的轻量级版本。

GitHub: 
当前版本: v1.11.3 or v2.1.4
网站: jquery.com

  AngularJS

AngularJS

Underscore &lodash

有时候 JavaScript 内置的功能导致程序员的效率并不高。总是缺少一个工具函数或一个可以简化代码的函数。Underscore(和 lodash)是一个 JavaScript 库,它提供了一整套工具函数,不需要对内置 JavaScript 对象打补丁。两个库均提供超过 100 个功能助手和其他专用功能,包括 map,filter,invoke,reduce,template, throttle, bind, extend, pick, clone 等更多的函数。

何时使用 Underscore?当你需要一个单独的 JavaScript 文件,来立即提升程序员的工作效率时。

Underscore GitHub: 
Underscore 当前版本: 1.8.3
Underscore 网站: underscorejs.org

何时使用 lodash?当你需要模块化和性能稍强版本的 Underscore,同时更容易地支持 AMD 和社区插件时。

LodashGitHub: 

Lodash 当前版本: v3.10.1

Lodash 网站: lodash.com

  Angular 是一款流行的企业级 框架,很多程序员都用它来构建和维护复杂的网页应用。Angular 拥有巨大的人气,使用它的公司跟 Domino 的 Pizza 种类一样多,如 Ryanair, iTunes Connect, PayPal Checkout, Google。Angular 是一个由 Google 支持的开源框架。Angular 称自己为构建复杂网页应用而对 HTML 的扩展。如果你也对 TypeScript 很熟悉,那么可以看看 怎样写 Angular 2 .

9159.com 1

D3.js

数据可视化和图表是一种常见的 web 应用程序需求。D3.js 是任何数据操作和可视化的事实标准。它是 GitHub上最受欢迎的项目之一,被数以百计的组织使用。大量的图形,图表和可视化库在 D3 上构建。

D3 允许你操作任何来源的数据文档,转换成 DOM 或/和 SVG 或/和 CSS。D3 关注现代 web 标准,确保你不受任何专有格式的约束,比如 Flash 和 Silverlight。

何时使用 D3.js?在你需要任何形式的可视化的时候。

GitHub: 
当前版本: 3.5.6
网站: d3js.org

  Angular 采用 MVC 架构。它提供了 Model 层和 View 层之间双重数据绑定。这种数据绑定方式的好处是不管哪边数据改变,都会自动的更新两边的数据。这有助于你构建可服用的 View 组件。它还提供了一个前后端服务易于交互的服务框架。最重要的是,它是简单的 JavaScript。

AngularJS 是一种流行的企业框架,许多开发人员使用其构建和维护复杂的 Web 应用程序。AngularJS 是十分受欢迎的,许多公司都使用它,像达美乐披萨、瑞安航空、iTunes Connect,PayPal 支付,谷歌等。AngularJS 是由谷歌支持的开源框架。AngularJS 把自己描述为一个 HTML 的扩展,可用来构建复杂的 Web 应用程序。此外,如果你熟悉 TypeScript,将会很清楚 AngularJS 是如何编写的。

Babylon.js

想要构建完全符合现代 web 标准且跨浏览器的视频游戏吗?看看 Babylon.js,它是基于 WebGL 和 JavaScript 的 3d 游戏引擎。你可以创建令人难以置信的包含物理、音频和粒子系统等等的高质量游戏。

何时使用 Babylon.js?无论何时,只要你想做一个视频游戏或任何类型的复杂三维场景,都能用上。

GitHub: 
当前版本: 2.2
网站: babylonjs.com

  什么时候使用 AngularJS? 当你构建一个复杂的网页前端应用并需要一个单独的模块框架去处理一切时。

AngularJS 是一个 MVC 类型的框架,它提供了双向的数据模型和视图之间的绑定。这种数据绑定,允许在双方只要有一个数据变化时,自动进行更新。它使你可以构建可重用的 View 组件。同时,它也提供了一个服务框架,以便前后端服务的轻松通信。最后,它只是普通的 JavaScript。

Three.js

想要构建一个 3D 可视化场景,但不需要一个完整的游戏引擎?three.js 提供了一个轻量级的 3d 库,允许渲染 3d 为 HTML5 画布、SVG 和 WebGL。它是相当简单的库,在 three.js 的展示里有数百个优美的例子。

何时使用Three.js?当你需要一个能输出为 Canvas 的简单的 3D 可视化场景时。

GitHub: 
当前版本: r73
网站: threejs.org

  GitHub:

什么时候使用 AngularJS?当你正在建立一个复杂的 web 前端应用程序,并且需要一个模块化的框架来处理一切时。

Mocha& Chai

JavaScript 在很长一段时间内是非常烦人的。测试任何代码通常都被认为是恼人的,但它却是每个开发人员都应该做的事情。每个开发人员似乎总是蔑视和忽略它,而不测试他们的代码。这个恼人的东西有一个解决办法,那就是 Mocha 和 Chai。两个库的名字都来自美味的热饮料,它们都能帮你测试代码,但方式不同。 

Mocha 是一个 JavaScript 测试框架,使得你在 node 模块和浏览器 app 中测试异步代码变得更容易。Mocha 测试可以串联运行,可以为正确的测试用例添加异常跟踪的能力。

Chai 是一个行为驱动开发/测试驱动开发的断言库,可以搭配 Mocha 使用。它可以把你需要测试的东西用可读的风格简单地表达出来。

何时使用 Mocha & Chai?总是!请测试你的代码,让世界变得更美好。

Mocha 当前版本: 2.3.3
Mocha 网址: mochajs.org
Chai GitHub: 
Chai 当前版本: v3.4.1
Chai 网址: chaijs.com

  Current Version:1.4.7/1.2.29

React

Karma

既然已经把 Mocha 和 Chai 包含在这个列表中了,如果不包含用来运行这些测试或设置持续集成测试的测试运行器,那将是不完整的。Karma 是一款旨在帮助你在不同的浏览器上自动运行测试的工具。它可以帮助你在所有浏览器上运行 Mocha 和 Chai 测试。

不是每个浏览器都运行在所有平台,但幸运的是可以使用一些免费工具来测试其他浏览器,看看 Browser Screenshots。如果你正在 OS X 上运行代码,想测试 Edge 或 IE,可以 免费 使用这个工具。

何时使用 Karma?当你的应用程序有一个完善的测试套件,并希望确保测试在所有浏览器上通过时。

GitHub: 
当前版本: v0.13
网址: karma-runner.github.io

  Website: angularjs.org

9159.com 2

PhantomJS

运行完整的浏览器来测试你的代码比较耗内存和 CPU。PhantomJS 允许你运行一个轻量的 WebKit —— Safari 和Chrome(现在是 Blink)后台的渲染引擎。它允许你通过 JavaScript API 运行测试,捕捉截图,监控网络和自动浏览页面。

何时使用 PhantomJS ?当你需要进行更多的测试,操作页面和监视网络请求时。

GitHub: 
当前版本: v2.0
网址: phantomjs.org

  二:React 是15年最受欢迎的 JavaScript 项目!几乎人人都在谈论 ReactJS。去年,我参加的每一个会几乎都会有一两个话题探讨 React 和相同体系下的其它库( Flux , Redux ) 。React 是一个开源项目,几乎是由 Fackbook 和其它主要的技术公司贡献开发的。React 称自己为为构建用户接口而提供的 JavaScript 库。

React 是今年最受喜爱的 JavaScript 的工程!每个人似乎都在谈论 ReactJS。每一个会议上,去年出席的会议,至少有两个人是在讨论 React。React 是开源的,主要是由 facebook 借助其它公司的主要技术开发出来的。React 描述自己是一个 JavaScript 库,用于构建用户界面。

Grunt & Gulp

为生产环境构建网站,通常涉及到提高性能的任务,比如 JavaScript 和 CSS 的压缩, CoffeeScript/TypeScript 的编译,单元测试,语法检查。也许你已经有一个为网站发布到生产环境的工具链,如果没有,你可以使用任务运行器,比如 Grunt 或Gulp。两者都有大量关于网站的任何转换的插件,为发布到生产环境做好准备。

何时使用 Grunt?当你喜欢写配置文件同时不介意你的任务运行器生成中间文件时。

Grunt GitHub: 
Grunt 当前版本: v0.4.5
Grunt 网址: gruntjs.com

何时使用 Gulp?当你喜欢在配置上写代码和利用 node.js 的流功能来加快任务执行时。

Gulp GitHub: 
Gulp 当前版本: v3.9.0
Gulp 网址: gulpjs.com

  React 基本上用来作为 MVC 中的 V。它完全专注于 MVC 中的 V 部分,而忽略了应用中的其它部分架构。它提供了一个组件层,这让我们易于制作UI元素并将这些UI元素组合在一起。它抽象出了DOM,因此而优化了渲染, 并允许你使用 node.js 渲染 React。另外,它实现了单向数据交互流,这使它比其它的框架更易于理解和使用。

React 在 MVC 中,主要是 View。它完全专注于 MVC 那部分,无视应用程序的其它部分。它提供了一个成分层,可以更容易使用UI元素,并将它们组合在一起。它抽象了 DOM,使其擅长于优化渲染,并允许使用 node.js 来表述 React ; 它实现了一个单向灵活的数据流,使得它更容易理解和使用其它框架。

Babel

JavaScript 语言正在迅速发展。ECMAScript2015 于去年夏天发布,它的许多新特性在最新的浏览器上实现了。如果你想看看 ECMAScript 2015 的兼容性,你可以看看来自 @kangax 的这个 表。你会注意到,最新版本的 Edge,Firefox 和 Chrome 已经几乎完全兼容了。

我们并不是生活在一个完美的世界。作为开发人员,我们需要继续支持旧的浏览器,它们没有最新最好的 JavaScript 特性。我们要推进 web 和改善我们的代码库。Babel 是一个 JavaScript 编译器,用于把最新的 JavaScript 标准编译成可在 IE9 等老浏览器上运行的兼容ES5的 JavaScript。它有一些插件,使得 React 开发更容易,甚至可以使用一些不属于该规范的特性(例如ES7)。

何时使用 Babel?当你想使用新的 JavaScript 语言特性,同时还要支持老版本浏览器时。

GitHub: 
当前版本: 6.1.2
网址: babeljs.io

  多个项目例如 Angular ,Ember 绑定使用 React 成为 MVC 中的 V。

作为在 MVC 中的 V,许多工程结合 React 和 AngularJS 或 Ember 一起使用。

更多 Web 开发实践

本文来自微软技术布道师 Web 开发系列,里面有实用的 JavaScript 学习,开源项目和互操作性的最佳实践(包括与 微软Edge 浏览器和新的 EdgeHTML渲染引擎)。

我们鼓励你跨浏览器和设备进行测试,包括微软的Edge——Windows 10的默认浏览器——在 dev.modern.IE 上有免费工具:

  • 扫描你的网站中过时的库,布局问题和可访问性
  • 下载 Mac, Linux 和 Windows 下的免费虚拟机
  • 跨浏览器检查 Web 平台状态,包括微软 Edge 的路线图
  • 在你的设备上远程测试微软 Edge

来自我们工程师和布道者的更深入学习:

  • GitHub 上的编码实验室: 跨浏览器测试和最佳实践
  • 2015 微软 Edge Web 峰会 (来自我们的工程师团队和JS社区)
  • 很棒,我可以在 Mac 和 Linux 上测试 Edge 和 IE 了! (来自Rey Bango)
  • 推进 JavaScript 同时不破坏 Web (来自Christian Heilmann)
  • Edge 渲染引擎让 Web 工作 (来自Jacob Rossi)
  • 基于 WebGL 的 3D 渲染 (来自David Catuhe)
  • 托管 web app 和 web 平台的革新 (来自Kevin Hill和Kiril Seksenov)

我们的社区开源项目:

  • vorlon.JS (跨设备远程 JavaScript 测试)
  • manifoldJS (部署跨平台托管 web app)
  • babylonJS (让 3D 图形制作更简单)

更多免费工具和后端web开发内容:

  • Linux, MacOS 和 Windows 下的 Visual Studio Code
  • 使用 node.JS 编码并在 Azure 上免费试用

    2 赞 26 收藏 1 评论

  什么时候使用 React?当你想要有一个强大的 View 层,而应用中的其它部分缺不需要一个复杂的框架时,或当你想要一个 View 层和你的 Angular, Backbone,或者 Ember应用一起使用。当你试着构建一个同构的网页框架。

什么时候使用 React?当你想要一个强大的 View 层,但应用的其它部分却不需要详尽的框架时,或者当你的应用中想要一个结合 了Angular、Backbone 或 Ember 的视图层时,又或者是创建一个同构的 Web 框架时。

关于作者:cucr

9159.com 3

新浪微博:@hop_ping 个人主页 · 我的文章 · 17

9159.com 4

  GitHub:

Backbon

  目前版本:v0.14.0

9159.com 5

  网址: Facebook.github.io/react/

Backbone 是一个很著名的简单的框架,融入了一个单一的 JavaScript 文件。Backbone 流行了一段时间。由 Jeremy Ashkenas 从CoffeeScript 和 Underscore 框架中开发出来的。对于追寻小型架构的团队来说,Backbone 是特别受欢迎的。因为他们小型的 Web 应用是不需要使用像 AngularJS 和 Ember 这样的大型框架的。

  Backbone

Backbone 提供了一个完整的 MVC 框架和路由。该模型允许键-值绑定和处理数据变化的事件。Models(和 Collections)可以连接到 RESTful API 中。Views 可以声明事件处理,而路由器则可以非常出色地处理 URL 和状态管理。在建立一个不提供太多功能和非必要复杂功能的单页面应用时,能提供你所需的所有功能。

  Backbone 是 一个出名的精简的框架,所有内容都可以放到一个单一的文件里。Backbone 已经流行了一段时间,其作者是 Jeremy Ashkenas,曾经由于开发了 CoffeeScript 和 Underscore 而为大家所知。Backbone 特别适用于需要开发的 web 程序不大的那些团队,他们希望能使用小巧的框架,而不是像 Angular 或者 Ember 这样的大型框架。

什么时候使用 Backbone?Backbone 是适用于简单 Web 应用的 GOTO 框架。

  Backbone 提供了全功能的 MVC 框架和路由。它的 Model 可以实现 key-value 绑定和数据更新的事件处理。Model(及 Collection)可以与 RESTful 的 API 协同工作。View 可以声明事件处理,Router 在 URL 处理和状态管理方面做的很好。对于开发一个单页面应用,所有需要的功能都可以支持,不需要额外引入不需要的复杂性。

Ember

  何时使用 Backbone?对于小型的 web 程序,Backbone 是我必选的框架。

9159.com 6

  GitHub:

Ember 是一个独立的 Web 应用程序框架,专注于编码效率。Ember 是比较受欢迎的,核心团队包括牛人 Yehuda Katz,他是 Ruby on Rails 和 jQuery 的核心团队之一。Ember 描述自己为一个不浪费你的时间,能用于创建伟大 Web 应用程序的框架。 这是非常有主见,这也使你有了很多选择。

  当前版本:1.2.3

Ember 也是一个 MVC 框架。它包括一个模板和视图引擎,保证了数据变化时的自动更新,就像 AngularJS,Backbone 和 React 一样。它包括的概念 web 组件,让你用自己的标签来扩展 HTML(就像 AngularJS)。它也有一个路由和模型引擎,能够和 RESTful API 协同工作。

  官方网站: backbonejs.org

什么时候使用 Ember?如果你只是想要一个能够工作的框架时、或者你的预算紧张、又或者最后期限将近时,不追求太多的灵活性,可以使用 Ember。

  Ember 作为一个 web应用框架,非常专注于程序员的效率上。Ember 相对比较流行,核心团队有不少很聪明的成员,包括 Yehuda Katz,他是 Ruby on Rails 和 jQuery 的核心团队的成员。Ember 对自己的定位是“一个用来创建震撼的 web 应用的框架”,它也确实不会浪费你的时间。它在这方面非常专注,为你提供很多的选择。

JQuery

  Ember 同样也是一个 MVC 的框架。它包含一个模板和视图引擎,在数据更新时可以自动更新,这方面与Angular, Backbone, 和 React 类似。它还有一个 web 组件 的概念,允许你用自己的标签扩展HTML,(如Angular)。它还有一个路由及 model 引擎,可以与 RESTful API 一起工作的很好。

9159.com 7

  何时使用 Ember?适用于你需要一个框架马上就能使用。对灵活性要求不高的时候可以选择 Ember,因为你通常是预算紧张或者工期紧张。

jQuery 是一个不需要过多介绍的框架。它凭一己之力使得跨浏览器站点成为现实并促使 Web 发展到今天。Web 标准被大多数主要浏览器厂商所采纳真正的尊重,jQuery 是其原因之一。jQuery 的基金会的使命是“通过开发和支持开源软件,提高开放的网络,使之为所有人开放,并与开发社区合作。”

  GitHub:

jQuery 是世界上最常用的 JavaScript 库,没有应用程序不去使用它,除非不在乎编码效率。它使得在所有浏览器中,DOM traversal、事件处理、动画、AJAX 是如此的简单和容易。

  当前版本:2.1.0

什么时候使用 jQuery?除你想使用像 Zepto 这样的轻量级版本之外,都可以使用 jQuery。

  官方网站: emberjs.com

Wijmo

  JQuery 这个库就不用多做介绍了。它独立承担了让跨浏览器网站成为现实的重任,是它使得整个 web 成为今天这个样子。Web 标准的制定以及浏览器厂家对标准的接受方面,jQuery 功不可没。jQuery 基金会的目标是"通过开源软件的开发和支持,以及社区的协作,增进开放的网络,让每个人都能访问"

9159.com 8

  JQuery 是世界上应用最广的 JavaScript 库,没有应用可以离开它,除非你对开发效率不感兴趣。它使得 DOM 遍历、事件处理、动画和 AJAX 在所有浏览器上都变得如此的简单易用。

Wijmo Enterprise 是为企业应用程序开发而推出的一系列包含 HTML5 和 JavaScript 的开发控件集。包含有先进的 JavaScript 控件、经典的 jQuery 小部件、金融图标、以及 FlexSheet 和 OLAP,能够满足移动端、PC 端和支持 IE6 等应用程序的需求。同时,Wijmo 还支持其它流行的框架,如 Angular、Angular2、KnockOut、Vue、React 等。

  何时使用 jQuery?任何时候,除非你打算使用更轻量级的版本,例如 Zepto 。

什么时候使用 Wijmo?当你想为应用程序构建具有良好用户体验的用户界面时。

  GitHub:

Underscore&lodash

  当前版本:v1.11.3 或 v2.1.4

9159.com 9

  官方网站: jquery.com

对于程序开发者来说,一些 JavaScript 的内置,效率是不够高的。总有缺少实用的功能或将代码化简的函数。Underscore(和 lodash)是一个 JavaScript 库,提供了实用功能,同时不需要 JavaScript 对象内置的猴子补丁。这两个库提供超过 100 个帮助函数和其它特别好用的功能;,包括像地图,过滤器,调用,缩减,模板,调节,绑定,扩展,挑选,克隆和更多的功能。

  Underscore 和 lodash

什么时候使用 Underscore?当你需要一个单一 JavaScript 文件来提高编码效率时。

  有时内置的 JavaScript 对于让程序员真正的有生产力还远远不够。总是会缺了一个工具函数,又或者是一个能简化代码的函数。Underscore (还有 lodash) 就是这样的一个 JavaScript 库,它提供了一整套工具函数,无需经验不足的程序员再去给内置的 JavaScript 对象打补丁。两个库都提供了超过 100 个辅助函数,还有其它特别的好东西;包括了像 map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone 等等这些函数。

什么时候使用 lodash?当你需要一个模块和轻量高效的,容易被 AMD 和社区插件支持 Underscore 版本时。

  什么时候使用 Underscore?当你想要拥有一个立即能增强程序员效率的 JavaScript 文件时。

D3.js

  Underscore GitHub :

数据可视化和图表是 Web 应用程序的常见需求。当涉及到任何数据操作和可视化,D3.js 是事实上的标准。它是在 GitHub 上最受欢迎的项目之一,并在被数百个组织使用。大量的图形,图表和可视库建立在 D3 上。

  Underscore 当前版本:1.8.3

D3 允许操作任何数据源的文件,并且可以转换为 DOM、SVG 或 CSS。D3 专注于现代网络标准,并确保像 Flash 或 Silverlight 等专有格式的免费。

  Underscore 网站: underscorejs.org

什么时候使用 D3.JS?当你需要任何形式的可视化时。

  什么时候使用 lodash?当你想要一个模块化的,性能更好好一点的,并附带有对于 AMD 和社区插件支持的 Underscore 版本时。

Babylon.js

  Lodash GitHub:

想要创建一个完全运行在现代 Web 标准和跨浏览器上的视频游戏?可以考虑 Babylon.js,Babylon.js 是一个建立在 WebGL 和 JavaScript 上的 3D 游戏引擎。你可以创建一个难以置信的高质量的游戏引擎,包括物理,音频和粒子系统。

  Lodash 当前的版本:v3.10.1

什么时候使用 Babylon.js?当你正在构建一个包含任何复杂 3D 场景的视频游戏时。

  Lodash 网站: lodash.com

three.js

  D3.js

9159.com 10

  数据可视化和图表是web应用程序的一种常规需求。当涉及到任何数据操作和可视化时,D3.js 就是事实上的标准。它是 GitHub 上最受欢迎的项目之一,并被数百个组织机构所采用。大量的图形、图标和可视化库都是构件于 D3 之上的。

想要创建一个 3D 可视化,却又不需要完整的游戏引擎?Three.js 提供了一个轻量的 3D 库来将 3D 渲染成一个 HTML5 canvas、SVG 和 WebGL。这确实是一个明确的库,在 Three.js 的用例展示中,有几百个效果很好的例子。

  D3 让你可以操作任何来源的数据文档,并将数据进行转换后应用到 DOM、SVG 和 CSS上。D3 专注于现代的 web 标准,以及确保你可以不受到任何像 Flash 或者 Silverlight 这样的专有格式的限制。

什么时候使用 three.js?每当你需要一个简单的三维可视化,可以输出到画布上时。

9159.com,  什么时候使用 D3.js?当你需要任何类型的视觉效果的时候。

Mocha & Chai

  GitHub:

9159.com 11

  当前版本:3.5.6

在很长一段时间里,JavaScript 的测试令人难以置信的烦恼。从头开始,测试任何代码通常被视为令人讨厌的,但它是每一个开发者应该做的。同时,测试他们的代码,每个开发者似乎总是很不屑,而选择忽略它。有一个办法来改善这个问题,就是使用 Mocha & Chai 的形式。虽然这两个库从美味的热饮中得名的,但是它们都可以以不同的方式测试你的代码。

  网站: d3js.org

Mocha 是一个 JavaScript 测试框架,可以很轻松地在 node 模型和浏览器应用程序中测试异步代码。Mocha 测试可以串联运行,并且对于正确的测试用例具有高质量的跟踪异常。

   Babylon.js

Chai 是一个行为驱动的开发/测试驱动开发断言库,可以与 Mocha 配套使用。它使得可以很容易的以一种可读的方式去表达你的测试内容。

  想要构建一个完全运行于现代浏览器上,并且能跨浏览器运行的视频游戏吗?那就看看 Babylon.js 吧,它是一个 3D 游戏引擎,基于 WebGL 和 JavaScript。你可以使用其物理、音频和粒子系统创造出超乎预期的高质量游戏来。

什么时候使用 Mocha 和Chai? 永远都可以!请测试你的代码,使世界变得更美好。

  什么时候使用 Babylon.js?当你正在构建一个视频游戏或者一个某种类型的 3D 场景时。

Karma

  GitHub:

这个列表上包含了 Mocha 和 Chai,如果不包含运行这些测试和设定持续集成测试的运行者,那么这将是不完整的。Karma 是一个旨在帮助针对不同的浏览器自动运行测试的工具。这将帮助你在所有的浏览器上运行 Mocha 和 Chai。

  当前版本: 2.2

并不是每一个浏览器都可以在每个平台上运行,幸运的是,有一些免费的工具,你可以用来测试其他浏览器, 例如浏览器截图。如果你在 OS X 上运行,并希望测试 Edge 或 Internet Explorer,您可以使用这种免费工具。

  网站: babylonjs.com

什么时候使用 Karma?当你的应用程序有一个完整的测试套件,并想要确保在所有的浏览器上测试通过时。

  Three.js

PhantomJS

  想要构建一个 3D 视觉特效,但是又不需要一个功能完整的游戏?Three.js 提供了一个轻量级的 3D 库,让你可以将 3D 效果渲染成一个 HTML5 的 canvas, SVG, 和 WebGL。这是一个详单简单的库,在 three.js 陈列站点上可以看到数百个漂亮的示例。

9159.com 12

  什么时候使用 Three.js?当你需要一个简单的能输出为 Canvas 的 3D 视觉效果时。

运行全功能浏览器,以测试你的代码内存和 CPU 密集型。PhantomJS 允许你在 Safari 和 Chrome 上运行 headless WebKit 的渲染引擎。这样你就可以运行你的测试,捕捉屏幕截图,监视网络,使用 JavaScript API 自动浏览页面。

  GitHub:

什么时候使用 PhantomJS? 当你需要做更多的测试,操作页面并监视网络请求时。

  当前版本: r73

Grunt & Gulp

  网站: threejs.org

9159.com 13

  Mocha 和 Chai

产品网站建设通常会涉及到一些提高性能的任务,例如缩小 JavaScript 和 CSS,CoffeeScript/TypeScript 的编译,单元测试,性能 lintin。也许你已经为产品网站准备好了工具链,但是如果还没有,那么你可以使用 Grunt 和 Gulp 这样的工具。这两个工具都有很多插件,来帮助你完善产品网站。

  长久以来测试 JavaScript 一直都令人不甚反感。说起来,测试任何代码都是令人反感的,但又却是每个开发者应该做的事情。每个开发者似乎总是对此不屑,忽视掉针对它们的代码的测试工 作。 现在有了治愈这种反感的办法了,那就是 Mocha 和 Chai。而两个库都以美味的热饮命名,都能帮助你测试代码,不过方式不同而已。

什么时候使用 Grunt?如果你喜欢写配置文件,并且不介意任务运行期间产生中间文件时。

  Mocha 是一个 JavaScript 测试框架,它使得针对你的node模块或者浏览器应用中的异步代码的测试变得容易起来。Mocha 测试可以串起来运行,并且对于针对合适的测试案例进行异常跟踪的质量不错。

什么时候使用 Gulp?如果对比于写配置文件,你更喜欢写代码,并且想要使用 node.js 的流媒体功能来更快的执行任务时。

  Chai 是一个行为驱动开发和测试驱动开发的断言库,可与 Mocha 比肩。它以一种可读性好的风格来描述你所要测试的东西,用起来简单。

Babel

  什么时候使用 Mocha 和 Chai?用他们就对了! 请测试你的代码,让这个世界变得更好。

JavaScript 作为一门语言,发展地很快。2015年夏天的 ECMAScript 发布了它的许多在最新的浏览器中实现的新功能。如果你想看看2015年的 ECMAScript 兼容,你可以看看来自原 @kangax 的列表。你会发现最新版本的 Edge,Firefox 和 Chrome,具有近乎完全的兼容性。

  Mocha GitHub:

我们不是生活在一个完美的世界。作为开发人员,我们需要继续支持那些没有最新 JavaScript 特性的旧版浏览器。我们要推进网络并提高我们的代码库。Babel 是一个 JavaScript 编译器,可以将最新的 JavaScript 标准编译成 ES5 兼容的 JavaScript,这样就允许在像 IE9 这样较老的浏览器上运行。它有一些插件,使得很容易的使用 React 去开发,甚至使用一些规格之外的特性去开发。

  Mocha 当前版本: 2.3.3

什么时候使用 Babel?当你要使用新的 JavaScript 语言特性,同时继续支持旧版浏览器时。

  Mocha 网站: mochajs.org

更多的Web开发实践

  Chai GitHub:

本文来自于 JavaScript 学习文章中微软技术布道者和工程师的系列文章之一,同时最好的文章里也包含微软的 Edge 浏览器和新的 EdgeHTML 渲染引擎。

  Chai 当前版本: v3.4.1

我们鼓励大家测试跨浏览器和设备,例如微软的 Edge(Windows10 默认的浏览器)

  Chai 网站: chaijs.com

文章来源:by Rami Sayar

  我们已经在这份清单中囊括了 Mocha 和 Chai ,如果不去把可以运行这些测试或者也许可以设定持续集成测试的测试运行器拉进来的话,那么这份清单就不会是完整的。Karma 是一个用来帮助你在不同的浏览器中自动运行你的测试的工具。它将会帮助你在时下所有的浏览器上运行你的 Mocha 和 Chai 测试。

原文链接:

  并不是每个浏览器都会运行于每个平台之上,不过幸运的是有许多免费的工具可供你用来测试其它的浏览器,可以在 浏览器截屏 上看一看。如果你是在 OS X 上运行的话,并且要测试的是 Edge 或者 IE 的话,你就可以 免费 使用这个工具。

转载请注明出自:葡萄城控件

  什么时候使用 Karma?当你想要拥有一个功能全面的测试套件,并像确保测试能在所有的浏览器上通过时。

关于葡萄城

  GitHub:

葡萄城是全球控件行业领导者,世界领先的企业应用定制工具、企业报表和商业智能解决方案提供商,为超过75%的全球财富500强企业提供服务。

  当前版本: v0.13

  网站: karma-runner.github.io

  PhantomJS

  运行全部的浏览器来测试你的代码是要密集消耗内存和 CPU 的。PhantomJS 让你可以运行一个纯粹的 WebKit —— Safari 和 之前版本的 Chrome 中的渲染引擎(现在是 Blink)。它能让你通过一个 JavaScript API 来运行测试、截屏、模拟网络以及自动的浏览页面。

  什么时候使用 PhantomJS ?当你需要进行更多的测试、操作网页和模拟网络请求的操作时。

  GitHub:

  当前版本: v2.0

  网站: phantomjs.org

  Grunt 和 Gulp

  构建用于生产环境的网站一般还涉及到一些提升性能这方面的任务,像 JavaScript 和 CSS 的最小化,CoffeeScript/TypeScript 的编译,单元测试,代码精简。也许你已经有了一个工具链,用于准备你生产版本上的网站,而如果你还没有的话,就会想要拥有一个像 Grunt 或者 Gulp 这样的任务运行器。它们都无数的插件,能为你的网站进行任何的转换,以使其能投入生产环境。

  什么时候使用 Grunt?当你更愿意编写配置文件,而对于你的任务运行器会生成什么中间文件并不关心时。

  Grunt GitHub:

  Grunt 当前版本: v0.4.5

  Grunt 网站: gruntjs.com

  何时使用 Gulp?当你更愿意编写配置代码,并且想利用 node.js 的流处理能力实现更快的任务执行时。

  Gulp GitHub:

  Gulp 当前版本: v3.9.0

  Gulp 网站: gulpjs.com

  Babel

  JavaScript 作为一门语言发展很快速。ECMAScript 2015 在去年夏天发布,而它的许多新特性正在许多最新的浏览器中被实现。如果你想要了解有关浏览器对 ECMAScript 2015 兼容信息,可以看看这个来自于 @kangax 的 表格 。你会注意到最新版本的 Edge,Firefox 和 Chrome 已经几乎是完全的兼容了。

  我们并不是生活在一个完美的世界中。作为开发者,我们将会需要继续支持老版本的浏览器,它们不具有最新和最棒的 JavaScript 功能特性。而我们实在是想要发展我们的 web 并提升我们的代码库。Babel 就是一个 JavaScript 编译器,它可以将最新的 JavaScript 标准编译成兼容 ES5 的JavaScript,让你可以在 IE9 那么老的浏览器上运行它们。它拥有一些插件,让使用 React 开发更加容易,设置会使用那些并不是规范 (例如 ES7) 的组成部分的功能特性。

  什么时候使用 Babel?当你想要使用新的 JavaScript 语言特性并且还要支持老的浏览器时。

  GitHub:

  当前版本: 6.1.2

  网站: babeljs.io

  更多 Web 开发的实践

  这篇文章是 web 开发系列的一部分,来自于 Microsoft 技术的传道者和工程师,内容都是关于实用的 JavaScript 学习、开源项目,还有互操作性最佳实践这些方面,包括了 Microsoft Edge 浏览器和新的 EdgeHTML 渲染引擎 。

  我们鼓励您在所有的浏览器和设备,包括作为 Windows 10 默认浏览器的 Microsoft Edge 上进行测试 —— 使用 dev.microsoftedge.com 上的免费工具:

  扫描你的站点上的过时的库,布局问题以及可访问性

  下载免费的 Mac, Linux, 和 Windows 的虚拟机

  在所有的浏览器,包括在 Microsoft Edge 上检查 Web 平台的状态

  在你自己的设备上远程测试 Microsoft Edge

  更深入了解我们的工程师和传道者:

  GitHub 上的编码实验室:跨浏览器测试和最佳实践

  Microsoft Edge Web 大会 2015 (来自于我们的工程团队和 JS 社区)

  哇哦,我能在 Mac 和 Linux 上测试 IE 和 Edge 了! (来自于 Rey Bango)

  没有破话 Web 的先进的 JavaScript (来自于)

  能让 Web 立刻起作用的 Edge 渲染引擎 (来自于 Jacob Rossi)

  使用 WebGL 发挥 3D 渲染的潜能 (来自于 David Catuhe)

  托 管web 应用和web平台方面的创新 (来自于 Kevin Hill 和 Kiril Seksenov)

  我们的社区开放源代码项目:

  vorlon.JS (多设备远程 JavaScript 测试)

  manifoldJS (部署跨平台托管 Web 应用)

  babylonJS (让 3D 图形这些东西更平易近人)

  更多免费的工具和后端web开发的东西:

  Linux, MacOS, 和 Window s 上使用的 Visual Studio Code

  尝试在 Azure Cloud 上 使用 node.JS 编写代码

本文由9159.com发布于前端,转载请注明出处:如果没有包括你最喜欢的 JavaScript 的框架和库,

关键词: