前端练级攻略(第二部分)(3)

理解　JavaScript　的另一个重要概念是　ECMAScrip　t以及它与　JavaScript　的关系。今天，你平常看到是两种主要的　JavaScript　风格:ES5　和　ES6。ES5　和　ES6　是　JavaScript　使用的　ECMAScript　标准。你可以将它们看作JavaScript的版本。ES5　的最终草案是在2009年完成的，到目前为止你一直在使用它。

ES6，也称为 ES2015，是一个新标准，它为JavaScript带来了新的语言结构，比如常量、类和模板字符串。值得注意的是，ES6 带来了新的语言特性，但仍然使用 ES5 从语义上定义它们。例如，ES6 中的类只是JavaScript原型继承的语法糖。

了解 ES5和 ES6 是非常重要的，因为今天你会看到使用这两种方法的应用程序。 ES5, ES6, ES2016, ES.Next:下一步:JavaScript版本控制是怎么回事 这是一篇很好介绍了 ES6 相关的知识，

Dan Wahlin的 ES6入门-下一版本的JavaScript正在发生什么。之后，你可以在 ES6 特性中看到从ES5 到 ES6 的完整变化列表。如果你想要更多，请查看这个包含 ES6 特性的Github存储库。

更多的练习

如果你已经到了这一步，恭喜你自己。你已经了解了很多JavaScript。让我们把你学到的一些东西付诸实践。

练习 3

练习3 将你所学的 HTML 和 CSS 知识与 JavaScript 入门课程结合起来。在这个实验中，你将创建自己设计的时钟，并使其与 JavaScript 交互。在开始之前，我建议阅读 解耦HTML、CSS和JavaScript的教程，以了解在混合使用 JavaScript 时的基本 CSS 类命名约定。我还在 CodePen上准备了一份笔的清单，你可以作为这次练习的参考。有关更多示例，请在 CodePen 上搜索clock

• Flat Clock
• jQuery Wall Clock
• Fancy Clock
• Retro Clock
• Simple JavaScript Clock

你可以用两种方法做这个实验。你可以先用 HTML 和 CSS 设计和创建布局，然后用 JavaScript 增加交互性。或者你可以先编写J avaScript 逻辑，然后再进入布局。此外，你可以使用jQuery，但也可以随意使用纯 JavaScript。

JavaScript框架

掌握了JavaScript的基础知识之后，是时候学习 JavaScript 框架了。框架是 JavaScript 库，可以帮助你构造和组织代码。JavaScript 框架为开发人员提供了复杂前端问题的可重复解决方案，比如状态管理、路由和性能优化。它们通常用于构建web应用程序。

我不会讲解每个JavaScript框架，这里有几个框架的快速预览:Angular、React + Flux、Ember、Aurelia、Vue和Meteor。你不必学习每个框架。挑一个，好好学习。不要追逐框架，相反，要理解框架所基于的底层编程哲学和原则。

架构模式

在查看框架之前，理解框架倾向于使用的一些架构模式是很重要的:MVC(Model–view–controller)、MVVM(Model–view–viewmodel)v和vMVP(Model–view–presenter)。这些模式被设计成在应用层之间创建清晰的关注点分离。

关注点分离是一种设计原则，主要思想是将应用程序拆分为不同的域特定层。 例如，你可以使用JavaScript 对象（通常称为模型）来存储状态，而不是让 HTML 保持应用程序状态。

要了解更多关于这些模式的信息，请先阅读 Chrome Developers 的 MVC。之后，阅读理解 MVC 和MVP(面向JavaScript和主干开发人员)。在那篇文章中，不要担心学不会，看不懂，只需理解 MVC和 MVP 的部分概念即可。

Addy Osman 还写了关于 MVVM 的 理解 MVVM 的JavaScript开发人员指南。要了解 MVC 的起源及其产生的原因，请阅读 Martin Fowler 关于GUI体系结构的文章。最后，阅读 JavaScript MV* Patterns一节，学习 JavaScript 设计模式。学习JavaScript设计模式是一本很棒的免费在线书籍。

设计模式

JavaScript 框架不会重新发明轮子。它们中的大多数依赖于设计模式。你可以将设计模式视为解决软件开发中常见问题的通用模板。

虽然理解 JavaScript 设计模式并不是学习框架的先决条件，但我建议在有时间的时候可以看看以下几种设计模式。

•  装饰器模式
•  工厂模式
•  单例模式
•  揭示模式
•  观察者模式

理解并能够实现其中的一些设计模式不仅会使你成为更好的工程师，而且还会帮助你理解一些框架的底层功能。

AngularJS

AngularJS　是一个JavaScript MVC　框架，有时也是 MVVM 框架。它由谷歌维护，并在2010年首次发布时席卷了 JavaScript 社区。

Angular 是一个声明性框架。帮助我理解如何从命令式编程过渡到声明式JavaScript编程的最有帮助的文章之一是在StackOverflow上的 AngularJS 与 jQuery有何不同。

如果你想了解更多关于 Angular 的知识，请查看 Angular文档。他们还提供了一个名为 Angular Cat 的教程，可以让你马上投入到编程中去。Tim Jacobi 在 Github知识库中提供了一个更完整的 Angular 学习指南。此外，看看约翰·帕帕写的这本权威的最佳实践风格指南。

React + Flux

Angular 解决了开发人员在构建复杂的前端系统时所面临的许多问题。另一个流行的工具是 React，它是一个用于构建用户界面的库。你可以把它想象成 MVC 中的 V。因为 React 只是一个库，所以它通常使用一个称为 Flux 的架构。

Facebook设计React和Flux是为了解决MVC的一些缺点及其在规模上的问题。看看他们著名的演示 黑客方式:重新思考Facebook的Web应用程序开发。它超过了Flux，它起源于此。

（编辑：ASP站长网）