从零学web前端

This article is part two of the “From Zero to Front-end Hero” series. In part one, you learned how to create layouts with HTML and CSS as well as some best practices. In part two, we will focus on learning JavaScript as a standalone language, how to add interactivity to interfaces, JavaScript design and architectural patterns, and how to build web apps.

本文是“从零到前端英雄”系列的第二部分。 在第一部分中 ，您学习了如何使用HTML和CSS创建布局以及一些最佳实践。 在第二部分中，我们将重点学习作为独立语言JavaScript，如何向界面添加交互性，JavaScript设计和架构模式，以及如何构建Web应用程序。

Just like with HTML and CSS, there are tons of JavaScript tutorials out there. However, especially for someone new to front-end, it’s hard to figure what tutorials to use and what order to do them in. The main goal of this series is to provide you with a road map to help you navigate learning to be a front-end.

就像HTML和CSS一样，这里有大量JavaScript教程。 但是，特别是对于刚接触前端的人来说，很难弄清楚要使用什么教程以及以什么顺序进行学习。本系列的主要目标是为您提供一个路线图，以帮助您导航学习成为前沿-结束。

If you haven’t already read part one, go ahead and do that before reading on.

如果您尚未阅读第1部分，请继续阅读并继续。

From Zero to Front-end Hero (Part 1)A complete guide to learning front-end developmentmedium.com

从零到前端英雄(第1部分) 学习前端开发的完整指南 medium.com

JavaScript基础 (JavaScript Basics)

JavaScript is a cross-platform programming language that can be used for practically anything these days, but we’ll get into that later once you understand the basics of how developers use JavaScript for the web.

JavaScript是一种跨平台的编程语言，如今几乎可以用于任何事物，但是一旦您了解了开发人员如何在Web上使用JavaScript的基础知识，我们就会在后面进行介绍。

语言 (Language)

Before learning how to apply JavaScript to the web, first learn about the language itself. To get started, read Mozilla Developer Network’s Language basics crash course. This tutorial will teach you basic language constructs like variables, conditionals, and functions.

在学习如何将JavaScript应用于网络之前，请先了解该语言本身。 首先，请阅读Mozilla开发人员网络的语言基础崩溃课程 。 本教程将教您基本的语言构造，例如变量，条件和函数。

After that, read through the following sections in MDN’s JavaScript guide:

之后，请通读MDN的JavaScript指南中的以下部分：

• Grammar and types

  语法和类型

• Control flow and error handling

  控制流程和错误处理

• Loops and iterations

  循环与迭代

• Functions

  功能

Don’t worry too much about memorizing specific syntax. You can always look that up. Instead, focus on understanding important concepts like variable instantiation, loops, and functions. If the material is too dense, that’s okay. Skim through the reading; you can always go back later. And as you put these concepts into practice, they will become much clearer.

不必太担心记住特定的语法。 您可以随时查找。 相反，应专注于理解重要的概念，例如变量实例化，循环和函数。 如果材料太密，那没关系。 浏览阅读内容； 您以后可以随时返回。 当您将这些概念付诸实践时，它们将变得更加清晰。

To break the monotony of text-based learning, check out the JavaScript course by Codecademy. It’s hands-on and fun. Also, if you have time, for each concept I listed above, read the corresponding chapter in Eloquent JavaScript to reinforce your learning. Eloquent JavaScript is a great free online book that every aspiring front-end developer should read.

要打破基于文本的学习的单调性，请查看Codecademy的JavaScript课程 。 动手又有趣。 另外，如果您有时间，请针对上面列出的每个概念，阅读Eloquent JavaScript中的相应章节以加强学习。 雄辩JavaScript是一本很棒的免费在线书，每个有抱负的前端开发人员都应该阅读。

互动性 (Interactivity)

Now that you have a basic understanding of JavaScript as a language, the next step is to apply it to web. To understand how JavaScript interacts with websites, you first have to know about the Document Object Model (DOM).

既然您已经对JavaScript作为一种语言有了基本的了解，那么下一步就是将其应用于Web。 要了解JavaScript如何与网站交互，您首先必须了解文档对象模型(DOM) 。

The DOM is a representational structure of HTML documents. It’s a tree-like structure made up of JavaScript objects that correspond to HTML nodes. For further reading about the DOM, read What is the DOM by CSSTricks. It provides a simple and straightforward explanation of the DOM.

