【译】前端练级攻略

我记得我刚开始学习前端开发的时候。我看到了很多文章及资料，被学习的资料压得喘不过气来，甚至不知道从哪里开始。

本指南列出前端学习路线，并提供了平时收藏的一些有效的资源。

为了使这本指南易于理解，我把它分成了两部分。第一部分介绍了如何使用 HTML 和 CSS开发接口。第2部分将介绍 Javascript、框架和设计模式。

HTML 和 CSS 基础

在前端开发中，一切都从 HTM 和 CSS 开始。HTML 和 CSS 控制你在 Web 页面上看到的内容。HTML 表示内容，而 CSS 处理样式和布局。

首先，阅读 Mozilla Developer Network(MDN)的HTML 和CSS 教程。MDN 逐章解释了 HTML和 CSS 重要概念。此外，每个章节只有一页长，交互演示链接到 CodePen 和 JSFiddle。

在完成这些教程之后，看看 CodeAcademy 的Make a Website 课程。本教程只需要几个小时就可以完成，对于使用 HTML 和 CSS 构建网站是一个很好的入门教程。如果wq 想了解更多，Building web forms 是 CodeAcademy 提供的另一篇教程，该教程将指导你构建和样式化 web 表单。

要练习 CSS，可以试试CSS Diner。这是一个有趣的 CSS 挑战游戏。HTM L和CSS 的另一个重要方面是布局。LearnLayout 是一个交互式教程，向你展示如何使用 HTML 和 CSS 创建布局。

另外，了解如何使用 CSS Tricks 的Google 字体 的API 基础知识。 排版是界面的基本构建块。 如果你有时间，我强烈建议你阅读这本免费的在线书籍，Donny Truong 的 Professional Web Typography 它教你作为前端开发人员需要了解的关于排版的一切。

通过这些资源，不要太担心记忆的问题。相反，重点是理解 HTML 和 CSS 如何协同工作。

练习 HTML 和 CSS 基础

现在你已经对 HTML 和 CSS 有了基本的了解，让我们来找点乐趣。在本节中，有两个实践旨在为你提供构建网站和界面的实践。我用“实践”这个词是因为在实践中，你从失败中学到的东西和你从成功中学到的一样多。

实践 1

在我们的第一个实践中，我们将使用CodePen。CodePen 是一个前端平台，你可以在这里编写 HTML 和 CSS 代码，而不必在本地存储文件。它还提供了实时预览，可以在保存代码时立即更新。

通过使用 CodePen，你可以一石二鸟。一方面，你要练习 HTML 和 CSS。另一方面，你创建一个基本的进度组合。我们还将使用Dribbble，这是一个充满设计灵感的网站。

在 Dribbble 找到一个简单到可以在几个小时内编写代码的设计。我选择了一些设计让你开始:1、 2 、 3 、4 和5。我选择了手机为先的网页设计，因为它们比桌面网页设计要简单。不过，也可以自由选择桌面设计。

在你决定了一个设计之后，继续尝试用 CodePen 编写它。如果遇到困难，请记住StackOverflow 是你的朋友。另一个有用的实践是访问像Medium、 AirBnB 和Dropbox 这样的网站，使用inspector 工具查看它们是如何实现不同的布局和风格的。另外，看看pens on CodePen。我挑选了一些好的例子:

• Twitter小部件
• Article News Card
• Simple Flat Menu

如果你出来的与原设计不同，请不要气馁。 继续练习不同的设计，你会发现每次都有进步。

如果你没有设计背景，很可能你的设计眼光不够成熟。具有良好设计眼光的前端开发人员将能够识别好的设计并完美地复制它们。几周前，我写了一篇关于如何培养你的设计眼光的文章。

实践 2

希望第一个实践让你对编写 HTML 和 CSS 有一定的信心。 对于实践 2，我们将看一些网站，然后编写一些组件。

