[译] 前端攻略-从路人甲到英雄无敌二：JavaScript 与不断演化的框架

本文翻译自FreeCodeCamp的 from-zero-to-front-end-hero-part 。

我做到我已知的最好的，让最佳实践留给未来的我吧

以下是正文部分。

JavaScript Basics

作为目前最流行的跨平台语言之一，JavaScript几乎出现在了所有的地方，但是千里之行始于足下，我们还是要先来理解JavaScript的一些基础知识。

Language

在学习怎么将JavaScript应用到Web开发之前，我们还是要看下JavaScript的基本语法。推荐阅读Mozilla Developer Network的 Language basics crash course 。本教程会导引学习譬如基本的变量、流程控制与函数等等语言基础部分。

读完了这个，你就可以读MDN的 JavaScript guide 中的剩余部分：

• 语法与类型

• 流程控制与异常处理

• 循环与迭代

• 函数

同样的，不要死记硬背，你可以在你记不住的时候多看看，当然，最好的是能形成你自己的阅读笔记或者知识体系框架，譬如这个。你应当专注于理解变量初始化、循环以及函数等等关键的知识点，譬如for-in、forEach、for-of的区别，this的N种绑定方法等。如果你实在觉得这货太单调了，那也能直接跳过，以后发现啥东西不理解的时候再滚回来瞅一眼。在实践中学习可能能让你理解地更好。

读书读累了，那可以看看视频换个脑子，这个Codecademy提供的 JavaScript系列教程 不错，可以随手看也很有意思。另一个，如果你还有时间，可以看看 Eloquent JavaScript 中的相关章节来加深你的记忆。 Eloquent JavaScript 是个非常优秀的在线的免费的JavaScript学习工具书。

Interactivity

到这一步你应该已经对JavaScript这门语言本身的基础知识有了了解，那么下一步就是学会如何应用到Web项目开发中。你首先需要来瞅几眼 文档对象模型 (DOM) 来理解JavaScript是如何完成与网页的交互的。文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。如果要做进一步了解的话推荐阅读CSSTricks出品的 What is the DOM ，它也提供了简单而直接的对于DOM的介绍。

这里提供了一个简单的例子，通过JavaScript是如何改变某个DOM元素里的内容来展示基本的JavaScript与DOM树的交互，首先需要选择到对应DOM节点

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

然后使用该DOM节点的属性来改变其内容

container.innerHTML = 'New Content!';

这只是一个简单的例子，你还可以用JavaScript DOM API干更多的事情，你可以阅读以下的MDN的教程来进行了解, The Document Object Model .

• Events

• 使用DOM进行Web与XML开发示例

• 怎么创建一个DOM树

• DOM介绍

• 利用选择器来定位DOM节点

老生常谈了，不能舍本逐末，还是要专注于理解概念而不是简单地表达式使用，要在心中默问自己几个问题：

• DOM是什么鬼?

• 怎么查询元素?

• 怎么进行事件监听?

• 怎么改变DOM节点的属性?

对于常见的JavaScript与DOM之间的交互, 可以参考PlainJS出品的 JavaScript Functions and Helpers 。这个站点会给你提供很多的例子，譬如 如何操作DOM元素样式 或者 怎么添加键盘事件响应 等等。如果你希望再深入一点，同样推荐 Eloquent JavaScript 中的DOM介绍的章节。

Inspector

在浏览器中，我们可以用开发者工具来调试客户端运行的JavaScript代码，譬如Firefox的Firebug和Chrome的开发者工具，可以帮你审视网页源代码，追踪JavaScript的执行过程和结果，打印出调试语句，还能瞅瞅譬如网络请求、Cookie等等资源。这个 tutorial 是关于如何使用Chrome的开发者工具，如果你是火狐的话，瞅瞅这个 tutorial 。

Practicing the basics

上面聊完了基础的语法和交互操作，但是对于不知道有多少个坑的JS而言不过沧海一粟，不过我把一些新的东西放到了最后一节介绍，这边先放松放松，做点小实验玩玩。

Experiment 1

实验1里让我们把目光投向 AirBnB , 打开你浏览器的 page inspector , 然后点击 console tab 。这样你就可以在页面上执行一些JavaScript脚本了，你可以尝试着控制一些界面元素，改个字体样式啥的。

我选用airbnb的网站作为介绍是因为它的CSS类命名比较直接，并且没有被编译器混淆过，当然，你也可以看看百度啊之类的调试。

• 选择一个拥有唯一类名的header标签，改变其文字内容

