花了七八个小时看了一部分的《JavaScript 高级程序设计》这本书，写下一些知识点

1. JavaScript 简介

讲了 JavaScript 的前世今生。JavaScript 有很多版本，现在应该算是 ECMAScript 了。所以有 ES6 之说。除此之外， JavaScript 编程中需要了解 BOM （浏览器对象模型） 和 DOM （文档对象模型）。

2. 在 HTML中使用 JavaScript

将 JavaScript 导入 HTML的几种方式，<script> 标签嵌入脚本、<noscript>标签保存一段 HTML 表示脚本没有加载出来。还有 defer 和 async 两个异步、延时加载脚本的命令。

3. 基本概念

讲了JavaScript 的基础语法相关，基本都是我们所熟悉的。

• JavaScript 的基本语法
• JavaScript 中的关键字和保留字
• 从性能上说：省略分号、大括号对性能不利。
• 基本数据类型：null,undefined,string,boolean,number 和 object，Object属于引用数据类型。Array 等都是 Object 的扩展
• 操作符用于处理一些逻辑：大于、等于、小于、按位与、按位或、++、—等标点符号。这些基本都会，比较生僻的运算符用到的时候查阅即可。
• 语句 —— 学过 Java 的对这些语句都不陌生。
  • 条件判断语句 if else switch，循环语句 while for。
  • babel 标签 —— 循环套循环的时候用到过。
  • with 定义特殊作用域
• 函数 Function 的 arguments 保存函数的所有参数组成类数组数据

4. 变量、作用域和内存问题

• 类型不同参数的传递也不同
  • 基本类型 赋值传递的是值，直接创建新内存保存参数。在栈中~
  • 引用类型 赋值传递的是指针，赋值指向同一块内存。所以有修改 Object 两个都改的情况发生。也知道了为何需要重新创建一个来赋值。因为这样就新建了一块内存。在堆中。
• ES6 之前没有实际意义上的块作用域。
• 内存上有两种垃圾回收机制
  • 标记清除（主流）
  • 引用计数

5. 引用类型

• 所有的引用类型都是继承于对象的。
• ​主要讲了引用类型的用途和 API，这些皆可查阅 MDN 来学习。
• 引用类型有 Object、Array、Date、RegExp、Function、基本包装类型（Boolean、Number、String）、单体内置对象（Global、Math）
• 这本书有点老了，由于 ES6+ 的版本出现，这些引用类型新增了不少 API 需要我们有所了解。

6. 面向对象的程序设计

• ​重点看看，讲了 Object 对象的面向对象设计。
  • 创建（new）
  • 工厂模式、单例模式、构造函数、原型模式
  • 继承
• 讲了一些对于 JavaScript 做到面向对象的做法。

7. 函数表达式

• ​讲了点闭包、this、块作用域
• 模仿块级作用域 —— 定义匿名变量并立即执行（IIFE）。
• 函数中定义的变量存在于它的函数作用域下，外部无法访问。
• 使用闭包可以实现私有变量和特权方法，通过返回的函数访问私有变量。
• arguments.callee 方法会调用当前执行函数本身，避免函数名改变。

8. BOM

• ​BOM 是指浏览器对象类型
• window 对象
  • 浏览器的全局对象，相对应有 Global 对象
  • 用于获取、操作当前浏览器窗口
  • 可调整窗口的位置和大小
  • 打开和关闭页面窗口，设置浏览器导航栏属性。
  • 有 setTimeOut 和 setInterval 方法执行延时和间隔重复执行，返回 ID；通过返回的 ID 和 clearTimeOut 或 clearInterval 方法取消操作。
  • 弹出系统对话框 alert confirm 和 prompt
• location 对象
  • 获取当前网页URL、地址、域名、传参等相关信息
  • 乐都的 queryString 就是这么做的
• navigator 对象
  • 获取浏览器数据、版本、插件等信息
  • 用于查询浏览器插件安装情况、注册信息
• screen 对象
  • 获取当前显示屏数据
