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
- 步骤:
- 解析HTML代码并构建文档对象模型 (DOM)
- 执行JavaScript代码
- 步骤1在浏览器处理HTML节点的时候执行,步骤2在HTML解析到
script
节点时执行
DMO树的构建规则
- 除了html根节点外,所有的节点都只有一个父节点
- 一个节点可以有任意数量的子节点
- 同一个孩子节点被称作兄弟节点
执行JavaScript代码
- 浏览器通过
全局对象
提供了一个API 使JavaScript引擎可以与之交互并改变页面内容 - 即window对象
- 代码的不同类型(根据位置不同):全局代码和函数代码
把script元素放在页面底部的原因
- 本质上是因为JavaScript不能选择和修改还没被创建的节点
为什么浏览器使用事件队列来处理事件?
- 本质上是因为浏览器执行环境的核心思想是基于:同一时刻只能执行一个代码片段,即所谓的单线程执行模型。浏览器需要一种方式来跟踪已经发生但尚未处理的事件。 为实现这个目标, 浏览器使用了事件队列。
- 所有已生成的事件(无论是用户生成的, 例如鼠标移动或键盘按压, 还是服务器生成的, 例如Ajax事件)都会放在同一个事件队列中,以它们被浏览器检测到的顺序排列。
- 由于一次只能处理一个事件, 所以我们必须格外注意处理所有事件的总时间。 执行需要花费大量时间执行的事件处理函数会导致Web应用无响应。
如何告知浏览器我们要处理哪个事件?
- 通过事件处理器,它是一个函数,当某个特定事件发生后我们希望执行的函数
- 注册事件的两种方式:
- 通过把函数赋给某个特殊属性
缺点:对于某个事件只能注册一个事件处理器
//当DOM建立完毕之后执行的函数
window.onload = function(){}
- 通过使用内置addEventListener方法
优点:注册尽可能多的事件
document.body.addEventListener("mousemove",function(){
console.log('hello');
})
- 通过
事件循环
不断检查事件队列的对头,如果检测到了一个事件, 那么相应的事件处理器就会被调用,循环会一直执行到用户关闭了Web应用