前端开发，从草根到英雄（第二部分）

2016-11-18 本文已影响4793人程序员在深圳

By @jonathanzwhite

版权申明：
此文章首发于公众号程序员在深圳，搜索 studycode 即可关注
本文无需授权即可转载，转载时请务必注明作者

这篇文章是"前端开发，从草根到英雄系列"的第二部分，在第一部分，你学到了如何使用HTML和CSS创建布局的最佳实践。在第二部分，我们会把JavaScript作为独立的语言来学习，我们将学习如何添加交互式的界面，JavaScript设计以及设计模式，最后我们会学习如何创建web应用。

和HTML、CSS一致，网上有大量的JavaScript指南，对于新手来说，很难分辨这些指南分别的用途，也不知道以怎样的顺序去学习这些指南。这篇文章的目的是给你提供一个线路图，作为你成为一个前端工程师的导航。

如果你还没有阅读第一篇，在读这篇之前，可以点击下面的链接阅读

JavaScript基础

JavaScript是一个跨平台的程序语言，它几乎可以做所有事情。在你了解了开发者如何使用JavaScript的基础之后，我们再详细的探讨这门语言。

语言

在学习JavaScript是如何应用于web之前，首先了解这门语言本身。我们来读一下Mozilla开发者网络的Language basics crash course，这个指南会描述基本的语言结构，包括变量，条件和函数。

在此之后，再读一读MDN的JavaScript指南的以下几个部分:

不要过于担心记不住特定的语法，你随时可以回过头来查阅。相反，你要专注于像变量实例化、循环和函数等概念上。如果一时消化不了是正常的，可以适当的略过，学完后面内容再时不时回顾一下前面的内容。因为当你练习这些概念时，你才会对这些更加深刻。

为了打破单调的纯文字内容的学习，可以看一下Codecademy提供的JavaScript课程，它很容易上手，并且非常有趣。同样的，如果你有时间，对于每一个我上面列出的概念，读一下Eloquent JavaScript相应的章节，相信可以加深你的理解。Eloquent JavaScript是一个非常棒的在线书籍，几乎所有的有追求的JavaScript前端工程师都会阅读它。

交互

One use for JavaScript is for animating your layouts

JavaScript作为一门语言，你已经对它有所了解，下一步要了解它如何应用于web，要了解JavaScript是如何与网站交互，你需要知道文档对象模型（Document Object Model）

DOM是HTML文档中具体的结构，它是对应于HTML节点的、由JavaScript对象构成的树型结构，更进一步，你可以读一下CSSTricks发表的什么是DOM这篇文章。它对DOM提供了简单直接的描述

Inspecting the dom

JavaScript可以修改DOM元素，这里有一个选择HTML元素并修改它的内容的例子：

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

不要担心，这仅仅是一个简单的例子，你可以通过JavaScript "DOM操作"做更多的事情。想学习更多关于JavaScript如何与DOM交互的内容，你要通过以下MDN部分的指导，The Document Object Model

再次强调，把注意力集中到概念而不是语法上。试着回答以下问题：

什么是DOM？
如何查询元素？
如何添加事件监听者？
如何合适的改变DOM节点属性？

要获得一个通用的JavaScript DOM操作列表，可以看一下PlainJS提供的JavaScript函数和帮助，这个网站提诸如如何设置HTML元素样式和连接键盘事件监听者等例子，如果你觉得还不够想更深入，你都可以阅读Eloquent JavaScript中的DOM部分。

检查

要调试JavaScript，我们使用内嵌在浏览器中的开发工具，几乎所有的浏览器中都会有检查面板，通过它你可以查看页面的源码，你可以查看JavaScript的执行，在终端上打印调试状态，还可以查看网络请求和回复。

这里是Chrome开发工具指南，如果你使用的是Firefox，你可以查看这个指南

Chrome开发者工具

基本练习

目前为止，我们还有很多JavaScript知识要学习，上一章我们已然学了不少新知识，现在我们休息一下，然后做几个小实验，他们会帮助巩固你刚学的一些概念。

实验1

进入实验1，我们打开AirBnb，同时打开浏览器页面检查，点击终端标签，在终端里你可以执行JavaScript语句。我们将要做的事是从操作一些页面中的元素而获得一些乐趣。试试看，你是否可以进行下面将要描述的所有DOM的操作。