DOM是HTML文档的表示结构。 它是由与HTML节点相对应的JavaScript对象组成的树状结构。 有关DOM的更多信息，请阅读CSSTricks 的DOM是什么。 它提供了有关DOM的简单明了的解释。

JavaScript interacts with the DOM to change and update it. Here is an example where we select an HTML element and change its content:

JavaScript与DOM交互以更改和更新它。 这是一个示例，其中我们选择一个HTML元素并更改其内容：

var container = document.getElementById(“container”);

container.innerHTML = 'New Content!';

Don’t worry, that was just a simple example. You can do a lot more than that with JavaScript DOM manipulation. To learn more about how to use JavaScript to interact with the DOM, go through the following guides in MDN’s section, The Document Object Model.

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

• Events

  大事记

• Examples of web and XML development using the DOM

  使用DOM进行Web和XML开发的示例

• How to create a DOM tree

  如何创建DOM树

• Introduction to the DOM

  DOM简介

• Locating DOM elements using selectors

  使用选择器定位DOM元素

Once again, focus on concepts over syntax. Be able to answer the following questions:

再一次，关注语法概念。 能够回答以下问题：

• What is the DOM?什么是DOM？
• How do you query elements?您如何查询元素？
• How do you add event listeners?如何添加事件监听器？
• How do you change DOM node properties?您如何更改DOM节点属性？

For a list of common JavaScript DOM interactions, check out JavaScript Functions and Helpers by PlainJS. This site provides examples of how to do things like set styles on HTML elements and attach keyboard event listeners. And if you want to dig deeper, you can always read the section on the DOM in Eloquent JavaScript.

有关常见JavaScript DOM交互的列表，请查看PlainJS的JavaScript Functions and Helpers 。 该站点提供了一些示例，说明了如何在HTML元素上设置样式以及附加键盘事件侦听器 。 而且，如果您想更深入地了解，可以随时阅读Eloquent JavaScript中有关DOM的部分。

检验员 (Inspector)

To debug client-side JavaScript, we use developer tools built into browsers. The inspector panel is available in most browsers and lets you see the source of web pages. You can track JavaScript as it executes, print debug statements to the console, and see things like network requests and resources.

为了调试客户端JavaScript，我们使用浏览器内置的开发人员工具。 检查器面板可在大多数浏览器中使用，并允许您查看网页的来源。 您可以在JavaScript执行时对其进行跟踪，将调试语句打印到控制台，以及查看网络请求和资源等内容。

Here is a tutorial on using the Chrome developer tool. If you’re using Firefox, you can check out this tutorial.

这是有关使用Chrome开发者工具的教程 。 如果您使用的是Firefox，则可以查看本教程 。

练习基础 (Practicing the basics)

At this point, there is still a lot more to learn about JavaScript. However, the last section contained a lot of new information. I think it’s time we took a break and tackled a few small experiments. They should help solidify some of the concepts you just learned.

至此，关于JavaScript的知识还有很多。 但是，最后一节包含许多新信息。 我认为现在是我们休息一下并进行一些小实验的时候了。 它们应有助于巩固您刚刚学到的一些概念。

实验1 (Experiment 1)

For experiment 1, go to AirBnB, open up your browser’s page inspector, and click on the console tab. Here you can execute JavaScript on the page. What we are going to do is have some fun with manipulating some of the elements on the page. See if you can do all of the following DOM manipulations.

对于实验1，请转到AirBnB ，打开浏览器的页面检查器，然后单击“ 控制台”选项卡 。 在这里，您可以在页面上执行JavaScript。 我们要做的就是操纵页面上的某些元素，这很有趣。 查看您是否可以执行以下所有DOM操作。

I chose AirBnB’s website because their CSS class names are relatively straightforward and aren’t obfuscated by some compiler. However, you can choose to do this on any page you want.

我选择AirBnB的网站是因为它们CSS类名相对简单，并且不会被某些编译器所混淆。 但是，您可以选择在所需的任何页面上执行此操作。

• Select a header tag with a unique class name and change the text选择具有唯一类名称的标题标签并更改文本
• Select any element on the page and remove it选择页面上的任何元素并将其删除
• Select any element and change one of its CSS properties选择任何元素并更改其CSS属性之一
• Select a specific section tag and move it down 250 pixels选择一个特定的部分标签并将其下移250像素
• Select any component, like a panel, and adjust its visibility选择任何组件，例如面板，并调整其可见性

• Define a function named doSomething that alerts “Hello world” and then execute it

  定义一个名为doSomething的函数，该函数将向 “ Hello world”发出警报，然后执行它