• history 对象
  • 基本上就是控制网页前进后退的
  • 方法
    • go
    • back
    • forword
  • 当打开的是第一个窗口 history.length == 0 以此类推

9 客户端检测

• 通过浏览器能力检测方法来确定当前运行环境。
• 所谓怪癖检测，是指通过浏览器独有的属性和行为来确定浏览器环境。
• 也可以通过用户代理字符串获取设备信息（这个信息是可以篡改的）。

10 DOM

• 介绍了各类 DOM 元素：Document、Element、Node、Text、Comment 等元素的概念和用法
  • Node 为基类
  • Element 为 HTML 和XML元素，可操作。
  • Document 是 HTML 或 XML 的根节点
• 特殊DOM
  • script 动态脚本
  • style 动态样式
  • table 避免过多重复操作，制定了特定的表格 api
• NodeList 的遍历要注意的有：NodeList 是动态的每次访问都要查询。减少遍历对 DOM 的操作。

11 DOM 扩展

• 元素选择器（CSS选择器）
• 元素遍历提供了新 API
• HTML5 的为 DOM 制定的一些扩展功能

12 DOM2 和 DOM3

• 新版 DOM 的一些变化：如添加了命名空间，
• 支持访问和操作样式表,style、rule、宽高、位置。
• 遍历方式：NodeIterator 和 TreeWalker。
  • 第一种简单点，按照树形结构一步步遍历。获取前一节点和后一节点
  • 第二种更高级，有更多遍历方式。
• 范围，主要就是截取某个范围内的 DOM

13 事件

• 事件分为事件冒泡和实践捕获两种。DOM 的事件流是先捕获后冒泡。
  • 冒泡向上拦截
  • 捕获向下拦截
• 事件绑定
  • HTML中： <div onclick="sth()">
  • DOM0 中：div.onclick = fun(){}
  • DOM2 中：div.addEventListener("click", function(){})
  • IE 中：div.attachEvent("onclick", function(){})
• 关于 event 事件对象，需要的时候查表即可。IE 中的 event 有所不同，所以要写一个跨浏览器写法。
• 事件类型
  • UI 事件 load、unload、resize、scroll
  • 焦点事件 focus、blur等
  • 鼠标和滚轮 click、dblclick等
  • 键盘文本事件 keyup、keydown、keypress
  • 复合事件 IME输入序列处理。
  • 变动事件 DOM变动时触发
  • HTML 事件
  • 设备事件
• 内存和性能优化：
  • 事件委托：就是定义个方法将多个事件委托给一个方法，然后通过 ID 区分事件方法。
  • 事件移除：让垃圾回收机制尽快回收不用的事件。btn.onclick = null
  • 模拟事件：可以模拟事件触发，IE 的模拟事件有不同实现法。
• 主要是讲 JavaScript 中的事件，其实常用的不多，用到查阅就是了。

14 表单脚本

• 介绍了 HTML 中表单的使用
• <form> 标签的使用方式。
• 文本框的操作：文本获取、文本过滤、文本选择、切换焦点等。文本框包括 <input> 和 <textarea> 标签。
• 选择框 select 的使用。
• 表单序列化（工具）

15 使用 canvas 绘图

• 介绍了前端绘图技术，在图形化工具和游戏中使用的场景比较多。
• 使用 canvas 获取 getContext() 获取上下文进行绘图。
• 描述各种 canvas 的上下文的 api，用于绘制 2D 图形。
• canvas 可以实现变换效果，实现动画。
• WebGL 是一个 3D 绘图工具，即部分计算机、浏览器支持。不在规范内。
• 需要 3D 绘图需要学习 WebGL

16 HTML5 脚本编程

• 可以建立安全的跨文档消息传递方式
• HTML5 实现了可拖放的元素
• 媒体元素 audio 和 video 标签的介绍
• 历史状态管理，history 对象管理页面的前进和后退

17 错误处理和调试

• 介绍了各浏览器错误调试工具和错误报告
• 几种错误处理方式
  • try...catch...
  • throw 抛出错误
  • window.onerror 事件监听错误信息
  • 处理错误的一些方式和类型