Airbnb.com

我选择AirBnb的页面是因为它们的CSS类名非常直接，不会被一些编译器处理的模糊不清，所以你可以选择性的在任何页面做这些操作：

选择一个具有唯一类名的header标签，改变其中的文字
选择任何页面上的元素，然后删除它
选择任何一个元素，改变它的某一个CSS属性
选择一个指定的段落标签，将它下移250个像素
选择任何组件，例如一个面板，调整它的可视性
定义一个函数名doSomething: 可以弹出"Hello world"警告，然后想办法执行它
选择一个特定的段落标签，让它监听一个click事件，一旦该事件触发，则运行doSomething

如果你卡住了，可以在JavaScript Functions and Helpers中查找相关知识，这些任务基本上都是基于这个指南的，下面是第一个问题的的例子：

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

这个实验的主要目的是练习你所学的JavaScript和DOM之间的操作，并观察他们的行为。

实验2

JavaScript允许开发者创建交互式面板

使用CodePen写几个包含逻辑的JavaScript函数，以及操作DOM元素。这个实验的核心内容是将你从草根到英雄第一部分学到的知识和JavaScript结合，下面的几个例子可能会给你带来灵感：

更多JavaScript

目前你已经了解了一些JavaScript知识，并且为此做了一些练习，让我们继续学习一些高级的概念吧。下面的概念不一定互相有联系，我将它们列在这里是因为它们可以帮助你理解如何构建更复杂的前端系统。你将在后续的实验和框架章节理解如何使用这些概念。

语言

一旦你用JavaScript工作，你将遇到很多高级概念，我将这些概念列出来，当你有时间时可以进行阅读。同样的，Eloquent JavaScript覆盖了大部分概念，也可以用来补充你的知识。

Imperative vs. Declarative

JavaScript和DOM如何交互，有两种方法：imperative和declarative，一方面，declarative程序专注于what，另一方面，imperative程序专注于how

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

上面是一个imperative程序的列子，我们手动查询出一个元素，并且将UI状态存储在里面，换句话说，该程序核心在于如何(how)完成某件事情。这段程序的最大问题是它不够稳定：如果某个人修改了这段代码中的类名，例如将hero修改为villain，该监听事件将不会被触发，因为DOM中不在有hero类了。

Declarative程序解决了这个问题，你可以把选择元素的操作留给框架或库去完成。这种做法让你专注于做什么(what)而不是如何这样做(how)。想要了解更多，读一下JavaScript的状态——从Imperative到Declarative和3D Web 开发 #1: Declarative vs. Imperative

这篇指南首先告诉你imperative方法，然后才是Angular和React库的declarative方法，我建议按照这样的顺序学习，可以让你更清楚的了解到declarative解决了什么问题。

Ajax

通过以上的文章和指南，你应该注意到了Ajax，Ajax是一项可以使用JavaScript和服务器交互的技术。

Ajax is what makes content dynamic

例如，当你在网页上提交一个表单，这个动作会将你的输入作为一个HTTP请求发送给服务器。当你在Twitter上发送一条微博，你的Twitter客户端发送了一条HTTP请求给Twitter的API服务器，并且使用服务器返回的数据更新页面。

你可以看下什么是Ajax获得更多Ajax的知识。如果你仍然不能完全理解AJAX的概念，看一下Explain it like i'm 5, what is Ajax，如果觉得还不够多，你可以读一读Eloquent JavaScript的HTTP章节。

今天为止，新的浏览器请求标准是Fetch，想要了解更多的Fetch的内容，可以读一下Dan Walsh的这篇文章，里面介绍了Fetch是如何工作的，以及如何使用它。你还可以在这篇文章中补充Fetch polyfill知识。

jQuery

目前为止，你已经使用JavaScript对DOM做了很多操作了。事实是，已经有很多DOM操作的库，他们提供API来简化你的代码。

最流行的DOM操作库是jQuery，记住，jQuery是一个imperative库，它是在前端系统还没有今天这么复杂的时候开发的。今天，为了管理复杂的UI，我们会使用declarative框架和库，例如Angular和React。然而，我仍然建议你学习jQuery，因为作为一名前端工程师，你一定会在工作中遇到它的。