一些网站使用 CSS框架或 混淆它们的 CSS 类名，使你很难阅读它们的源代码。这就是为什么我选择了几个设计良好的网站，易于阅读源代码。

• AirBnB: 尝试复制他们的页脚
• PayPa:试着复制他们的导航栏l
• Invision :尝试复制页面底部的注册部分
• Stripe: 尝试复制他们的支付部分

同样，实践2的重点不是重新创建整个页面。选择几个关键组件，如导航栏或英雄部分进行编码。我在网站列表旁边提供了一个建议，但是请随意选择其他组件。

HTML 和 CSS 最佳实践

到目前为止，你已经学习了 HTML 和 CSS 的基础知识。下一步是学习最佳实践。最佳实践是一组提高代码质量的非正式规则。

语义标记

HTML 和 CSS 的最佳实践之一是编写语义标记。好的 web 语义意味着使用适当的 HTML 标签和有意义的 CSS 类名来表示结构的意义。

例如， h1 标签告诉我们它包装的文本是一个重要的标题。 另一个例子是 footer 标签 ，它告诉我们元素属于页面底部。 有关进一步，请阅读 CSSTricks 的正确的 HTML5 语义 和 什么是语义类名的构成要素 。

CSS 命名规范

CS S的下一个重要的最佳实践是正确的命名规范。良好的命名规范，如语义标签，传达了意义，并有助于使我们的代码可预测、可读和可维护。你可以在这篇 OOCSS、ACSS、BEM、SMACSS：它们是什么?我应该用什么? 中了解到不同的命名规范。

一般来说，我建议你尝试一些简单的命名规范，这些规范对你来说是直观的。随着时间的推移，你会发现最适合你的方法。要了解像 Medium 这样的公司是如何利用像 BEM 这样的命名约定的，请阅读 Medium’s CSS is actually pretty f***ing good. 。在这篇文章中，你还会了解到，提出一组有效的 CSS 约定是一个迭代过程。

CSS重置

从页边距到行高，每个浏览器都有一些小的样式不一致。因此，需要重置 CSS。MeyerWeb 是一个受欢迎的重置。如果你想深入了解，可以阅读 Create Your Simple Reset.css File 。

跨浏览器支持

跨浏览器支持意味着你的代码支持最新的浏览器。像 transition 这样的 CSS 属性需要厂商前缀才能在不同的浏览器中正常工作。在本文中，我可以阅读更多关于供应商前缀的信息，即CSS供应商前缀。最重要的是，你应该跨多个浏览器(包括 Chrome、Firefox 和 Safari )测试你的网站。

CSS 预处理器与 CSS 后处理器

自20世纪90年代CSS引入以来，CSS走过了漫长的道路。由于UI系统变得越来越复杂，人们提出了称为 预处理器 和 后处理器 的 工具 来管理复杂性。

CS S预处理程序是 CSS 语言扩展，它添加了一些额外的功能，比如变量、混合和继承。两个主要的CSS预处理程序是Sass 和Less。2016 年，Sass的使用范围更加广泛。Bootstrap是 一种流行的响应式 CSS 框架，它也正在从 Less 转换到 Sass。而且，当大多数人谈论 Sass时，他们实际上是在谈论SCSS。

CSS 后处理器在由预处理器手写或编译后对 CSS 应用更改。 例如，PostCSS 等一些后处理器具有自动添加浏览器供应商前缀的插件。

当您第一次得知有 CSS预处理器和后处理器时，你很有可能在任何地方已经使用它们。 但是，从简单开始，仅在必要时添加变量和 mixin 等扩展。 我之前建议的文章， Medium’s CSS is actually pretty f***ing good ，也涵盖了预处理器相关的知识。

网格系统和响应能力

网格系统是CSS结构，它允许你水平和垂直地堆叠元素。

Bootstrap ，Skeleton 和Foundation 等网格框架提供了管理布局中行和列的样式表。 虽然网格框架很有用，但了解网格的工作原理也很重要。理解CSS网格系统 和 Don’t Overthink Grids 这两篇文章是很好的概述。

