mirror of
https://github.com/LCTT/TranslateProject.git
synced 2024-12-26 21:30:55 +08:00
131 lines
12 KiB
Markdown
131 lines
12 KiB
Markdown
6 个值得好好学习的 JavaScript 框架
|
||
=====================
|
||
|
||
|
||
|
||
**常言道，条条大路通罗马，可是那一条适合我呢？** 由于用于构建前端页面等现代技术的出现，JavaScript 在 Web 开发社区早已是如雷贯耳。通过在网页上编写几个函数并提供执行逻辑，可以很好的支持 HTML (主要是用于页面的 _表现_ 或者 _布局_)。如果没有 JavaScript，那页面将没有任何 _交互特性_ 可言。
|
||
|
||
现在的框架和库的已经从蛮荒时代崛起了，很多老旧的技术纷纷开始将功能分离成模块。现在不再需要在整个核心语言中支持所有特性了，开发者允许所有用户创建库和框架来增强核心语言的功能。这样，语言的灵活性获得了了显著提高。
|
||
|
||
如果在已经在使用 **JavaScript** (以及 **JQuery**) 来支持 HTML，那么你肯定知道开发和维护一个大型应用需要付出多大的努力以及编写多么复杂的代码，而 JavaScript 框架可以帮助你快速的构建交互式 Web 应用 (包含单页面应用或者多页面应用)。
|
||
|
||
当一个新手开发者想要学习 JavaScript 时，他常常会被各种 JavaScript 框架所吸引，也幸亏有为数众多的社区，任何开发者都可以轻易地通过在线教程或者其他资源来学习。
|
||
|
||
但是，唉！多数的程序员都很难决定学习和使用哪一个框架。因此在本文中，我将为大家推荐 6 个值得好好学习的 JavaScript 框架。让我们开始吧。
|
||
|
||
### 1、AngularJS
|
||
|
||
|
||
|
||
**(注：这是我个人最喜欢的框架)**
|
||
|
||
无论你是何时听说的 JavaScript，很可能你早就听过 AngularJS，因为这是在 JavaScript 社区中最为广泛使用的框架了。它发布于 2000 年，由 Google 开发 (这够有说服力让你是用了吧) ，它是一个开源项目，这意味着你可以阅读、编辑和修改其源代码以便更加符合自身的需求，并且不用向其开发者支付一分钱 (这不是很酷吗？)。
|
||
|
||
如果说你觉得通过纯粹的 JavaScript 代码编写一个复杂的 Web 应用比较困难的话，那么你肯定会兴奋的跳起来，因为它将显著地减轻你的编码负担。它符合支持双向数据绑定的 MVC (Model–view–controller，模型-视图-控制) 设计典范。假如你不熟悉 MVC，你只需要知道它代表着无论何时探测到某些变化，它将自动更新前端 (比如，用户界面端) 和后端 (代码或者服务器端) 数据。
|
||
|
||
MVC 可为大大减少构建复杂应用程序所需的时间和精力，所有你只需要集中精力于一处即可 (DOM 编程接口会自动同步更新视图和模型)。由于 _视图组件_ 与 _模型组件_ 是分离的，你可以很容易的创建一个可复用的组件，使得用户界面的效果非常好看。
|
||
|
||
如果因为某些原因，你已经使用了 **TypeScript** (一种与 JavaScript 非常相似的语言)，那么你可以很容易就上手 AngularJS，因为这两者的语法高度相似。与 **TypeScript** 相似这一特点在一定程度上提升了 AngularJS 的受欢迎程度。
|
||
|
||
目前，Angular 2.0 已经发布，并且提升了移动端的性能，这也足以向一个新的开发者证明，该框架的开发活跃的够高并且定期更新。
|
||
|
||
AngularJS 有着大量的用户，包括 (但不限于) Udemy、Forbes、GoDaddy、Ford、NBA 和 Oscars。
|
||
|
||
对于那些想要一个高效的 MVC 框架，用来开发面面俱到、包含健壮且现代化的基础架构的单页应用的用户来说，我极力的推荐这个框架。这是第一个为无经验 JavaScript 开发者设计的框架。
|
||
|
||
### 2、React
|
||
|
||
|
||
|
||
与 AngularJS 相似，React 也是一个 MVC (Model–view–controller，模型-视图-控制) 类型的框架，但不同的是，它完全针对于 _视图组件_ (因为它是为 UI 特别定制的) 并且可与任何架构进行无缝衔接。这意味着你可以马上将它运用到你的网站中去。
|
||
|
||
它从核心功能中抽象出 DOM 编程接口 (并且因此使用了虚拟 DOM)，所以你可以快速的渲染 UI，这使得你能够通过 _node.js_ 将它作为一个客户端框架来使用。它是由 Facebook 开发的开源项目，还有其它的开发者为它贡献代码。
|
||
|
||
假如说你见到过并喜欢 Facebook 和 Instagram 的界面，那么你将会爱上 React。通过 React，你可以给你的应用的每个状态设计一个简单的视图，当数据改变的时候，视图也自动随之改变。只要你想的话，可以创建各种的复杂 UI，也可以在任何应用中复用它。在服务器端，React 同样支持通过 _node.js_ 来进行渲染。对于其他的接口，React 也一样表现得足够的灵活。
|
||
|
||
除 Facebook 和 Instagram 外，还有好多公司也在使用 React，包括 Whatsapp、BBC、、PayPal、Netflix 和 Dropbox 等。
|
||
|
||
如果你只需要一个前端开发框架来构建一个非常复杂且界面极好的强大视图层，那我极力向你推荐这个框架，但你需要有足够的经验来处理各种类型的 JavaScript 代码，而且你再也不需要其他的组件了 (因为你可以自己集成它们)。
|
||
|
||
### 3、Ember
|
||
|
||
|
||
|
||
这个 JavaScript 框架在 2011 年正式发布，是由 _Yehuda Katz_ 开发的开源项目。它有一个庞大且活跃的在线社区，所有在有任何问题时，你都可以在社区中提问。该框架吸收融合了非常多的通用 JavaScript 风格和经验，以便确保开发者能最快的做到开箱即用。
|
||
|
||
它使用了 MVVM (Model–view–viewmodel，模型-视图-视图模型) 的设计模式，这使得它与 MVC 有些不一样，因为它由一个 _连接器 (binder)_ 帮助视图和数据连接器进行通信。
|
||
|
||
对于 DOM 编程接口的快速服务端渲染，它借助了 _Fastboot.js_，这能够让那些复杂 UI 的性能得到极大提高。
|
||
|
||
它的现代化路由模式和模型引擎还支持 _RESTful API_，这可以却确保你可以使用这种最新的技术。它支持句柄集成模板（Handlebars integrated template），用以自动更新数据。
|
||
|
||
早在 2015 年间，它的风头曾一度盖过 AngularJS 和 React，被称为最好的 JavaScript 框架，对于它在 JavaScript 社区中的可用性和吸引力，这样的说服力该是足够了的。
|
||
|
||
对于不追求高灵活性和大型架构的用户，并且仅仅只是为了赶赴工期、完成任务的话，我个人非常推荐这个 JavaScript 框架，
|
||
|
||
### 4、Adonis
|
||
|
||
|
||
|
||
如果你曾使用过 _Laravel_ 和 _NodeJS_，那么你在使用这一个框架之时会觉得相当顺手，因为它是集合了这两个平台的优点而形成的一个框架，对于任何种类的现代应用来说，它都显得非常专业、圆润和精致。
|
||
|
||
它使用了 _NodeJS_，所以是一个很好的后端框架，同时还附带有一些前端特性 (与前面提到那些更多地注重前端的框架不同)，所以想要进入后端开发的新手开发者会发觉这个框架相当迷人。
|
||
|
||
相比于 _NoSQL_，很多的开发者都比价喜欢使用 _SQL_ 数据库 (因为他们需要增强和数据以及其它特性的交互性)，这一现象在这个框架中得到了很好的体现，这时的它更接近标准，开发者也更容易使用。
|
||
|
||
如果你混迹于各类 PHP 社区，那你一定很熟悉 **服务提供商 (Service Providers)**，也由于 Adonis 相应的 PHP 风格包含其中，所以在使用它的时候，你会觉得似曾相识。
|
||
|
||
在它所有的特性中，最好的便是那个极为强大的路由引擎，支持使用函数来组织和管理应用的所有状态、支持错误处理机制、支持通过 SQL ORM 来进行数据库查询、支持生成器、支持箭头函数 (arrow functions)、支持代理等等。
|
||
|
||
如果喜欢使用无状态 REST API 来构建服务器端应用，我比较推荐它，因为你会爱上这个框架的。
|
||
|
||
### 5、Vue.js
|
||
|
||
|
||
|
||
这一个开源的 JavaScript 框架，发布于 2014 年，它有个极为简单的 API，用以为现代 Web 界面（Modern Web Interface）开发交互式组件 (Reactive components)。其设计着重于简单易用。与 Ember 相似，它使用的是 MVVM (Model–view–viewmodel，模型-视图-视图模型) 设计范例，这样简化了设计。
|
||
|
||
这个框架最有吸引力的一点是，你可以根据自身需求来选择使用的模块。比如，你需要编写简单的 HTML 代码，抓取 JSON，然后创建一个 Vue 实例来完成可以复用的小特效。
|
||
|
||
与之前的那些 JavaScript 框架相似，它使用双路数据绑定来更新模型和视图，同时也使用连接器来完成视图和数据连接器的通信。这是一个还未完全成熟的框架，因为它全部的关注点都在视图层，所以你需要自己处理其它的组件。
|
||
|
||
如果你熟悉 _AngularJS_，那你会感觉很顺手，因为它大量嵌入了 _AngularJS_ 的架构，如果你懂得 JavaScript 的基础用法，那你的许多项目都可以轻易地迁移到该框架之下。
|
||
|
||
假如你只想把任务完成，或者想提升你自身的 JavaScript 编程经验，又或者你需要学习不同的 JavAScript 框架的本质，我极力推荐这个。
|
||
|
||
### 6、Backbone.js
|
||
|
||
|
||
|
||
这个框架可以很容易的集成到任何第三方的模板引擎，默认使用的是 _Underscore_ 模板引擎，而且该框架仅有一个依赖 (**JQuery**)，因此它以轻量而闻名。它支持带有 **RESTful JSON** 接口的 MVC (Model–view–controller，模型-视图-控制) (可以自动更新前端和后端) 设计范例。
|
||
|
||
假如你曾经使用过著名的社交新闻网络服务 **reddit**，那么你肯定听说过它在几个单页面应用中使用了 **Backbone.js**。**Backbone.js** 的原作者为之建立了与 _CoffeScript_ 旗鼓相当的 _Underscore_ 模板引擎，所以你可以放心，开发者知道该做什么。
|
||
|
||
该框架在一个软件包中提供了键值对 (key-value) 模型、视图以及几个打包的模块，所以你不需要额外下载其他的外部包，这样可以节省不少时间。框架的源码可以在 GitHub 进行查看，这意味着你可以根据需求进行深度定制。
|
||
|
||
如果你是寻找一个入门级框架来快速构建一个单页面应用，那么这个框架非常适合你。
|
||
|
||
### 总而言之
|
||
|
||
至此，我已经在本文着重说明了 6 个值得好好学习的 JavaScript 框架，希望你读完本文后能够决定使用哪个框架来完成自己的任务。
|
||
|
||
如果说对于选择框架，你还是不知所措，请记住，这个世界是实践出真知而非教条主义的。最好就是从列表中挑选一个来使用，看看最后是否满足你的需求和兴趣，如果还是不行，接着试试另一个。你也尽管放心好了，列表中的框架肯定是足够了的。
|
||
|
||
-------------------------------
|
||
|
||
译者简介：
|
||
|
||
[GHLandy](http://GHLandy.com) —— 生活中所有欢乐与苦闷都应藏在心中，有些事儿注定无人知晓，自己也无从说起。
|
||
|
||
-------------------------------
|
||
|
||
via: http://www.discoversdk.com/blog/6-best-javascript-frameworks-to-learn-in-2016
|
||
|
||
作者：[Danyal Zia][a]
|
||
译者：[GHLandy](https://github.com/GHLandy)
|
||
校对：[wxy](https://github.com/wxy)
|
||
|
||
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创编译，[Linux中国](https://linux.cn/) 荣誉推出
|
||
|
||
[a]:http://www.discoversdk.com/blog/6-best-javascript-frameworks-to-learn-in-2016
|