开源中国

我们不支持 IE 10 及以下版本浏览器

It appears you’re using an unsupported browser

为了获得更好的浏览体验,我们强烈建议您使用较新版本的 Chrome、 Firefox、 Safari 等,或者升级到最新版本的IE浏览器。 如果您使用的是 IE 11 或以上版本,请关闭“兼容性视图”。
14个优秀 JS 前端框架、库、工具及其使用时机 - 技术翻译 - 开源中国社区

14个优秀 JS 前端框架、库、工具及其使用时机 【已翻译100%】

oschina 推荐于 2年前 (共 12 段, 翻译完成于 12-14) 评论 27
收藏  
560
推荐标签: 待读

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

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

同时:

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

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

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

已销号
 翻译得不错哦!

AngularJS

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

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

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

GitHub: https://github.com/angular/angular.js

Current Version: 1.4.7/1.2.29

Website: angularjs.org

我是菜鸟我骄傲
 翻译得不错哦!

React

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

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

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

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

GitHub: https://github.com/facebook/react

目前版本: 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: https://github.com/jashkenas/backbone/

当前版本: 1.2.3

官方网站: backbonejs.org

zicode
 翻译得不错哦!

Ember

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: https://github.com/emberjs/ember.js

当前版本: 2.1.0

官方网站: emberjs.com

zicode
 翻译得不错哦!

JQuery

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

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

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

GitHub: https://github.com/jquery/jquery

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

官方网站: jquery.com

zicode
 翻译得不错哦!

Underscore 和 lodash

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

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

Underscore GitHubhttps://github.com/jashkenas/underscore

Underscore 当前版本: 1.8.3

Underscore 网站underscorejs.org

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

Lodash GitHubhttps://github.com/lodash/lodash

Lodash 当前的版本: v3.10.1

Lodash 网站: lodash.com

D3.js

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

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

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

GitHubhttps://github.com/mbostock/d3

当前版本: 3.5.6

网站: d3js.org

LeoXu
 翻译得不错哦!

Babylon.js

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

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

GitHubhttps://github.com/BabylonJS/Babylon.js

当前版本: 2.2

网站: babylonjs.com

Three.js

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

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

GitHubhttps://github.com/mrdoob/three.js/

当前版本: r73

网站: threejs.org

LeoXu
 翻译得不错哦!

Mocha 和 Chai

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

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

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

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

Mocha GitHub: https://github.com/mochajs/mocha

Mocha 当前版本: 2.3.3

Mocha 网站: mochajs.org

Chai GitHub: https://github.com/chaijs/chai

Chai 当前版本: v3.4.1

Chai 网站: chaijs.com

LeoXu
 翻译得不错哦!

Karma

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

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

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

GitHub: https://github.com/karma-runner/karma

当前版本: v0.13

网站: karma-runner.github.io

PhantomJS

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

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

GitHub: https://github.com/ariya/phantomjs

当前版本: v2.0

网站: phantomjs.org

LeoXu
 翻译得不错哦!
本文中的所有译文仅用于学习和交流目的,转载请务必注明文章译者、出处、和本文链接
我们的翻译工作遵照 CC 协议,如果我们的工作有侵犯到您的权益,请及时联系我们
评论(27)
Ctrl/CMD+Enter

额。。。第一个
前端开发的确累~~后端学好Spring系列都横着走了
web
赞:+1::skin-tone-2:
mark
这文章不错,不过前端框架真是太多了,这些框架都是为什么出现的没有说多少?之前看过一篇文章是前端框架与java技术的对比,说的很好,一下就懂了。
回复一下吧。
+1
总而言之,会的太少~~
NG+webpack足矣
一个jq足够了
不是很大项目,能用到个鬼

引用来自“错觉”的评论

这文章不错,不过前端框架真是太多了,这些框架都是为什么出现的没有说多少?之前看过一篇文章是前端框架与java技术的对比,说的很好,一下就懂了。
哥们给下文章看看
z

引用来自“错觉”的评论

这文章不错,不过前端框架真是太多了,这些框架都是为什么出现的没有说多少?之前看过一篇文章是前端框架与java技术的对比,说的很好,一下就懂了。

引用来自“Canrz”的评论

哥们给下文章看看
刚给你找了下,貌似找不到了,你就知道前端框架正在经历多年前java所经历的就可以了,任他吹的多牛逼,其实概念很早就有了
流行的knockoutjs 居然被无视了

引用来自“DennisXiong”的评论

流行的knockoutjs 居然被无视了
被angular盖过去了

引用来自“Yattin_Vong”的评论

前端开发的确累~~后端学好Spring系列都横着走了
主要是还在发展中,方方面面不成熟。

引用来自“土豆哥哥好”的评论

一个jq足够了
够事够了,但是特别事开发移动应用就不是最好的选择
顶部