【JavaScript忍者秘籍】读书笔记之第一章：无所不在的JavaScript、第二章：运行时的页面构建过程

1.1 “理解”JavaScript语言

• 在JavaScript中函数是非常重要的意义
• 函数闭包实际上体现了函数对于JavaScript的重要性

为什么要深入理解原型?

• JavaScript不同于其他主流的面向对象语言使用基于类的面向对象，而是使用基于原型的面向对象
• 对象、 原型、 函数和闭包的紧密结合组成了JavaScript

Babel和Traceur是什么？ 为什么它们对现在的JavaScript开发者至关重要？

• 开发者想利用JavaScript的最新特性，但用户依然在使用老旧的浏览器，使用转换编译器transpilers（即“转换器+编译器”， “transformation + compiling”） ， 这类工具能够把最前沿的JavaScript代码转换为等价的（如果不能实现， 则使用相似的） 能在当前浏览器中运行的代码。
• 最流行的转换编译器是Traceur和Babel

1.2 理解浏览器

• DOM：Web应用的结构化的UI表现形式

• 事件：大部分JavaScript应用都是事件驱动的应用， 这表示大部分代码执行在对某个特殊事件响应的上下文中。例如网络事件、 计时器、 用户生成事件例如点击、 鼠标移动、 键盘按压事件等

• 浏览器API：浏览器提供获取设备的信息、 存储本地数据或与远程浏览器交互的API

2.1 生命周期

典型客户端we应用的生命周期过程

最主要的两个步骤：
1.页面构建：创建用户界面
2.事件处理：等待某事件的发生后触发回调

页面构建

• 根据服务器获取的响应（通常是HTML、 CSS和JavaScript代码） 来构建
• 目的：建立Web应用的UI
• 步骤：
  1. 解析HTML代码并构建文档对象模型 （DOM）
  2. 执行JavaScript代码
• 步骤1在浏览器处理HTML节点的时候执行，步骤2在HTML解析到script节点时执行

DMO树的构建规则

• 除了html根节点外，所有的节点都只有一个父节点
• 一个节点可以有任意数量的子节点
• 同一个孩子节点被称作兄弟节点

执行JavaScript代码

• 浏览器通过全局对象提供了一个API 使JavaScript引擎可以与之交互并改变页面内容
• 即window对象
• 代码的不同类型（根据位置不同）：全局代码和函数代码

把script元素放在页面底部的原因

• 本质上是因为JavaScript不能选择和修改还没被创建的节点

为什么浏览器使用事件队列来处理事件？

• 本质上是因为浏览器执行环境的核心思想是基于：同一时刻只能执行一个代码片段，即所谓的单线程执行模型。浏览器需要一种方式来跟踪已经发生但尚未处理的事件。 为实现这个目标， 浏览器使用了事件队列。
• 所有已生成的事件（无论是用户生成的， 例如鼠标移动或键盘按压， 还是服务器生成的， 例如Ajax事件）都会放在同一个事件队列中，以它们被浏览器检测到的顺序排列。
• 由于一次只能处理一个事件， 所以我们必须格外注意处理所有事件的总时间。 执行需要花费大量时间执行的事件处理函数会导致Web应用无响应。
  

如何告知浏览器我们要处理哪个事件？

• 通过事件处理器，它是一个函数，当某个特定事件发生后我们希望执行的函数
• 注册事件的两种方式：

1. 通过把函数赋给某个特殊属性
   缺点：对于某个事件只能注册一个事件处理器

        //当DOM建立完毕之后执行的函数
        window.onload = function(){}

2. 通过使用内置addEventListener方法
   优点：注册尽可能多的事件

	document.body.addEventListener("mousemove",function(){
            console.log('hello');
        })

• 通过事件循环不断检查事件队列的对头，如果检测到了一个事件， 那么相应的事件处理器就会被调用，循环会一直执行到用户关闭了Web应用