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

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

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

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

另外:

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

好了,让我们进入列表!

AngularJS

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

这个作者的更多文章

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

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

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

GitHub: 
当前版本: 1.4.7/1.2.29
凯旋门074网址,网址: 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/

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

Underscore &lodash

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

超级的 JavaScript 前端框架、库和工具。何时使用 Underscore?当你需要一个单独的 JavaScript
文件,来立即提升程序员的工作效率时。

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

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

LodashGitHub: 

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

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

超级的 JavaScript 前端框架、库和工具。何时使用 Babylon.js?无论何时,只要你想做一个视频游戏或任何类型的复杂三维场景,都能用上。

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

Three.js

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

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

GitHub: 
当前版本: r73
超级的 JavaScript 前端框架、库和工具。网站:超级的 JavaScript 前端框架、库和工具。 threejs.org

Mocha& Chai

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

超级的 JavaScript 前端框架、库和工具。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

Karma

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

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

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

GitHub: 
当前版本: 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
语言正在迅速发展。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

更多 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
    评论

关于作者:cucr

澳门凯旋门注册网址 1

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

澳门凯旋门注册网址 2

相关文章