• 移除页面上的随机一个元素

• 改变任意元素的CSS属性

• 将一块区域的高度减小250px

• 改变一个组件，譬如panel的可见性

• 定义一个叫做 doSomething 的函数，让它弹出“Hello world”，并且执行它

• 为某个文本块添加一个点击响应事件

如果你在那边卡住了，别忘了去看看 JavaScript Functions and Helpers 指南，我在这边也给一个小小的例子：

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

这个实验的主要目的就是回顾下你学到的JavaScript的基本语法以及一些DOM操作的知识。

Experiment 2

第二个实验使用 CodePen-JonathanZWhite 编写一个较大较复杂的JavaScript交互项目，会用到一些 programmatic logic 。这个实验的关注点会综合你在 前端攻略-从路人甲到英雄无敌 中学到的关于HTML与CSS的知识，这边有几个参考项目：

• Periodic Table

• Mood Color Generator

• Calculator

• JavaScript Quiz

• Playable Canvas Asteroids

More JavaScript

看过了基础知识，动手做了几个小实验，下面我们会进入一些更有难度的概念的学习。这边的列举的概念可能之间并么有什么必然的练习，不过我还是把它们放在了一起是因为它们能有助于你通往专家的道路，并且也能有助于你理解下面关于框架部分的讲解。

Language

实际上JavaScript并不是一门浅薄的语言，虽然它只用了短短一周时间就创建出来了，它包含了很多高级的概念与用法（并且因为历史版本问题存在着大量的Polyfill）。这里是列举出了常见的概念，同样地 Eloquent JavaScript 也攘括了这些点：

• 原型与继承

• 作用域

• 闭包

• 回环

• 事件冒泡

• Apply, call, and bind

• Callbacks and promises

• 变量与提升

• Currying

Imperative vs. Declarative（命令式VS声明式）

就如同常见的两种编程方式，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中，换言之，就是关注于如何达成某个目标。命令式编程的优势在于很直观，不过缺点也很明显，整个程序的健壮性很差，也不易于扩展。譬如如果某人把那个元素的类名从 hero 变成了 villain ，那么事件监听器就永远不会被调用了。

声明式编程可以较好地解决这个问题，刚才提到的比较麻烦的元素选择这个动作可以交托给框架或者库区处理，这样就能让开发者专注于发生了啥，这里推荐一波 The State Of JavaScript — A Shift From Imperative To Declarative 与 Three D’s of Web Development #1: Declarative vs. Imperative 。本指南并没有一上来先给你看Angular或者React的HelloWord，而是告诉你命令式的做法和声明式的区别在哪，这样你就能更好地理解为啥我们会需要框架。

Ajax

虽然已经有了很多关于Ajax的教程指南，还是建议你阅读下官方的 Ajax 介绍。Ajax即是一个允许Web页面通过JavaScript与服务端完成交互的技术，Ajax也是前后端分离的一个基石。

譬如，如果你要去提交一个表单，那么就要先收集下输入的内容然后通过HTTP请求发送到服务端。你在发Twitter的时候，就是Twitter客户端发送HTTP请求到Twitter的服务器，然后根据服务端响应来修正页面状态。推荐阅读下 What is Ajax 来深入理解Ajax，如果还是觉得有些疑惑，那可以看看 Explain it like i’m 5, what is Ajax ，要是还不够，那就回到 eloquentjavascript chapter 关于HTTP的章节吧。

早期，笔者是习惯用jQuery的$.ajax来进行Ajax操作，不过现在已经慢慢统一到了标准的 Fetch ，你可以看看由 Dan Walsh 写的文章来多了解下Fetch，它涵盖了Fetch的工作原理与基本的用法。因为Fetch在部分低版本浏览器上还不能使用，因此我们会选择一些Fetch polyfill ，文档是 这里 。

jQuery

• 一些jQuery使用技巧

• 也需要你压根用不到jQuery

到这里，咱们一直是用单纯的JavaScript来进行节点操作，怪麻烦的说，而且在不同的浏览器里还有写不同的Polyfill。实际上，已经有了大量的DOM节点的操作库来帮我们简化常用代码，其中最著名的就是 jQuery ，一个当年前端程序猿的标配。要记住，jQuery是一个典型的命令式的操作库，它编写与前端井喷之前，在那个年代有着无可比拟的先进行。虽然今天，我们应该用像Angular、React这样的声明式编程的框架来进行复杂UI界面的编写，但是仍然是推荐学习下jQuery，毕竟还有大量的项目仍然是基于jQuery的。