网格系统的主要目的之一是为你的网站添加响应性。响应性意味着你的网站根据窗口宽度调整大小。很多时候，响应是通过使用CSS 媒体查询实现的，CSS 规则只适用于特定的屏幕宽度。

关于媒体查询知识及扩展可以看看以下几篇文章：

• Intro to Media Queries
• mobile-first
• An Introduction to Mobile-First Media Queries

实践 HTML 和 CSS 最佳实践

现在你已经掌握了最佳实践，让我们进行测试。下面两个实践的目标是练习编写干净的代码，并观察最佳实践对可读性和可维护性的长期影响。

实践 3

对于实践 3，选择你之前做过的项目，并使用你在这过程所学到的知识来重构你的代码。重构意味着编写代码，使代码更容易阅读，更简单。

能够有效地重构代码是前端开发人员的一项重要技能。 编写高质量代码是一个迭代过程。 CSS体系结构：重构你的 CSS 是重构代码的入门指南。

在重构代码时，有几件事需要问问自己。

* 你的取的类名是否有歧义? 6个月后，你还能理解你的类名是什么意思吗?

* 你的 HTML 和 CSS 是语义化的吗?当你浏览你的代码时，你能快速辨别结构和关系的含义吗?

• 你是否在代码中反复使用相同的十六进制颜色代码? 将它重构为一个Sass变量 是否更有意义?

• 你的代码在 Safari 和 Chrome 上运行得一样的吗?

• 你是否可以用类似于Skeleton 的网格系统替换一些布局代码?

• 你经常使用 !important 标志吗?你怎么解决这个问题?

实践 4

最后一个实验把你学到的关于最佳实践的知识运用起来。然而，最佳实践的效果通常不会变得明显，直到你将它们应用到一个更大的项目中。

在最后一个实践中，为自己建立一个作品集网站。作为前端开发者，你的作品集网站是你最重要的数字资产之一。作品集是一个展示你作品的网站。更重要的是，它是一个持续的记录，帮助你跟踪你的进步和发展。所以即使你只有一两件事要展示，也要展示出来。

首先，跟随阿德汉姆·达纳韦的文章 《设计和开发作品集网站站的简单工作流程》

如果你的第一个作品集网站迭代并不完美，那也没关系。作品集网站需要经历许多迭代。还有，重要的是你要用自己的技能来建造它。

与时俱进

虽然 HTML 和 CSS 不会很快过时，但是跟上前端环境的发展是很重要的。

下面是一个网站、博客和论坛的列表，这些网站、博客和论坛阅读起来既有趣且信息丰富。

• CSSTricks
• Smashing Magazine
• Designer News
• Nettuts+
• CSS Wizard

通过例子学习

最后，最好的学习方法是以身作则。这里有一套样式指南和编码规范，将教你如何成为一个更有效的前端。

样式指南

Web 样式指南是可以在整个网站中重用的 CSS 组件和模式的集合。从这些样式指南中需要注意的关键问题是，基于组件的 HTML 和 CSS 方法如何允许重用代码来保持代码的清爽(DRY)。

• Mapbox
• LonelyPlanet
• SalesForce
• MailChimp

编码规范

编码规范让代码易读且可维护。其中一些链接(如CSS Guidelines)是编写更好的 HTML 和 CSS 的指南，而其他链接(如 Github internal CSS toolkit and Guidelines )是高质量代码的例子。

• CSS Guidelines
• Github internal CSS toolkit and guidelines
• AirBnB’s CSS Styleguide

小结

希望在本文结束时，你已经熟悉 HTML 和 CSS，并掌握了一些项目。 学习前端的最佳方式是建立项目和实践。 请记住，每个前端开发人员都必须从某个地方开始。 从今天开始比明天开始更好。

本文是两部分系列中的第一部分。 第二篇文章介绍了如何使用 Javascript 和 Javascript库/框架添加交互性，共勉，同进步。

