前端练级攻略(第二部分)

2023-02-26

框架 dom mvc

 本文是前端练级攻略第二部分，***部分请看下面： 前端练级攻略(***部分)在第二部分，我们将重点学习JavaScript作为一种独立的语言，如何向界面添加交互性，JavaScript设计和架构模式，以及如何构建网络应用程序。就像HTML和CSS一样，有大量的JavaScrip

本文是前端练级攻略第二部分，***部分请看下面：

前端练级攻略(***部分)

在第二部分，我们将重点学习 JavaScript 作为一种独立的语言，如何向界面添加交互性，JavaScript 设计和架构模式，以及如何构建网络应用程序。

就像 HTML 和 CSS一样，有大量的 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!'; 
1.
2.

别担心，那只是一个简单的例子。使用 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像素

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

定义一个名为 doSomething 的函数，该函数j里定义一下alert (“Hello world”) 然后执行它
选择一个特定的段落标记，向其中注册一个 click 事件，并在每次事件被触发时运行 doSomething

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

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

这个实践的主要目的是学习一些关于 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)  
 })  
} 
1.
2.
3.
4.
5.
6.
7.
8.
9.

这是命令式编程的一个例子，我们手动查询一个元素并将 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 的工作原理以及如何使用它。你还可以在此处找到带文档的 Fetch polyfill。

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和vMVP(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　是一个JavaScript MVC　框架，有时也是 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 如何在不混合框架特定语法的情况下工作。