jQuery官方提供了一个 Learning Center ，是不错的基础学习的教程，它会一步一步带你学习重要的概念，譬如 animations 与 event handling 。如果你想要更多的学习资源，那么可以参考Codecademy的 jQuery course 。

不过一定要记住，jQuery并不是唯一的进行DOM操作的库， PlainJS 和 You Might Not Need jQuery 也提供了基于原本的JavaScript代码怎么实现常见的jQuery中的操作。

ES5 vs. ES6

在现代的前端开发中，另一个绕不过去的概念就是 ECMAScript 。现在主要有两个常用的JavaScript版本，分布是ES5和ES6，它们呢都是JavaScript使用的ECMAScript标准。你可以把它们看做不同版本的JavaScript，ES5是在2009年定稿，然后使用至今。而ES6, 也叫作ES2015，是一个新的标准，它提供了很多譬如 常量 , 类 , 以及 模板字符串 等等特性。ES6是兼容ES5的，不像Python3和Python2，并且很多ES6带来的语法特性都是在ES5的封装的基础上，譬如ES6中的类是基于JavaScript prototypal inheritance 的 syntactical sugar 。

这里推荐一个不错的ES6的教程 ES5, ES6, ES2016, ES.Next: What’s going on with JavaScript versioning 以及Dan Wahlin的 Getting Started with ES6 — The Next Version of JavaScript .。看完了这些，你也可以看看ES5和ES6特性的详细列表： ES6 Features 以及 Github repository 。

More Practice

恭喜你，成功到达存档点，你已经学了不少关于JavaScript的知识了，下面让我们来温习一波。

Experiment 3

Experiment 3 着重于如何利用jQuery进行常见的DOM节点操作，本实验中，我们会以一种更加结构化的方式。我是选择了Flipboard的主页作为范本，你可以参考下Codecademy的 Flipboard’s home page and add interactivity with JavaScript 教程。

Experiment 4

按照惯例，实验4呢又把你学过的HTML和CSS的知识跟JavaScript的知识混杂到了一起进行锻炼，这是一个关于钟的实验，各种各样的钟。在动手之前推荐你看看 Decoupling Your HTML, CSS, and JavaScript 来了解下JavaScript混入的情况下基本的CSS类名命名规范。同样的，我也准备了一系列的CodePen来当做你的教材：

• Flat Clock

• jQuery Wall Clock

• Fancy Clock

• Retro Clock

• Simple JavaScript Clock

如果你要更多的例子，请在CodePen上搜索 clock 。你可以选择先写基本的HTML与CSS样式然后再加上JavaScript逻辑，也可以先写JavaScript逻辑代码然后再放入到样式中。你可以选择用jQuery，不过尽量还是用纯粹的JavaScript代码吧。

JavaScript Frameworks

小怪清完了，下面开始刷BOSS了，拿起你的剑吧勇士，美丽的公主就在前方。我们在这一章节会开始介绍常用的JavaScript框架。我们不提倡重复造轮子，但是一定要理解轮子并且能给它上上油或者换换螺丝钉，这些JavaScript框架可以帮你更好地组织你的代码。它们为前端开发者提供了可复用的解决方案，就好像所谓的设计模式一样，它可以用来解决状态管理、路由以及性能优化等等，正是因为有了这些框架，我们才能更好地构建 web apps 。

贪多嚼不烂，我不打算介绍所有的JavaScript框架，不过还是列个目录下来，这些框架包括但不限于 Angular , React + Flux , Ember , Aurelia , Vue , 以及 Meteor 。你并不需要学习所有的框架，选择一个然后深入，最合适自己的才是最好的。

Architectural Patterns

在学习框架之前，首先要了解下常用的架构模式：

• model-view-controller

• model-view-viewmodel

• model–view–presenter

这些模式可以用来创建清晰的多层应用 关注分离 。关注分离是一个设计原则，即是讲一个巨石型应用切分到不同的领域专注层，譬如前面我们都是在HTML中保留应用状态，而你可以使用一个JavaScript对象，或者说是Model层来存储应用状态。如果你想要了解地更多，可以先看下 Chrome Developers 里对于MVC的讲解，然后阅读 Understanding MVC And MVP (For JavaScript And Backbone Developers) 。阅读这篇文章的时候不要在意有没有学过Backbone，只要关注MVC与MVP比较的部分。 Addy Osman也写了另一篇关于MVVM的文章 Understanding MVVM — A Guide For JavaScript Developers 。如果你想了解MVC的源起，可以参考Martin Fowler的 GUI Architectures 。最后，阅读这篇 JavaScript MV* Patterns ， Learning JavaScript Design Patterns 也是个很不错的在线免费电子书。