jQuery是JavaScript操作DOM的抽象

学习jQuery基础，可以看下jQuery学习中心，它会一步步的告诉你animations和事件处理这些重要的概念。如果你还想学习更多入门知识，你可以看下Codecademy的jQuery课程

记住，jQuery不是唯一的imperative DOM操作解决方案，PlainJS和You Might Not Need jQuery是两个很好的资源，他们会告诉你和jQuery一样的频繁使用的JavaScript函数。

ES5 vs. ES6

另一个重要的概念是ECMAScript以及它和Javascript的关系。目前你将会碰到两个主要的标准：ES5和ES6。ES5和ES6是JavaScript使用的ECMAScript标准，你可以把他们作为JavaScript的版本来理解，最终的ES5草案拟于2009年，也是我们目前一直在使用的。

ES6，也叫ES2015，它是最新的标准，带来了一些新的诸如常量，类，和模板这样的语言特性。ES6带来了新的语言功能，但仍然在ES5的基础上定义语义。例如，ES6中的类仅仅是JavaScript原型继承的语法修饰。

有必要知道你今天看到的应用，要么使用ES5，要么使用ES6。ES5，ES6，ES2016，ES.Next: JavaScript版本到底怎么了和Dan Wahlins的ES6入门——下一代JavaScript是很好的ES6介绍。接着你可以在ES6功能列表查看ES5到ES6的变化。如果你还想了解更多，去Github代码库获得更多ES6功能信息。

JavaScript框架

当你掌握了JavaScript基础之后，后续你需要了解一下JavaScript框架，框架是可以帮助你结构化和组织代码的JavaScript库，JavaScript框架是可复用的，并能提供解决复杂前端问题的方案，就像状态机，路由机制以及性能优化。他们被普遍用来创建web应用

我没有挨个的描述每个JavaScript框架，然而，这里有一些框架的链接：Angular，React + Flux，Ember，Aurelia，Vue，和Meteor。你不需要学习所有的框架，选一个学习即可，不要追赶框架的潮流，取而代之的是，你需要理解框架程序底下的原则和哲学。

架构模型

在学习框架之前，了解一些框架经常用到的架构模型非常重要：model-view-controller，model-view-viewmodel，和model-view-presenter。这些模型被设计用来在应用程序的不同层次创建清晰而分离的特性.

分离的特性是一种建议将应用程序划分为不同的层次的设计原则。例如，与其让HTML保留应用状态，还不如用一个JavaScript对象——通常被称为Model——来存储状态。

要了解更多模型，首先阅读Chrome Developers中的MVC，然后，读一下理解MVC和MVP(献给JavaScript和主干开发者)，在这篇文章中，不用学习'主干'，仅仅了解MVC和MVP即可

对于MVVM，Addy Osman也写了篇文章：理解MVVM——给JavaScript开发者的指南， Martin Fowler的散文GUI 架构你也应该读读，它既讲了原生的MVC，又描述了MVVM是怎么来的。最终，读下这篇JavaScript MV* 模型，还有一本完美的免费在线书籍Learning JavaScript Design Patterns你也可以看下。

设计模式

JavaScript 框架没有重复发明轮子，很多框架都依赖于设计模式，在软件开发过程中，你可以把设计模式想象成解决通用问题的模板。

然而学习设计模式不是理解JavaScript的必要条件，我建议你了解以下几个设计模式

理解并实现一些设计模式不仅仅让你成为一个更好的工程师，还帮助你理解一些框架的具体实现。

AngularJS

AngularJS是一个JavaScript MVC框架，有时也是一个MVVM框架，它由google维护，并在2010年初次发布时给JavaScript社区带来了一场风暴

AngularJs - what HTML would have been

Angular是一个declarative框架，对我帮助最大、帮我理解JavaScript编程是如何从imperative转换到declarativ思想的文章是来自StackOverflow的这篇文章：AngularJS和jQuery有哪些不同

想更多的了解Angular，可以查看Angular文档，里面还有一个Angular Cat项目，可以帮你马上进入编码状态。更完整的学习AngularJs指南可以在Tim Jacobi的Github仓库中查找。最后，你还可以看一下John Papa写的这篇权威的best practice styleguide

React + Flux