• Select a specific paragraph tag, add a click event listener to it, and run doSomething every time the event is fired

  选择一个特定的段落标记，向其添加一个click事件侦听器，并在每次触发该事件时运行doSomething

If you get stuck, reference the JavaScript Functions and Helpers guide. I based most of these tasks off of it. Below is an example of how to complete the first bullet point:

如果遇到困难，请参考JavaScript函数和助手指南。 我将所有这些任务作为基础。 以下是如何完成第一个要点的示例：

var header = document.querySelector(‘.text-branding’)

header.innerText = ‘Boop'

The main purpose of this experiment is to take some of the things you learned about JavaScript and DOM manipulation and see it in action.

该实验的主要目的是将您学到的关于JavaScript和DOM操作的一些知识带入实际应用中。

实验2 (Experiment 2)

Using CodePen, write a basic JavaScript heavy experiment that uses DOM manipulation and requires some programmatic logic to function. The focus of this experiment is to take some of the things you learned in From Hero to Front-end Hero Part 1 and combine it with JavaScript. Here are a few reference examples that might serve as inspiration.

使用CodePen编写一个基本JavaScript繁重实验，该实验使用DOM操作并需要一些编程逻辑才能起作用。 本实验的重点是将您从“从英雄到前端英雄”第1部分中学到的一些知识与JavaScript结合起来。 这里有一些参考示例，可以作为启发。

• Periodic Table

  元素周期表

• Mood Color Generator

  情绪颜色生成器

• Calculator

  计算器

• JavaScript Quiz

  JavaScript测验

• Playable Canvas Asteroids

  可玩的画布小行星

更多JavaScript (More JavaScript)

Now that you know some JavaScript and have had some practice with it, we’re going to move on to some more advanced concepts. The concepts below aren’t directly related to one another. I grouped them in this section because they are necessary for understanding how to build more complex front-end systems. You will better understand how to put them to use once you reach the experiments and frameworks section.

既然您已经了解了一些JavaScript并进行了一些实践，那么我们将继续一些更高级的概念。 以下概念并不彼此直接相关。 我将它们分组在本节中是因为它们对于理解如何构建更复杂的前端系统是必需的。 到达“实验和框架”部分后，您将更好地了解如何使用它们。

语言 (Language)

As you do more work with JavaScript, you will encounter some higher level concepts. This is a list of some of those concepts. When you have time, go through each bullet point. Also, Eloquent JavaScript covers much of this material, if you want to supplement your learning.

当您使用JavaScript进行更多工作时，将遇到一些更高级的概念。 这是其中一些概念的列表。 有时间时，遍历每个要点。 此外，如果您想补充学习内容，则Eloquent JavaScript涵盖了大部分材料。

• Prototypal inheritance

  原型继承

• Scoping

  范围界定

• Closures

  关闭

• The event loop

  事件循环

• Event bubbling

  事件冒泡

• Apply, call, and bind

  应用，调用和绑定

• Callbacks and promises

  回调和承诺

• Variable and function hoisting

  变量和功能提升

• Currying

  咖喱

命令式与声明式 (Imperative vs. Declarative)

There are two types of approaches to how JavaScript interacts with the DOM: imperative and declarative. On one hand, declarative programming focuses on what happens. On the other hand, imperative programming focuses on what as well as the how.

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) })}

This is an example of imperative programming where we manually query an element and store UI state in the DOM. In other words, focusing on how to achieve something. The biggest problem with this code is that it is fragile. If someone working on the code changes the class name in HTML from hero to villain, the event listener will no longer fire since there is no hero class in the DOM.

这是命令式编程的示例，其中我们手动查询元素并将UI状态存储在DOM中。 换句话说，专注于如何实现目标。 此代码的最大问题是它很脆弱。 如果使用该代码的人将HTML中的类名称从hero更改为villain ，则事件侦听器将不再触发，因为DOM中没有英雄类。

Declarative programming solves this problem. Instead of having to select elements, you leave it up to the framework or library you are using. This lets you focus on the what instead of the how. For more reading, check out The State Of JavaScript — A Shift From Imperative To Declarative and Three D’s of Web Development #1: Declarative vs. Imperative.

声明式编程解决了这个问题。 不必选择元素，您可以将其留给所使用的框架或库。 这使您可以专注于什么而不是如何。 有关更多阅读，请查看JavaScript的状态—从命令式到声明式的转变以及Web开发＃1的三个D：声明式与命令式 。