JavaScript基础知识

JavaScript 是一种跨平台的编程语言，现在几乎可以用于任何事情。

语言

在学习如何将JavaScript应用到web之前，首先要了解该语言本身。首先，阅读 Mozilla Developer Network的语言基础速成课程。本教程将教你基本的语言结构，如变量、条件和函数。

然后，阅读 MDN 的JavaScript 指南中的以下部分:

• Grammar and types (语法和类型)
• Control flow and error handling (控制流程和错误处理)
• Loops and iterations (循环和迭代)
• Functions(函数)

不要太担心记住特定的语法，你可以随时查一下文档。相反，应该专注于理解重要的概念，比如变量实例化、循环和函数。如果知识密度难度太大，也没关，先过一篇，你把这些概念付诸实践，当你回过头在来看，可能会理解起来会更加清晰。

基于文档的学习可能会过于单调，可以看看 Codecademy 的JavaScript课程，这课程是理论与实践相结合的，相对会有乐趣一。 此外，如果你有时间，请参阅上面列出的每个概念，阅读 Eloquent JavaScript中的相应章节以加强你的学习。 Eloquent JavaScript 是一本很棒的免费在线书籍，每个有抱负的前端开发人员都应该阅读。

交互性

现在你已经基本了解了 JavaScript 的语法，下一步就是将它应用到 Web上。 要了解 JavaScript如 何与网站交互，首先你必须了解文档对象模型（DOM）。

DOM 是 HTML 文档的一种表示结构。它是一个树形结构，由对应于 HTML 节点的 JavaScript 对象组成。要进一步了解DOM，请阅读 CSSTricks 的《什么是DOM》。它提供了对 DOM 的简单而直接的解释。

JavaScript 与 DOM 交互以更改和更新它。下面是一个例子，我们选择一个 HTML 元素并更改它的内容

var container = document.getElementById(“container”); 
container.innerHTML = 'New Content!';
复制代码

别担心，那只是一个简单的例子。使用 JavaScript DOM 操作，你可以做更多的事情。要了解有关如何使用 JavaScript 与 DO M交互的更多信息，请阅读 MDN 的“文档对象模型”一节中的以下指南。

• 事件及DOM
• Examples of web and XML development using the DOM
• 如何建立 DOM 树
• DOM概述
• 使用选择器定位DOM元素

再次强调一下，重点是要先理解概念而不是语法，希望能够回答以下问题:

• DOM 是什么?
• 如何查询元素
• 如何添加事件监听？
• 如何更改 DOM 节点属性？

有关常见的 JavaScript DOM 交互的列表，请查看 PlainJS 的 JavaScript 函数和助手 。该网站提供了一些例子，说明如何在 HTML 元素上设置样式和附加键盘事件监听器。如果你想深入挖掘，你可以随时阅读 Eloquent 讲的JavaScript 中关于DOM的部分。

检查

要调试浏览器中的JavaScript，我们使用浏览器内置的开发人员工具。 大多数浏览器都提供了 inspector 面板，可以让你查看网页的来源。 你可以在执行时跟踪 JavaScript，将调试语句打印到控制台，以及查看网络请求和资源等内容。

里有一个关于使用 Chrome 开发工具的教程。如果你使用的 Firefox，可以查看本教程。

实践基础

在这一点上，关于JavaScript还有很多东西需要学习。然而，最后一节包含了许多新信息。我想我们该休息一下，做几个实践了。它们有助于巩固你刚刚学到的一些概念。

实践 1

对于实践1，转到AirBnB，打开浏览器的页面检查器，然后单击控制台选项卡。在这里，你可以在页面上执行JavaScript。我们要做的是通过操纵页面上的一些元素来获得一些乐趣。看看你是否可以完成以下所有的 DOM 操作。

• 选择具有唯一类名的标题标签并更改文本

• 选择页面上的任何元素并将其删除

• 选择任意元素并更改其CSS属性之一