Angular很好解决了程序员在构建复杂系统时所面对的问题，另一个流行的工具是React，它是一个创建用户界面的库，你可以把它想象成MVC中的V。由于React只是一个库，所以它会经常伴随着一个框架Flux

一个创建界面的JS库

Facebook设计React和Flux的目的是为了解决MVC本身的不足和其扩展问题。先看一下他们总所周知的介绍：Hacker Way: Rethinking Web App Development at Facebook，它重温了Flux的历史。

搭梯子才能看的视频

React和Flux的学习，先从React开始，React文档是一个很好的入门教材。然后，这篇React.js Introduction For People Who Know Just Enough jQuery To Get By会帮助你扭转jQuery思维模式。

一旦你拥有了React基础，便可可以开始学习Flux，同样的，官方文档是一个很好的开端，继而，你可以看下极好的React，这篇文章可以带领你进入更深入的学习。

练习使用框架

你现在拥有JavaScript框架和架构的基础知识，于是又到了练习的时候了。在后续两个实验中，专注于应用你学过的框架的概念。特别需要注意的是，你要让你的代码保持DRY原则，头脑中能清晰的理解不同的概念，并能够让你的模块仅完成单一的功能

实验5

实验5的课题是将一个用JavaScript实现的TodoMVC的app掰开，然后再用将其重写。换句话说，这是一个没有任何框架的实验，但用到了MVC的原理，目的就是让你更深入的理解MVC是如何工作的。

首先你看一下TodoMVC长什么样子，然后你要做的是先创建一个新的本地工程，建立MVC的三个组件。你还需要拉取Github仓库上的代码，因为这是一个比较复杂的实验，如果你仍然无法完成克隆这个项目，抑或没有时间，没有关系，直接使用你下载的Github代码，不断调试MVC的不同组件，直到你理解了组件之间是如何运作的。

实验6

实验6是一个应用MVC的很好练习，理解MVC是进入JavaScript框架的必经之路，实验6会让你跟着Scotch.io制作的指南，使用Angular建立一个Etsy页面的克隆版。

Build an Etsy Clone with Angular and Stamplay教你使用Angular创建一个web应用、API接口，以及如何组织大型的项目。完成了这个指南，试着回答以下几个问题：

什么是web应用？
Angulars是如何应用MVC/MVVM模型的？
什么是API？它是用来做什么的？
你如何组织大型的代码的？
把UI打散到不同的组件的好处是什么？

如果你想亲手创建更多的Angular web应用，试一下Build a Real-Time Status Update App with AngularJS & Firebase。

实验7

React和Flux是强大的组合

现在你已经适应了MVC，轮到Flux上场了，实验7正是让你使用React和Flux框架创建一个todo列表。全过程在这里：Facebook的Flux文档，它会一步步教你如何使用React创建界面，以及Flux如何建立web应用。

一旦你全部完成，你可以进入更复杂的教程：如何使用React，Redux和Immutable.js创建一个Todo应用，并使用Flux和React建立一个微博应用

保持更新

和其他前端开发一样，JavaScript的技术发展的很快，时刻保持更新这件事变得非常重要。

给出以下列表的网站，博客以及论坛，它们既有意思，又很有价值：

从例子中学习

最佳的学习方式是从例子中学习

风格指南

JavaScript风格指南是一组代码规范，它会帮助你设计具有可读性和可维护性高的代码。

编码基础

我已经无法形容读好代码给我带来的帮助到底有多大，一旦当你想读新的好代码时，可以上Github上找

圆满

文章的结束，你应该稳固的掌握了JavaScript的基础，并且知道如何应用于Web开发。记住，这篇文章只是你的一个线路图，如果你想成为一个前端英雄，你还需要在项目中花更多的时间来适应这些概念，项目做得越多，你对他们也会越热情，你学到的也越多。

这篇文章是两部系列的第二部分，唯一遗漏的地方是Node，他是一个可以允许JavaScript运行在服务器上的框架，将来，也许我会在写一篇文章介绍Node相关的服务端开发，以及NoSql数据库

欢迎来Tweet上找我

作者：@Jonathan Z. White
译者：jieniu
原文：From Zero to Front-end Hero (Part 2)

欢迎您扫一扫上面的微信公众号，订阅我的博客！