This guide first teaches you the imperative approach before introducing the declarative approach with frameworks like Angular and libraries like React. I recommend learning in this order because it lets you see the problem that declarative JavaScript solves.

在使用Angular等框架和React等库介绍声明式方法之前，本指南首先教您使用命令式方法。 我建议按此顺序学习，因为它可以让您看到声明式JavaScript解决的问题。

阿贾克斯 (Ajax)

Throughout some of these articles and tutorials, you’ve probably seen the term Ajax mentioned a few times. Ajax is a technique that allows web pages to interface with server using JavaScript.

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

For example, when you submit a form on a website, it collects your input and makes an HTTP request that sends that data to a server. When you post a tweet on Twitter, your Twitter client makes an HTTP request to Twitter’s server API and updates the page with the server response.

例如，当您在网站上提交表单时，表单会收集您的输入并发出HTTP请求，以将该数据发送到服务器。 当您在Twitter上发布推文时，您的Twitter客户端向Twitter的服务器API发出HTTP请求，并使用服务器响应更新页面。

For reading on Ajax check out What is Ajax. If you still don’t entirely get the concept of AJAX, take a look at Explain it like i’m 5, what is Ajax. And if all that is not enough, you can read Eloquent JavaScript’s chapter on HTTP.

要阅读有关Ajax的内容，请查看什么是Ajax 。 如果您仍然不完全了解AJAX的概念，请看一下像我5岁时解释它，什么是Ajax 。 如果还不够，您可以阅读Eloquent JavaScript的HTTP 章节 。

Today, the upcoming browser standard for making HTTP requests is Fetch. You can read more about Fetch in this article by Dan Walsh. It covers how Fetch works and how to use it. You can also find a Fetch polyfill with documentation here.

今天，即将发出的用于发出HTTP请求的浏览器标准是Fetch 。 您可以在Dan Walsh的这篇文章中阅读有关Fetch的更多信息。 它涵盖了访存的工作原理和使用方法。 您还可以在此处找到包含文档的Fetch polyfill 。

jQuery的 (jQuery)

Up until now, you’ve been doing DOM manipulations with just JavaScript. The truth is, there are a lot of DOM manipulation libraries that provide APIs to simplify the code you write.

到目前为止，您仅使用JavaScript进行DOM操作。 事实是，有许多DOM操作库提供API来简化您编写的代码。

One of the most popular DOM manipulation libraries is jQuery. Keep in mind, jQuery is an imperative library. It was written before front-end systems were as complex as they are today. Today, the answer to managing complex UIs are declarative frameworks and libraries like Angular and React. However, I still recommend that you learn jQuery because you will more than likely encounter it during your career as a front-end.

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

To learn the basics of jQuery, check out jQuery’s Learning Center. It goes step by step through important concepts like animations and event handling. If you want a more hands on tutorial, you can give Codecademy’s jQuery course a shot.

要学习jQuery的基础知识，请查看jQuery的学习中心 。 它一步一步地介绍了重要概念，例如动画和事件处理 。 如果您想进一步学习本教程，可以尝试一下Codecademy的jQuery课程 。

Keep in mind, jQuery is not always the solution for imperative DOM manipulation. PlainJS and You Might Not Need jQuery are two good resources that show you equivalent JavaScript functions to frequently used jQuery functions.

请记住，jQuery并非总是强制性DOM操作的解决方案。 PlainJS和您可能不需要jQuery是两个很好的资源，向您展示了与常用jQuery函数等效JavaScript函数。

ES5与ES6 (ES5 vs. ES6)

Another important concept to understand about JavaScript is ECMAScript and how it relates to Javascript. There are two main flavors of JavaScript that you will encounter today: ES5 and ES6. ES5 and ES6 are ECMAScript standards that JavaScript uses. You can think of them as versions of JavaScript. The final draft of ES5 was finalized in 2009 and that’s what you’ve been using so far.

了解JavaScript的另一个重要概念是ECMAScript及其与Javascript的关系。 今天您将遇到两种主要JavaScript风格：ES5和ES6。 ES5和ES6是JavaScript使用的ECMAScript标准。 您可以将它们视为JavaScript的版本。 ES5的最终草案已于2009年完成，这就是您到目前为止一直在使用的。

ES6, also known as ES2015, is the new standard that brings new language constructs like constants, classes, and template literals to JavaScript. It’s important to note that ES6 bring new language features but still define them semantically in terms of ES5. For example, classes in ES6 are merely syntactical sugar over JavaScript prototypal inheritance.

