mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
142 lines
13 KiB
Markdown
142 lines
13 KiB
Markdown
一些 JavaScript 的框架和库
|
||
============================================================
|
||
|
||
|
||
>来源 : 图片来自 Jen Wike Huger
|
||
|
||
JavaScript 即未来趋势所在。
|
||
|
||
Javascript 拥有众多的技术领导者的拥护和支持，其中一位就是 WordPress 的作者 Matt Mullenweg , 他表示 [WordPress 开发者][18] 应该学习 JavaScript , 这也清晰地向 WordPress 社区传达了 JavaScript 在未来的重要性。 同时，这一观点也被普遍接受。向着更先进的技术靠拢与过渡也同时保证了 WordPress 在未来的挑战中不会落于人后。
|
||
|
||
JavaScript 同时也是众多站在开源立场的技术中的佼佼者。与现在所流行的观点相反，JavaScript 不是一个工程，而是一个由其核心团队共同制定和维护的开放标准。[ECMAScript][19] , 另一个和 JavaScript 相关的名字, 它虽然不是开源的，但它也有一个开放的标准。
|
||
|
||
当你在浏览 GitHub 的时候你就可以发现 JavaScript 在当今有多么流行了。而且就 [repository 的数量][20] 而言，JavaScript 绝对位于所有的编程语言当中最顶尖的那一层次。 同时，在 Livecoding.tv 上你也能看出 JavaScript 有多么突出，这里的用户发布的关于 JavaScript 的视频的数量比其他的话题多得多。在写这篇文章的时候（原作者写下这篇文章的日期，非译者翻译日期），Livecoding.tv 上已经有 [45,919 个 用户原创的 JavaScript 视频教程][21] 。
|
||
|
||
### 热门的开源 JavaScript 框架和库
|
||
|
||
回归到主题， 庞大的社区是 JavaScript 的一个得天独厚的优势，同时这也驱动了 JavaScript 的蓬勃发展。这里有数以百千计的成熟的 JavaScript 框架和库供开发者使用，同时这些最优秀的框架和库都是开源的。对当前的 JavaScript 开发者来说，能够使用这些优秀的框架和库来进行快速开发已经是必须技能了。当今的市场需要快速开发，但是，重复造轮子是没有必要的。不论你是一个 JavaScript 新手还是一个资深的 JavaScript 开发者，使用框架和库都能极大提高你的工作效率。
|
||
|
||
好了，让我们开始吧！
|
||
|
||
### 1\. Angular.js
|
||
|
||
[Angular.js][1] 是目前最热门的 JavaScript 框架之一。它用于开发者构建复杂的 web 应用。Angular.js 背后的思想是它的单页应用 model。同时它 也支持 MVC 架构。在 Angular.js 中 ，开发者可以在前端中使用 JavaScript 代码，并从字面上扩展 HTML词汇。
|
||
|
||
Angular.js 自 2009 年出现以来已经有了很大的改进。Angular 1 当前的稳定版本是 1.5.8/1.2.30 。你也可以试一试 Angular 2 ，相对于 Angular 1 来说它有了重大的改进，但这个新版本仍未在全球范围内被普遍使用。
|
||
|
||
在 Angular.js 中，数据绑定是完成作业的一个重要概念。在用户与接口的交互中，当交互完成 view 就会自动更新新值，随即新值与 model 交互以确保一切都是同步的。在底层的逻辑在 model 中执行完成后，DOM 也会随即更新。
|
||
|
||
### 2\. Backbone.js
|
||
|
||
复杂 web 应用并不适用于所有场景。一些较简单的 web 应用框架例如 [Backbone.js][2] 就非常适合学习 web app 开发。Backbone.js 是一个简单的框架，可以快速方便地构建简单的 web 应用。和 Angular.js 一样，Backbone.js 也支持 MVC 。Backbone.js 还有一些其它关键特性如路由，RESTful API 支持，适当的状态管理等等。你甚至还可以用 Backbone.js 来构建单页应用。
|
||
|
||
当前的稳定版本是 1.3.3，可以在 [GitHub][22] 中找到。
|
||
|
||
### 3\. D3.js
|
||
|
||
[D3.js][3] 是一个优秀的 JavaScript 库，它允许开发者创建具有数据处理功能的富 web 页面。D3.js 使用 SVG, HTML 和 CSS 来实现这一切功能。使用 D3.js ，你可以更轻松地将数据绑定到 DOM 及启用数据驱动事件。使用 D3.js ，你还可以创建高质量的数据驱动的 web 页面来提供一个更易于理解的视觉效果来呈现数据。查看示例 ： [LCF 符号哈密顿图][23] ，由 D3.js 强力驱动。
|
||
|
||
### 4\. React.js
|
||
|
||
[React.js][4] 是一个使用起来很有趣的 JavaScript 框架。和其它的 JavaScript 框架不同，React.js 志在构建一个高可扩展的前端用户界面。React.js 出现于 2013 年，它采用了 BSD 开源协议。它以其能够开发复杂且漂亮的用户界面所带来的优势而迅速发展壮大。
|
||
|
||
React.js 背后的核心思想是虚拟 DOM 。虚拟 DOM 在客户端和服务端之间扮演着一个中间人的角色并带来了显著的性能提升。虚拟 DOM 的改变和 server DOM 一样，只需要更新所需的元素，相对于传统的 UI 渲染来说极大提升了渲染速度。
|
||
|
||
你还可以使用 Recat 来实现 meterial 风格的设计，使你能够开发具有无与伦比的性能的 web 应用。
|
||
|
||
### 5\. jQuery
|
||
|
||
[jQuery][5] 是一个非常流行的 JavaScript 库，它拥有众多特性例如事件处理，动画等。当你在做一个 web 项目的时候，你不会想要把时间浪费在为一些简单的功能写代码上。jQuery 为减少你的工作量提供了一些易于使用的 API 。这些 API 在所有的常见的浏览器中都能够使用。使用 jQuery, 你可以无缝地控制 DOM 以及 Ajax 这样在近几年来拥有高需求的作业。使用 jQuery, 开发者不必担心一些低级的交互，同时可以使他们的 web 应用的开发更加容易与迅速。
|
||
|
||
jQuery 同时便于分离 HTML 和 JavaScript 代码，使开发者能够编写简洁同时跨浏览器兼容的代码。并且使用 jQuery 创建的 web 应用在将来也易于改善和扩展。
|
||
|
||
### 6\. Ember.js
|
||
|
||
[Ember.js][6] 是一个 Angular.js 和 React.js 的功能的混合体。当你在浏览社区的时候你能明显地感受到 Ember.js 的热门程度。Ember.js 的新特性也不断地在添加。它在数据同步方面与 Angular.js 很像。 双向的数据交换可以确保应用的快速性和可扩展性。同时，它还能够帮助开发者创建一些前端元素。
|
||
|
||
和 React.js 的相似之处在于，Ember.js 提供了同样的服务端虚拟 DOM 以确保高性能和高可扩展。同时， Ember.js 提倡简化代码，提供了丰富的 API。Ember.js 还有非常优秀的社区。
|
||
|
||
### 7\. Polymer.js
|
||
|
||
如果你曾想过创建你自己的 HTML5 元素，那么你可以使用[Polymer.js][7] 来做这些事。 Polymer 主要集中于通过给 web 开发者提供创建自己的标签的功能来提供扩展功能。例如，你可以创建一个和 HTML5 中的 \<video> 类似的具有自己的功能的 <my_video> 元素。
|
||
|
||
Polymer 在 2013 年被 Google 引入并处于 [3-Clause BSD][24] 协议之下。
|
||
|
||
### 8\. Three.js
|
||
|
||
[Three.js][8] 又是另一个 JavaScript 库is yet another JavaScript library，主要用于 3D 效果开发。如果你在做游戏开发的动画效果，那么你可以利用 Three.js 的优势。Three.js 在底层中使用 WebGL 使 Three.js 可以轻松地被用于在屏幕上渲染 3D 物体。举一个比较知名的使用 Three.js 的例子就是 HexGLA，一个未来派赛车游戏。
|
||
|
||
### 9\. PhantomJS
|
||
|
||
使用 JavaScript 工作就意味着和不同的浏览器打交道，同时，当提及浏览器的时候，就不得不讨论资源管理。在 [PhantomJS][25] 中，由于有 headless WebKit 的支持，所以你可以随时监测你的 web 应用。Headless WebKit 是 Chrome 和 Safari 使用的渲染引擎中的一部分。
|
||
|
||
这整个过程是自动化的，你所需要做的只是使用这个 API 来构建你的 web 应用。
|
||
|
||
### 10\. BabylonJS
|
||
|
||
[BabylonJS][9] 与 Three.js 不相伯仲， 提供了 JavaScript API 来创建无缝且强有力的 3D web 应用。它是开源的，且基于 JavaScript 和 WebGL 。创建一个简单的 3D 物体比如一个球体是非常简单的，你只需要写短短几行代码。通过这个库提供的 [文档][10]，你可以很好地掌握它的内容。 同时 BabylonJS 的主页上也提供了一些优秀的 demo 来当作参考。在其官网上你可以找到这些 Demo。
|
||
|
||
### 11\. Boba.js
|
||
|
||
Web 应用总是有一个共通的需求，那就是分析。如果你还在苦于将数据的分析与统计插入到 JavaScript 的 web 应用中，那么你可以试一下 [Boba.js][11]。Boba.js 可以帮助你将分析的数据插入到你的 web 应用中并且支持旧的 ga.js 。你甚至可以把 metrics 和 Boba.js 集成在一起，只需要依赖 jQuery 即可。
|
||
|
||
### 12\. Underscore.js
|
||
|
||
[Underscore.js][12] 解决了 “当我面对一个空白 HTML 页面并希望即刻开始工作，我需要什么” 这个问题。当你刚开始一个项目， 你可能会感到失落或者重复一系列你在之前项目中常做的步骤。 为了简化开启一个项目的过程和给你起个头，Underscore.js 这个 JavaScript 库给你提供了一系列的方法。例如，你可以使用你在之前项目中常用的 Backbone.js 中的 suspender 或者 jQuery 的一些方法。
|
||
|
||
一些实用的帮助例如 "filter" 和 "invoke the map" 给你起了个好头，以助于你尽可能快的投入到工作中。 Underscore.js 同时还自带了一个套件来简化你的测试工作。
|
||
|
||
### 13\. Meteor.js
|
||
|
||
[Meteor.js][13] 是一个快速构建 JavaScript 应用的框架。它是开源的且它能够用于构建桌面应用，移动应用和 web 应用。Meteor.js 是一个全栈的框架同时允许多平台的端到端开发。 你可以使用 Meteor.js 来实现前端和后端功能，同时它也能密切监视应用的性能。Meteor.js 的社区非常庞大，所以它会有不断的新特性更新或者是 bug 修复。Meteor.js 也是模块化的，同时它能配合一些其它的优秀的 API 使用。
|
||
|
||
### 14\. Knockout.js
|
||
|
||
[Knockout.js][14] 在这些库中可能是最被低估的一个。它是一个基于 MIT 开源协议的开源 JavaScript 框架。作者是 [Steve Sanderson][15]。它基于 MVVM 模式。
|
||
|
||
### 值得注意的是: Node.js
|
||
|
||
[Node.js][16] 是一个强有力的 JavaScript 运行时环境。它可以被用于使用真实世界书局来构建快速且可扩展的应用。它既不是一个框架也不是一个库，而是一个基于 Google Chrome 的 V8 引擎的运行时环境。你可以用 Node.js 来创建多元化的 JavaScript 应用，包括单页应用，即时 web 应用等等。从技术层面上来讲，由于它的事件驱动式架构，所以 Node.js 支持异步 I/O 。这种做法使得它成为开发高可扩展应用的一个极好的解决方案的选择。查看 [Node.js][17]在 livecoding.tv 上的视频。
|
||
|
||
### 总结
|
||
|
||
JavaScript 是 web 开发中的通用语言。它之所以快速发展不仅仅是因为它所提供的内容，更多的是因为它的庞大的开源社区的支持。以上提到的框架和库对任何一个 JavaScript 开发者来说都是必须知道的。它们都提供了一些途径来探索 JavaScript 和前端开发。上面提及的大部分框架和库频繁地在 Livecoding.tv 上出现，大部分来自对 JavaScript 及其相关技术感兴趣的软件工程师。
|
||
|
||
|
||
--------------------------------------------------------------------------------
|
||
|
||
via: https://opensource.com/article/16/11/15-javascript-frameworks-libraries
|
||
|
||
作者：[Dr. Michael J. Garbade ][a]
|
||
译者：[chenxinlong](https://github.com/chenxinlong)
|
||
校对：[校对者ID](https://github.com/校对者ID)
|
||
|
||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||
|
||
[a]:https://opensource.com/users/drmjg
|
||
[1]:https://opensource.com/article/16/11/www.angularjs.org
|
||
[2]:https://opensource.com/article/16/11/www.backbone.js
|
||
[3]:https://opensource.com/article/16/11/www.d3js.org
|
||
[4]:https://facebook.github.io/react/
|
||
[5]:http://jquery.com/
|
||
[6]:http://emberjs.com/
|
||
[7]:https://www.polymer-project.org/1.0/
|
||
[8]:https://threejs.org/
|
||
[9]:http://www.babylonjs.com/
|
||
[10]:https://doc.babylonjs.com/
|
||
[11]:http://boba.space150.com/
|
||
[12]:http://underscorejs.org/
|
||
[13]:https://www.meteor.com/
|
||
[14]:http://knockoutjs.com/
|
||
[15]:http://blog.stevensanderson.com/
|
||
[16]:https://nodejs.org/en/
|
||
[17]:https://www.livecoding.tv/learn/node-js/
|
||
[18]:http://wesbos.com/learn-javascript/
|
||
[19]:http://stackoverflow.com/questions/5520245/is-javascript-an-open-source-project
|
||
[20]:https://github.com/blog/2047-language-trends-on-github
|
||
[21]:https://www.livecoding.tv/learn/javascript/
|
||
[22]:https://github.com/jashkenas/backbone/
|
||
[23]:http://christophermanning.org/projects/building-cubic-hamiltonian-graphs-from-lcf-notation
|
||
[24]:https://en.wikipedia.org/wiki/BSD_licenses#3-clause
|
||
[25]:https://phantomjs.org/
|