* 选择一个特定的区域标签，并向下移动250像素

* 选择任何组件，如面板，并调整其透明度

• 定义一个名为 doS​​omething 的函数，该函数j里定义一下 alert (“Hello world”) 然后执行它

• 选择一个特定的段落标记，向其中注册一个 click 事件，并在每次事件被触发时运行 doSomething

如果您遇到困难，请参考 JavaScript 函数和帮助程序指南 。这些任务大部分都是基于它。以下是如何完成第一个要点的示例:

var header = document.querySelector(‘.text-branding’)
header.innerText = ‘Boop'
复制代码

这个实践的主要目的是学习一些关于 JavaScript 和 DOM 操作的知识，并看到它们的实际应用。

实践 2

使用 CodePen，编写一个使用DOM操作并需要一些编程逻辑来运行的基础JavaScript 实践。这个实践的重点是把你在《前端练级攻略》第 1 部分中学到的一些东西和 JavaScript结合起来。这里有几个可以作为启发的参考例子。

• Mood Color Generator
• 计算器
• JavaScript 测试
• Playable Canvas Asteroids

更多的 JavaScript

现在你已经了解了一些 JavaScript并进行了一些实践，我们将继续学习一些更高级的概念。下面的概念并不直接相关。我将它们分组在本节中，因为它们对于理解如何构建更复杂的前端系统是必要的。一旦你进入框架部分，你将更好地理解并使用它们。

语言

当你使用JavaScript进行更多工作时，你将遇到一些更高级别的概念。 以下其中一些概念的列表。 如果有时间，仔细阅读每一个要点 此外，如果你想补充学习其它内容，Eloquent JavaScript 涵盖了大部分内容。

• 继承与原型链
• 作用域
• 事件轮询
• 事件冒泡
• Apply, call, 和 bind
• 回调函数和 promise
• 变量和函数的提升
• 柯里化

命令式和声明

JavaScript如何与DOM交互有两种方法 :命令式和声明式 。一方面，声明式编程关注所发生的事情。另一方面，命令式编程关注的是什么以及如何实现。

var hero = document.querySelector('.hero')
hero.addEventListener(‘click’, function() {
  var newChild = document.createElement(‘p’)
  newChild.appendChild(document.createTextNode(‘Hello world!’))
    newChild.setAttribute(‘class’, ‘text’)
    newChild.setAttribute(‘data-info’, ‘header’)
    hero.appendChild(newChild)
 })
}
复制代码

这是命令式编程的一个例子，我们手动查询一个元素并将 UI 状态存储在 DOM 中。换句话说，专注于如何实现某件事。这段代码最大的问题是它很脆弱。如果处理代码的人将 HTML中 的类名从 hero 更改为 villain ，事件侦听器将不再触发，因为 DOM 中没有 hero 类。

声明式编程解决了这个问题。你不必选择元素，而是将其留给您正在使用的框架或库。这让你专注于做什么而不是如何做。要了解更多信息，请查看 JavaScript的状态——从命令式转换到声明式 ，以及 Web开发:声明式vs.命令式 。

Ajax

在这些文章和教程中，你可能已经多次看到 Ajax 这个术语。Ajax 是一种允许 web 页面使用 JavaScript 与服务器交互的技术

例如，当你在网站上提交表单时，它收集你的输入并发出 HTTP 请求，将数据发送到服务器。当你在Twitter 上发布一条 tweet 时，你的 witter 客户机向 Twitter 的服务器 API 发出 HTTP 请求，并使用服务器响应更新页面。

有关 Ajax 的阅读，请查看什么是Ajax。如果你仍然没有完全理解 AJAX 的概念，请看看 Explain it like i’m 5, what is Ajax 。如果这些还不够，你还可以阅读关于 HTTP 的JavaScript 章节。

今天，HTTP 请求的浏览器标准是Fetch。 你可以在 Dan Walsh 的这篇文章中阅读有关 Fetch 的更多信息。 它介绍了Fetch 的工作原理以及如何使用它。 你还可以在 此处 找到带文档的 Fetchpolyfill。