ES6，也称为ES2015，是将JavaScript， 常量 ， 类和模板文字之 类的新语言结构引入到JavaScript中的新标准。 重要的是要注意，ES6带来了新的语言功能，但仍根据ES5在语义上进行了定义。 例如，ES6中的类仅仅是JavaScript 原型继承 上的语法糖 。

It’s essential to know both ES5 and ES6 as you’ll see applications today that use one or the other. A good introduction to ES6 is ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning and Dan Wahlin’s Getting Started with ES6 — The Next Version of JavaScript. After that, you can see a full list of changes from ES5 to ES6 at ES6 Features. If you want even more, check out this Github repository of ES6 features.

了解ES5和ES6至关重要，因为您将在今天看到使用一个或另一个的应用程序。 ES5，ES6，ES2016，ES是对ES6的一个很好的介绍。下一步：JavaScript版本控制和Dan Wahlin的ES6入门-JavaScript的下一版本 。 之后，您可以在ES6功能部件上看到从ES5到ES6的完整更改列表。 如果您想要更多，请查看此Github ES6功能库 。

多练 (More Practice)

If you’ve reached this point, congratulate yourself. You’ve already learned a lot about JavaScript. Let’s put some of what you’ve learned into practice.

如果您达到了这一点，请祝贺自己。 您已经学到了很多关于JavaScript的知识。 让我们将您学到的一些知识付诸实践。

实验3 (Experiment 3)

Experiment 3 will focus on teaching you how to apply skills like DOM manipulation and jQuery. For this experiment, we’re going to take a more structured approach. Experiment 3 will be to clone Flipboard’s home page by following along with Codecademy’s Flipboard’s home page and add interactivity with JavaScript tutorial.

实验3的重点是教您如何应用DOM操作和jQuery之类的技能。 对于本实验，我们将采用一种更加结构化的方法。 实验3将通过遵循Codecademy的Flipboard主页克隆Flipboard主页， 并添加与JavaScript教程的交互性 。

During the tutorial, focus on understanding how to make a site interactive, when to make it interactive, and how to apply jQuery.

在本教程中，着重于了解如何使网站具有交互性，何时使其具有交互性以及如何应用jQuery。

实验4 (Experiment 4)

Experiment 4 combines what you learned about HTML and CSS with your introductory course in JavaScript. For this experiment, you will create a clock of your own design and make it interactive with JavaScript. Before starting, I recommend reading Decoupling Your HTML, CSS, and JavaScript to learn basic CSS class naming conventions when JavaScript is thrown into the mix. I also prepared a list of pens on CodePen that you can you use as reference for this experiment. For more examples, search clock on CodePen.

实验4将您在HTML和CSS方面学到的知识与JavaScript入门课程相结合。 在本实验中，您将创建自己设计的时钟，并使它与JavaScript交互。 在开始之前，我建议您阅读《将HTML，CSS和JavaScript分离》，以了解将JavaScript放入组合中时基本CSS类命名约定。 我还准备了CodePen上的笔清单，您可以将其用作本实验的参考。 有关更多示例，请在CodePen上搜索时钟 。

• Flat Clock

  平面钟

• jQuery Wall Clock

  jQuery挂钟

• Fancy Clock

  花式时钟

• Retro Clock

  复古钟

• Simple JavaScript Clock

  简单JavaScript时钟

You can do this experiment in one of two ways. You can either start by designing and creating the layout in HTML and CSS and then adding interactivity with JavaScript. Or you can write the JavaScript logic first and then move onto the layout. Also, you can use jQuery, but also feel free to use plain JavaScript.

您可以通过以下两种方式之一进行此实验。 您可以先以HTML和CSS设计和创建布局，然后添加与JavaScript的交互性。 或者，您可以先编写JavaScript逻辑，然后再移至布局。 此外，您可以使用jQuery，但也可以随意使用纯JavaScript。

JavaScript框架 (JavaScript Frameworks)

With the basics of JavaScript under your belt, it’s time to learn about JavaScript frameworks. Frameworks are JavaScript libraries that help you structure and organize your code. JavaScript frameworks provide developers with repeatable solutions to complex front-end problems, like state management, routing, and performance optimization. They are commonly used to build web apps.

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

I won’t include a description of every JavaScript framework. However, here is a quick list of a few frameworks: Angular, React + Flux, Ember, Aurelia, Vue, and Meteor. You don’t have to learn every framework. Pick one and learn it well. Don’t chase after frameworks. Instead, understand the underlying programming philosophies and principles that the frameworks are built on.