Design Patterns

JavaScript的框架也并没有重复造轮子，很多还是基于 已有的设计模式 ，你可以认为设计模式是在软件开发中用于解决通用问题的可复用的方法。尽管理解设计模式并不是学习一个框架的前提，不过我还是建议你可以先了解一些：

• Decorator

• Factory

• Singleton

• Revealing module

• Facade

• Observer

理解这些设计模式不仅会让你变成一个更好地设计师，也能有助于你更好地理解这些框架。

AngularJS

AngularJS 是一个 JavaScript MVC 框架，不过有时候也是一个 MVVM 框架。它由在2010年由Google进行维护并且迅速在社区刮起了一波浪潮。

Angular是一个典型的声明式框架，这里推荐一个阅读，可以帮你理解命令式编程到声明式编程的转变： How is AngularJS different from jQuery 。如果你希望了解更多关于Angular的知识，可以参考Angular documentation 。还有一个叫做 Angular Cat 的渐进教程。 angular2-education 是一个由 Tim Jacobi.整理的完整的关于angular2的教程，另外，还有John Papa编写的 最佳实践指南 。

React + Flux

Angular帮助开发者解决了很多前端系统构建中遇到的问题，不过Angular 1存在着极大的性能问题。今年才出的Angular 2也是组件化思维，不过太过庞大。另一个常用的小而美的工具就是 React ，专注于用户交互的构建。React可以认为是MVC层中的View层，React只是一个Library，通常与 Flux 或者Redux一起结合起来使用。

Facebook最早设计React与Flux是为了解决MVC中的一些缺陷与扩展问题，可以参考著名的 Hacker Way: Rethinking Web App Development at Facebook 演讲，这里介绍了Flux的起源。首先，我们来学习React，推荐是直接看 React 官方文档 ，然后看看 React.js Introduction For People Who Know Just Enough jQuery To Get By 来帮你从jQuery思维转移到React思维。

在你对React有了基本的了解之后，下面就可以开始学习Flux了，同样的首先推荐 官方Flux文档 。然后你可以看看 Awesome React , 这里包含了很多你可以慢慢咀嚼的内容。

Practicing with Frameworks

又到了实践环节了，现在你已经对于JavaScript框架与架构模式有了基本的了解，是时候带一波节奏了。在这两个实验中，注意体会架构设计的理念，首先要保证 DRY , 然后有一个 清晰的分层概念 , 最后要注意 单一职责原则 .

Experiment 5

实验5是不用框架重构著名的TodoMVC，换言之，就是用最基础的JavaScript代码来实现一个TodoMVC。本实验的目的就是为了向你展示在没有框架介入的情况下怎么构建一个完整的MVC应用

你可以参考 TodoMVC ，第一步就是创建一个新的本地项目然后建立三个基本的组件，你可以参考 Github repository 这里的完整代码。如果你觉得现在的自己能力还不足以Hold住整个项目，表担心，先把它们下载下来，然后慢慢实践。

Experiment 6

Experiment 6 就是跟着Scotch.io的教程来实现一个下面这样的站点：

Build an Etsy Clone with Angular and Stamplay 会教你怎么基于Angular来构建一个网站，提供 APIs 并且在一个大型的项目中进行架构组织。学完了这些之后，你要能理解以下这些问题：

• 啥是web app?

• 怎么用Angular实践 MVC/MVVM?

• API是啥，肿么用?

• 怎么组织与管理一个大型的CodeBase?

• 将一个UI切分为声明式组件的好处在哪?

如果这个教程还不够，那还可以看看 Build a Real-Time Status Update App with AngularJS & Firebase 。

Experiment 7

第7个实验是将React与Flux综合使用，即利用React来构建一个TODOMVC。你可以参考 Facebook’s Flux documentation site 这个教程，它会教你一步一步地从零开始构建界面然后将Flux应用到整个Web项目中。通过了第一关，就可以移步到 怎么利用React、Redux与Immutable.js构建一个TodoMVC 以及 利用Flux与React构建一个微博客 。

Stay current

就像前端一样，JavaScript也永远不会停下前进的步伐。

下面列举了一系列博客，多读读，能够随时了解最新的发展与消息：

• Smashing Magazine

• JavaScript Weekly

• Ng Weekly

• Reddit JavaScript

• JavaScript Jabber

Learn by example

Styleguides