工具及其使用时机,库和工具

作者: 前端知识  发布:2019-10-04

最佳的 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 框架和库近乎不可能,所以在这篇文章中主要介绍一些对前端发展最具影响力的前端框架。接下来让我们来共同研究一些主流前端框架、库和工具,并讨论它们的适 用场景。

这个作者的更多文章

  • 构建一个基于 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 框架,勿喷

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

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 .

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。

Babylon.js

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

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

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

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

Three.js

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

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

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

  GitHub:

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

Karma

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

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

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

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

金沙澳门官网网址 ,  Website: angularjs.org

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 库。

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。另外,它实现了单向数据交互流,这使它比其它的框架更易于理解和使用。

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。

更多 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应用一起使用。当你试着构建一个同构的网页框架。

关于作者:cucr

金沙澳门官网网址 1

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

金沙澳门官网网址 2

  GitHub:

  目前版本:v0.14.0

  网址: Facebook.github.io/react/

  Backbone

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

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

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

  GitHub:

  当前版本:1.2.3

  官方网站: backbonejs.org

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

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

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

  GitHub:

  当前版本:2.1.0

  官方网站: emberjs.com

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

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

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

  GitHub:

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

  官方网站: jquery.com

  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?当你想要一个模块化的,性能更好好一点的,并附带有对于 AMD 和社区插件支持的 Underscore 版本时。

  Lodash GitHub:

  Lodash 当前的版本:v3.10.1

  Lodash 网站: lodash.com

  D3.js

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

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

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

  GitHub:

  当前版本:3.5.6

  网站: d3js.org

   Babylon.js

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

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

  GitHub:

  当前版本: 2.2

  网站: babylonjs.com

  Three.js

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

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

本文由金沙澳门官网发布于前端知识,转载请注明出处:工具及其使用时机,库和工具

关键词: 金沙澳门官网