我不会包括每个JavaScript框架的描述。 但是，这里是一些框架的快速列表： Angular ， React + Flux ， Ember ， Aurelia ， Vue和Meteor 。 您不必学习每个框架。 选一个并学得好。 不要追求框架。 相反，请了解框架所基于的基本编程哲学和原理。

建筑图案 (Architectural Patterns)

Before looking at frameworks, it’s important to understand a few architectural patterns that frameworks tend to use: model-view-controller, model-view-viewmodel, and model–view–presenter. These patterns are designed to create clear separation of concerns between application layers.

在研究框架之前，重要的是要了解框架倾向于使用的一些架构模式： 模型-视图-控制器 ， 模型-视图-视图 模型和模型-视图-展示者 。 这些模式旨在在应用程序层之间创建明确的关注点分离 。

Separation of concerns is a design principle that suggests splitting applications into different domain specific layers. For example, instead of having HTML hold application state, you can use a JavaScript object — usually called a model — to store state.

关注点分离是一项设计原则，建议将应用程序划分为不同的域特定层。 例如，您可以使用JavaScript对象(通常称为模型)来存储状态，而不是让HTML保留应用程序状态。

To learn more about these patterns, first read about MVC at Chrome Developers. After that, read Understanding MVC And MVP (For JavaScript And Backbone Developers). In that article, don’t worry about learning Backbone, just go through the parts with explanations of MVC and MVP.

要了解有关这些模式的更多信息，请先在Chrome开发者网站上了解MVC。 之后，请阅读了解MVC和MVP(适用于JavaScript和Backbone开发人员) 。 在那篇文章中，不必担心学习Backbone，只需仔细阅读有关MVC和MVP的各个部分。

Addy Osman also wrote about MVVM in Understanding MVVM — A Guide For JavaScript Developers. To learn about the origins of MVC and why it came about, read Martin Fowler’s essay on GUI Architectures. Finally, read the section, JavaScript MV* Patterns, in Learning JavaScript Design Patterns. Learning JavaScript Design Patterns is a fantastic free online book.

Addy Osman在“ 了解MVVM — JavaScript开发人员指南”中还写了有关MVVM的文章 。 要了解MVC的起源及其产生的原因，请阅读Martin Fowler的有关GUI Architectures的文章。 最后，阅读学习JavaScript设计模式中的JavaScript MV *模式部分。 学习JavaScript设计模式是一本非常棒的免费在线书。

设计模式 (Design Patterns)

JavaScript frameworks don’t reinvent the wheel. Most of them rely on design patterns. You can think of design patterns as general templates for solving common problems in software development.

JavaScript框架不会彻底改变。 他们大多数依靠设计模式 。 您可以将设计模式视为解决软件开发中常见问题的通用模板。

While understanding JavaScript design patterns isn’t a prerequisite for learning a framework, I suggest looking through the following list at some point.

虽然了解JavaScript设计模式不是学习框架的先决条件，但我建议您在某些时候仔细阅读以下列表。

• Decorator

  装饰器

• Factory

  厂

• Singleton

  辛格尔顿

• Revealing module

  显示模块

• Facade

  正面

• Observer

  观察者

Understanding and being able to implement some of these design patterns will not only make you a better engineer but will also help you understand what some frameworks are doing under the hood.

了解并能够实现其中的某些设计模式，不仅使您成为一名更好的工程师，而且还将帮助您了解某些框架在做什么。

AngularJS (AngularJS)

AngularJS is a JavaScript MVC and sometimes MVVM framework. It’s maintained by Google and took the JavaScript community by storm when it was first released in 2010.

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

Angular is a declarative framework. One of the most helpful reading that helped me understand how to transition from imperative to declarative JavaScript programming was How is AngularJS different from jQuery on StackOverflow.

Angular是一个声明性框架。 AngularJS与 StackOverflow上的jQuery有何不同 ，对我帮助如何理解从命令式到声明式JavaScript编程的最有用的读物​​之一。

If you want to learn more about Angular, check out the Angular documentation. They also have a tutorial called Angular Cat that lets you jump into coding right away. A more complete guide to learning Angular can be found in this Github repository by Tim Jacobi. Also, check out this definitive best practice styleguide written by John Papa.

如果您想了解有关Angular的更多信息，请查阅Angular 文档 。 他们还有一个名为Angular Cat的教程，可让您立即进入编码。 提姆·雅各比(Tim Jacobi)在这个Github存储库中可以找到更完整的Angular学习指南。 另外，请查看由John Papa撰写的权威的最佳实践样式指南 。