jQuery

到目前为止，你一直在使用 JavaScript 进行 DOM 操作。事实上，有很多 DOM 操作库提供api 来简化你编写的代码。

最流行的 DOM 操作库之一是jQuery。请记住，jQuery 是一个命令式库。它是在前端系统像今天这样复杂之前编写的。如今，管理复杂 UI 是声明性框架和库，如 Vue、Angular 和 React。但是，我仍然建议你学习jQuery，因为在你的前端职业生涯中很可能会遇到它。

要学习j Query 的基础知识，请查看jQuery学习中心。它一步一步地通过一些重要的概念，比如动画和事件处理。如果你想要更多的动手教程，可以看看 Codecademy 的jQuery课程。

ES5 vs. ES6

理解 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和v MVP(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 是一个JavaScriptMVC 框架，有时也是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，它起源于此。

要开始学习 React 和 Flux，首先要学习 React。一个好的入门读物是React文档。在那之后，看看 React.js Introduction For People Who Know Just Enough jQuery To Get By ，帮助你 从jQuery 的思维模式过渡过来。

一旦你对 React 有了基本的了解，开始学习 Flux。一个好的起点是官方的Flux文档。在那之后，看看 Awesome React ，这是一个精选的链接列表，可以帮助你在学习上更进一步。

练习与框架

现在你已经掌握了 JavaScript 框架和架构模式的一些基本知识，现在是时候将它付诸实践了。 在这两个练习中，重点是应用你学到的架构概念。 特别是，保持您的代码DRY，明确分离关注点，并遵守单一责任原则。

练习 4

练习 5 是使用不依赖框架的 JavaScript 分解和重构 Todo MVC 应用程序。这个练习的目的是向你展示 MVC 如何在不混合框架特定语法的情况下工作。

首先，在TodoMVC上查看最终结果。第一步是在本地创建一个新项目，并首先建立 MVC 的三个组件。由于这是一个复杂的实验，请参考 Github 存储库 中的完整源代码。如果你不能完全复制这个项目或者没有时间，也没关系。下载 repo 代码并尝试使用不同的 MVC 组件，直到你理解它们之间的关系。

练习 5

练习 5 是应用 MVC 的一个很好的练习，理解 MVC 是学习 JavaScript 框架的重要一步。 练习 5 是按照 Scotch.io的教程来构建一个带有 Angular 的 Etsy 克隆。

使用Angular构建一个Etsy克隆 ，Stamplay 将教你如何使用 Angular 构建一个 web 应用程序，如何使用 api 构建接口，以及如何构造大型项目。完成本教程后，能够回答以下问题。

• 什么是 web 应用程序?
• MVC/MVVM 如何应用于 Angular？
• 什么是API，它做什么
• 如何组织和构造大型代码库
• 将 UI 分解为指令组件有什么好处？

如果你想尝试构建更多 Angular web 应用程序，可以尝试使用 AngularJS & Firebase构建一个实时状态更新应用程序。

持续关注时事

就像前端的其他部分一样，JavaScript的发展很快，保持持续关注是很重要的。

下面是一个网站、博客和论坛的列表，这些网站、博客和论坛阅读起来既有趣又信息丰富。

• Smashing Magazine
• JavaScript Weekly
• Reddit JavaScript
• JavaScript Jabber

通过例子学习

一如既往，最好的学习方法是以身作则。

样式指南

JavaScript样式指南是一组编码规范，旨在帮助保持代码的可读性和可维护性。

• AirBnB JavaScript Styleguide
• Principles of Writing Consistent, Idiomatic JavaScript
• Node Styleguide
• MDN Coding Style

代码库

我无法强调阅读好的代码是多么有帮助，了解如何在获取新内容时搜索Github的相关存储库。

• Lodash
• Underscore
• Babel
• Ghost
• NodeBB
• KeystoneJS