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

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

继续译者的废话，这篇文章是前端攻略-从路人甲到英雄无敌的下半部分，在上半篇中介绍了HTML与CSS的基础知识，在这里就主要介绍JavaScript与各类各样的前端框架。再安利一波笔者的个人前端之路

笔者一直以为不断变革的前端永远充满活力与激情，可是，哪有那么多激情燃烧的岁月，不少时候会有一种深深的无力感。B狗的才学会某个东西发现又被抛弃了，就好像笔者才决定大规模使用React+Redux+Webpack，就看到了这个from-a-react-point-of-vue-comparing...。实际上，就包括React自己已经OverWhelming，对于初学者很不友好。而且各类各样的最佳实践、Boilerplate在某些意义上会反而提升学习门槛与曲线，对于这方面的讨论笔者推荐几个瞅瞅，固然，笔者自己也在思考，打腹稿中：

• javascript-fatigue

• state-of-the-union-js

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

如下是正文部分。

JavaScript Basics

做为目前最流行的跨平台语言之一，JavaScript几乎出如今了全部的地方，可是千里之行始于足下，咱们仍是要先来理解JavaScript的一些基础知识。

Language

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

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

• 语法与类型

• 流程控制与异常处理

• 循环与迭代

• 函数

JavaScript Introduction,能够参考里面的Reference部分，有不少推荐的阅读参考

一样的，不要死记硬背，你能够在你记不住的时候多看看，固然，最好的是能造成你本身的阅读笔记或者知识体系框架，譬如这个。你应当专一于理解变量初始化、循环以及函数等等关键的知识点，譬如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的介绍。

好像刚才那段对DOM的介绍有点照本宣科，CSS Tricks里是这么说的，关于DOM与HTML的区别。可能你在HTML代码中写了个<table>元素，可是忘了写<tbody>，不要紧，浏览器会自动帮你插入<tbody>到DOM中，你能够利用JavaScript来控制该节点而且赋予样式，尽管它从未出如今你的HTML中。

这里提供了一个简单的例子，经过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，而是告诉你命令式的作法和声明式的区别在哪，这样你就能更好地理解为啥咱们会须要框架。

响应式与声明式也能够看看笔者在个人前端之路里面提到的从以DOM操做为核心到数据流驱动的页面，关注发生了啥本质上就是关注状态与数据，而不是额外的操做。

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。你并不须要学习全部的框架，选择一个而后深刻，最合适本身的才是最好的。

便如译者在文首所说，咱们并不能盲目地追赶框架，而是要理解框架背后的思想与原则。另外一个在译者本身的实践中，会尽量的基于ES6进行抽象，这样保证了即便换框架也能有很好地兼容于复用。

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的知识，能够参考Angulardocumentation。还有一个叫作 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 Introduction来获取更多关于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

• AirBnB JavaScript Styleguide

• Principles of Writing Consistent, Idiomatic JavaScript

• Node Styleguide

• MDN Coding Style

Codebases

• Lodash

• Underscore

• Babel

• Ghost

• NodeBB

• KeystoneJS

Further Reading

• web-frontend-practice-handbook