React+助焊剂 (React + Flux)

Angular solves a lot of problems that developers face when building complex front-end systems. Another popular tool is React, which is a library for building user interfaces. You can think of it as the V in MVC. Since React is only a library, it’s often seen with an architecture known as Flux.

Angular解决了开发人员在构建复杂的前端系统时面临的许多问题。 另一个流行的工具是React ，它是用于构建用户界面的库。 您可以将其视为MVC中的V。 由于React只是一个库，因此经常使用称为Flux的架构来查看。

Facebook designed React and Flux to address some of the shortcomings of MVC and its problems at scale. Take a look at their well-known presentation Hacker Way: Rethinking Web App Development at Facebook. It goes over Flux and it’s origins.

Facebook设计了React和Flux来解决MVC的一些缺点及其大规模问题。 看看他们著名的演讲Hacker Way：Rethinking Web App Development at Facebook 。 它超越了助焊剂，它的起源。

To get started with React and Flux, first learn React. A good primer is the React documentation. After that, check out React.js Introduction For People Who Know Just Enough jQuery To Get By to help you transition from the jQuery mindset.

要开始使用React和Flux，首先要学习React。 一个很好的入门书是React文档 。 之后，请了解React.js Introduction for认识足够的jQuery知识的人，以帮助您从jQuery思维方式过渡。

Once you have a basic understanding of React, start learning Flux. A good place to start is the official Flux documentation. After that check out Awesome React, which is a curated list of links that will help you advance further in your learning.

一旦您对React有了基本的了解，就可以开始学习Flux。 一个很好的起点是正式的Flux文档 。 之后，请查看Awesome React ，这是精选的链接列表，可帮助您进一步学习。

练习框架 (Practicing with Frameworks)

Now that you have some basic knowledge of JavaScript frameworks and architectural patterns, it’s time to put it to practice. During these two experiments, focus on applying the architectural concepts that you have learned. In particular, keep your code DRY, have a clear separation of concerns, and adhere to the single responsibility principle.

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

实验5 (Experiment 5)

Experiment 5 is to take apart and rebuild the Todo MVC app using framework agnostic JavaScript. In other words, plain old JavaScript without a framework. The purpose of this experiment is to show you how MVC works without mixing in framework specific syntax.

实验5是使用与框架无关JavaScript分解并重建Todo MVC应用程序。 换句话说，没有框架的普通旧JavaScript。 本实验的目的是向您展示MVC的工作原理，而无需混入特定于框架的语法。

To get started, check out the end result at TodoMVC. The first step is to create a new project locally and first establish the three components of MVC. Since this is an involved experiment, reference the full source code in this Github repository. If you can’t completely replicate the project or don’t have time, that’s fine. Download the repo code and play around with the different MVC components until you understand how they correlate to one another.

首先，请在TodoMVC处检查最终结果。 第一步是在本地创建一个新项目，然后首先建立MVC的三个组成部分。 由于这是一项涉及的实验，因此请参考此Github存储库中的完整源代码。 如果您不能完全复制项目或没有时间，那很好。 下载回购代码并试用不同的MVC组件，直到您了解它们之间的相互关系为止。

实验6 (Experiment 6)

Experiment 6 was a good exercise in applying MVC. Understanding MVC is an important step towards learning JavaScript frameworks. Experiment 6 is to follow a tutorial by Scotch.io to build an Etsy clone with Angular.

实验6是应用MVC的很好的练习。 了解MVC是学习JavaScript框架的重要一步。 实验6将遵循Scotch.io的教程，使用Angular构建Etsy克隆。

Build an Etsy Clone with Angular and Stamplay will teach you how to build a web app with Angular, interface with APIs, and how to structure large projects. After doing this tutorial, be able to answer the following questions.

使用Angular构建Etsy克隆，Stamplay将教您如何使用Angular构建Web应用程序，与API的接口以及如何构建大型项目。 完成本教程后，可以回答以下问题。

• What is a web app?什么是网络应用？
• How is MVC/MVVM applied with Angular?MVC / MVVM如何与Angular一起应用？
• What is an API and what does it do?什么是API，API的作用是什么？
• How do you organize and structure large code bases?您如何组织和构建大型代码库？
• What are the advantages of breaking your UI into directive components?将UI分解为指令组件有什么好处？

If you want to try your hand at building more Angular web apps, try Build a Real-Time Status Update App with AngularJS & Firebase.