• 调试技术
  • console.log
  • 将错误信息写到 DOM 中显示
• 最后介绍了一些 IE 中有一些莫名其妙的错误（IE 还是那个独特~）。

18 JavaScript 和 XML

• 介绍了 JavaScript 对 XML 的支持
• XPath 是 XML 的 DOM 文档节点路径
• XSLT 是路径的表现转换形式，

19 E4X

• ECMAScript for XML
• 是 ECMAScript 对 XML 的支持，并提供了一系列 API
• 构建、操作 XML
• 确定命名空间
• XML 这部分了解即可，我暂时不用。

20 JSON

• 对 JSON 进行简介
• JSON 可以是简单数值、对象或数组。
• JSON 对向有 parse 解析和 stringify 序列化方法。其中涉及一些配置、过滤等 API。

21 Ajax 和 Comet

• 一般浏览器都实现了原生 XHR 对象，而 IE7- 实现了 ActiveXObject 。所以要做跨浏览器兼容。
• 简单整理下 XHR 的用法及其事件
  • open、send方法
  • 设置 header
  • GET、POST 交互数据方式
  • FormData 表单数据序列化提交
  • 进度事件 load、progress
• 跨域方案
  • IE 的 XDR
  • 其他浏览器的绝对 URL 路径
  • 先发送一个 prefighted 请求再方法请求。
  • 带凭据的请求
  • 多个浏览器的跨域兼容方案~
• 其他跨域技术
  • 图像 ping
  • JSONP
  • comet 长轮询和流
  • SSE 服务器发送事件
  • WebSocket 进行长连接双工通信，讲了其 API
• 跨域行为需要注意网络通信的安全性。

22 高级技巧

• 介绍了 JavaScript 的一些高级的技巧。
• 节流可以避免过于频繁的行为发生。
• 为了安全，可以将对象设为不可扩展、密封、冻结状态。
• 定时器解决了 setTimeout 和 setInterval 方法创造定时器的队列延迟和加入队列空挡问题。

23 离线应用与客户端存储

• 可以实现将数据本地化
• 一般使用 navigator.onLine 检测当前环境是否在线。
• 使用应用缓存，即使用manifest文件缓存数据。
• 数据存储
  • cookie 是常用的，不过不便于通信效率。可使用几个特殊路径解决此问题。
  • IE 中通过将数据变为元素属性来保存数据。
  • 通过 sessionStorage 保存浏览器关闭前的数据。localStorage 则长期保存于全局中（在 HTML5 中取代了 globalStorage）。
• IndexdDB 是一个类似 SQL 的数据库，用于像数据库一样存储和操作数据。提供了一系列 API，需要时按需加载。
• 存储都会有域名、大小的限制。需要注意！

24 最佳实践

• 介绍了很多约定俗成的最佳实践。
• 保证良好的可维护性
• 松散耦合，不要将代码如 HTML、CSS、JS 过渡耦合。
• 一些编程中最好遵守的准则
• 讲了讲性能优化
  • 注意作用域，避免查找不到或者过度查找。
  • 优化代码算法
  • 最小化语句数
  • 优化 DOM 交互（DOM 非常慢）
• 部署部分
  • 构建过程
  • 验证
  • 压缩

25 新兴的 API

• requestAnimationFrame 方法用于获取动画结束的时间点，便于进行下一帧动画或者结束动画。
• requestAnimationFrame 对于不同浏览器有不同前缀，需要跨浏览器支持。
• Page Visibility API，其他的都不靠谱，看准 documen.hidden 属性。该属性确定页面是否为用户可见。而 VisibilityChange 事件浏览器支持不够好，不推荐用。由于不同前缀名，需要跨浏览器支持。
• Geoloaction API，获取用户地理位置。提供了一系列 API，高版本浏览器可用。
• File API 提供了网页访问文件的方式。
• Web Timing API 计时工具，主要用于获取浏览器时间，监听浏览器变化时间。
• Web Workers 提供了后台处理复杂 JavaScript 逻辑的方式，API 及其用法！