拓展阅读｜前端开发，从草根到英雄（第二部分）

正文

请到「今天看啥」查看全文

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

语言

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

• 强化原型

• 作用域

• 闭包

• 事件循环

• 事件通知

• 请求、调用和绑定

• 回调和承诺

• 变量及函数挂起

• Currying

• 
  

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 类了。

请到「今天看啥」查看全文