如果您想尝试构建更多的Angular Web应用程序，请尝试使用AngularJS＆Firebase构建实时状态更新应用程序 。

实验7 (Experiment 7)

Now that you’ve applied MVC, it’s time to try Flux. Experiment 7 is to build a todo list using React and Flux architecture. You can find the full tutorial on Facebook’s Flux documentation site. It will teach you step by step how to use React to build interfaces and how Flux is applied to building web apps.

既然您已经应用了MVC，现在该尝试Flux了 。 实验7是使用React和Flux架构构建待办事项清单。 您可以在Facebook的Flux文档站点上找到完整的教程。 它将逐步教您如何使用React构建界面以及如何将Flux应用到构建Web应用程序。

Once you’ve completed that tutorial, you can move onto more involved tutorials like How to Build a Todo App Using React, Redux, and Immutable.js and Build a Microblogging App With Flux and React.

完成该教程后，您可以继续相关教程，例如如何使用React，Redux和Immutable.js 构建 Todo应用程序以及使用Flux和React构建微博客应用程序 。

保持最新 (Stay current)

Just like the rest of front-end, the JavaScript landscape moves fast. It’s important to stay ahead of the curve.

就像其他前端一样，JavaScript的发展也很快。 保持领先地位很重要。

Below is a list of websites, blogs, and forums that are both enjoyable to read and informative.

以下是既易于阅读又内容丰富的网站，博客和论坛的列表。

• Smashing Magazine

  粉碎杂志

• JavaScript Weekly

  每周JavaScript

• Ng Weekly

  吴周刊

• Reddit JavaScript

  Reddit JavaScript

• JavaScript Jabber

  JavaScript Jabber

通过例子学习 (Learn by example)

As always, the best way to learn is by example.

与往常一样，最好的学习方法是通过榜样。

风格指南 (Styleguides)

JavaScript styleguides are sets of coding conventions designed to help keep your code readable and maintainable.

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

• AirBnB JavaScript Styleguide

  AirBnB JavaScript样式指南

• Principles of Writing Consistent, Idiomatic JavaScript

  一致的惯用JavaScript编写原理

• Node Styleguide

  节点样式指南

• MDN Coding Style

  MDN编码样式

程式库 (Codebases)

I can’t emphasize how helpful it is to read good code. Learn how to search Github for relevant repositories whenever picking up something new.

我不能强调阅读好的代码有多大帮助。 了解如何在每次使用新东西时在Github上搜索相关的存储库。

• Lodash

  Lodash

• Underscore

  下划线

• Babel

  巴别塔

• Ghost

  鬼

• NodeBB

  节点BB

• KeystoneJS

  KeystoneJS

结语 (Wrap up)

By the end of this guide, you should have a solid grasp of JavaScript fundamentals and how to apply them to the web. Remember, this guide gives you a general road map. If you want to become a front-end hero, it’s important that you spend time working on projects to apply these concepts. The more projects you do and the more passionate you are about them, the more you will learn.

到本指南结束时，您应该对JavaScript基础以及如何将其应用到Web有了扎实的了解。 请记住，本指南为您提供了总体路线图。 如果您想成为前端英雄，那么一定要花时间在项目上以应用这些概念。 您从事的项目越多，对它们的热情就越高，您就会学到更多。

This article is the second part to the two part series. What’s missing from this guide is an introduction to Node, which is a platform that allows JavaScript to run on servers. In the future, I may write a part three that goes over server-side development with Node and things like noSQL databases.

本文是两部分系列的第二部分。 本指南缺少对Node的介绍， Node是一个允许JavaScript在服务器上运行的平台。 将来，我可能会写第三部分，内容涉及使用Node和noSQL数据库之类的服务器端开发。

If you want me to elaborate on anything or have any questions, feel free to leave me a note or Tweet out to me.

如果您想让我详细说明或有任何疑问，请随时给我留言或发推文给我。

P.S. If you liked this article, it would mean a lot if you hit the recommend button or share with friends.

附言：如果您喜欢这篇文章，那么如果您按“推荐”按钮或与朋友分享，那将有很多意义。

If you want more, you can follow me on Twitter where I post non-sensical ramblings about design, front-end development, bots, and machine learning.

如果您想要更多，可以在Twitter上关注我，我在这里发布有关设计，前端开发，机器人和机器学习的无意义的杂谈。

翻译自: https://www.freecodecamp.org/news/from-zero-to-front-end-hero-part-2-adfa4824da9b/

从零学web前端