花了七八個(gè)小時(shí)看了一部分的《JavaScript 高級(jí)程序設(shè)計(jì)》這本書(shū)，寫(xiě)下一些知識(shí)點(diǎn)

1. JavaScript 簡(jiǎn)介

講了 JavaScript 的前世今生。JavaScript 有很多版本，現(xiàn)在應(yīng)該算是 ECMAScript 了。所以有 ES6 之說(shuō)。除此之外， JavaScript 編程中需要了解 BOM （瀏覽器對(duì)象模型） 和 DOM （文檔對(duì)象模型）。

2. 在 HTML中使用 JavaScript

將 JavaScript 導(dǎo)入 HTML的幾種方式，<script> 標(biāo)簽嵌入腳本、<noscript>標(biāo)簽保存一段 HTML 表示腳本沒(méi)有加載出來(lái)。還有 defer 和 async 兩個(gè)異步、延時(shí)加載腳本的命令。

3. 基本概念

講了JavaScript 的基礎(chǔ)語(yǔ)法相關(guān)，基本都是我們所熟悉的。

• JavaScript 的基本語(yǔ)法
• JavaScript 中的關(guān)鍵字和保留字
• 從性能上說(shuō)：省略分號(hào)、大括號(hào)對(duì)性能不利。
• 基本數(shù)據(jù)類(lèi)型：null,undefined,string,boolean,number 和 object，Object屬于引用數(shù)據(jù)類(lèi)型。Array 等都是 Object 的擴(kuò)展
• 操作符用于處理一些邏輯：大于、等于、小于、按位與、按位或、++、—等標(biāo)點(diǎn)符號(hào)。這些基本都會(huì)，比較生僻的運(yùn)算符用到的時(shí)候查閱即可。
• 語(yǔ)句 —— 學(xué)過(guò) Java 的對(duì)這些語(yǔ)句都不陌生。
  • 條件判斷語(yǔ)句 if else switch，循環(huán)語(yǔ)句 while for。
  • babel 標(biāo)簽 —— 循環(huán)套循環(huán)的時(shí)候用到過(guò)。
  • with 定義特殊作用域
• 函數(shù) Function 的 arguments 保存函數(shù)的所有參數(shù)組成類(lèi)數(shù)組數(shù)據(jù)

4. 變量、作用域和內(nèi)存問(wèn)題

• 類(lèi)型不同參數(shù)的傳遞也不同
  • 基本類(lèi)型 賦值傳遞的是值，直接創(chuàng)建新內(nèi)存保存參數(shù)。在棧中~
  • 引用類(lèi)型 賦值傳遞的是指針，賦值指向同一塊內(nèi)存。所以有修改 Object 兩個(gè)都改的情況發(fā)生。也知道了為何需要重新創(chuàng)建一個(gè)來(lái)賦值。因?yàn)檫@樣就新建了一塊內(nèi)存。在堆中。
• ES6 之前沒(méi)有實(shí)際意義上的塊作用域。
• 內(nèi)存上有兩種垃圾回收機(jī)制
  • 標(biāo)記清除（主流）
  • 引用計(jì)數(shù)

5. 引用類(lèi)型

• 所有的引用類(lèi)型都是繼承于對(duì)象的。
• ?主要講了引用類(lèi)型的用途和 API，這些皆可查閱 MDN 來(lái)學(xué)習(xí)。
• 引用類(lèi)型有 Object、Array、Date、RegExp、Function、基本包裝類(lèi)型（Boolean、Number、String）、單體內(nèi)置對(duì)象（Global、Math）
• 這本書(shū)有點(diǎn)老了，由于 ES6+ 的版本出現(xiàn)，這些引用類(lèi)型新增了不少 API 需要我們有所了解。

6. 面向?qū)ο蟮某绦蛟O(shè)計(jì)

• ?重點(diǎn)看看，講了 Object 對(duì)象的面向?qū)ο笤O(shè)計(jì)。
  • 創(chuàng)建（new）
  • 工廠模式、單例模式、構(gòu)造函數(shù)、原型模式
  • 繼承
• 講了一些對(duì)于 JavaScript 做到面向?qū)ο蟮淖龇ā?/li>

7. 函數(shù)表達(dá)式

• ?講了點(diǎn)閉包、this、塊作用域
• 模仿塊級(jí)作用域 —— 定義匿名變量并立即執(zhí)行（IIFE）。
• 函數(shù)中定義的變量存在于它的函數(shù)作用域下，外部無(wú)法訪問(wèn)。
• 使用閉包可以實(shí)現(xiàn)私有變量和特權(quán)方法，通過(guò)返回的函數(shù)訪問(wèn)私有變量。
• arguments.callee 方法會(huì)調(diào)用當(dāng)前執(zhí)行函數(shù)本身，避免函數(shù)名改變。

8. BOM

• ?BOM 是指瀏覽器對(duì)象類(lèi)型
• window 對(duì)象
  • 瀏覽器的全局對(duì)象，相對(duì)應(yīng)有 Global 對(duì)象
  • 用于獲取、操作當(dāng)前瀏覽器窗口
  • 可調(diào)整窗口的位置和大小
  • 打開(kāi)和關(guān)閉頁(yè)面窗口，設(shè)置瀏覽器導(dǎo)航欄屬性。
  • 有 setTimeOut 和 setInterval 方法執(zhí)行延時(shí)和間隔重復(fù)執(zhí)行，返回 ID；通過(guò)返回的 ID 和 clearTimeOut 或 clearInterval 方法取消操作。
  • 彈出系統(tǒng)對(duì)話(huà)框 alert confirm 和 prompt
• location 對(duì)象
  • 獲取當(dāng)前網(wǎng)頁(yè)URL、地址、域名、傳參等相關(guān)信息
  • 樂(lè)都的 queryString 就是這么做的
• navigator 對(duì)象
  • 獲取瀏覽器數(shù)據(jù)、版本、插件等信息
  • 用于查詢(xún)?yōu)g覽器插件安裝情況、注冊(cè)信息
• screen 對(duì)象
  • 獲取當(dāng)前顯示屏數(shù)據(jù)
• history 對(duì)象
  • 基本上就是控制網(wǎng)頁(yè)前進(jìn)后退的
  • 方法
    • go
    • back
    • forword
  • 當(dāng)打開(kāi)的是第一個(gè)窗口 history.length == 0 以此類(lèi)推

9 客戶(hù)端檢測(cè)

• 通過(guò)瀏覽器能力檢測(cè)方法來(lái)確定當(dāng)前運(yùn)行環(huán)境。
• 所謂怪癖檢測(cè)，是指通過(guò)瀏覽器獨(dú)有的屬性和行為來(lái)確定瀏覽器環(huán)境。
• 也可以通過(guò)用戶(hù)代理字符串獲取設(shè)備信息（這個(gè)信息是可以篡改的）。

10 DOM

• 介紹了各類(lèi) DOM 元素：Document、Element、Node、Text、Comment 等元素的概念和用法
  • Node 為基類(lèi)
  • Element 為 HTML 和XML元素，可操作。
  • Document 是 HTML 或 XML 的根節(jié)點(diǎn)
• 特殊DOM
  • script 動(dòng)態(tài)腳本
  • style 動(dòng)態(tài)樣式
  • table 避免過(guò)多重復(fù)操作，制定了特定的表格 api
• NodeList 的遍歷要注意的有：NodeList 是動(dòng)態(tài)的每次訪問(wèn)都要查詢(xún)。減少遍歷對(duì) DOM 的操作。

11 DOM 擴(kuò)展

• 元素選擇器（CSS選擇器）
• 元素遍歷提供了新 API
• HTML5 的為 DOM 制定的一些擴(kuò)展功能

12 DOM2 和 DOM3

• 新版 DOM 的一些變化：如添加了命名空間，
• 支持訪問(wèn)和操作樣式表,style、rule、寬高、位置。
• 遍歷方式：NodeIterator 和 TreeWalker。
  • 第一種簡(jiǎn)單點(diǎn)，按照樹(shù)形結(jié)構(gòu)一步步遍歷。獲取前一節(jié)點(diǎn)和后一節(jié)點(diǎn)
  • 第二種更高級(jí)，有更多遍歷方式。
• 范圍，主要就是截取某個(gè)范圍內(nèi)的 DOM

13 事件

• 事件分為事件冒泡和實(shí)踐捕獲兩種。DOM 的事件流是先捕獲后冒泡。
  • 冒泡向上攔截
  • 捕獲向下攔截
• 事件綁定
  • HTML中： <div onclick="sth()">
  • DOM0 中：div.onclick = fun(){}
  • DOM2 中：div.addEventListener("click", function(){})
  • IE 中：div.attachEvent("onclick", function(){})
• 關(guān)于 event 事件對(duì)象，需要的時(shí)候查表即可。IE 中的 event 有所不同，所以要寫(xiě)一個(gè)跨瀏覽器寫(xiě)法。
• 事件類(lèi)型
  • UI 事件 load、unload、resize、scroll
  • 焦點(diǎn)事件 focus、blur等
  • 鼠標(biāo)和滾輪 click、dblclick等
  • 鍵盤(pán)文本事件 keyup、keydown、keypress
  • 復(fù)合事件 IME輸入序列處理。
  • 變動(dòng)事件 DOM變動(dòng)時(shí)觸發(fā)
  • HTML 事件
  • 設(shè)備事件
• 內(nèi)存和性能優(yōu)化：
  • 事件委托：就是定義個(gè)方法將多個(gè)事件委托給一個(gè)方法，然后通過(guò) ID 區(qū)分事件方法。
  • 事件移除：讓垃圾回收機(jī)制盡快回收不用的事件。btn.onclick = null
  • 模擬事件：可以模擬事件觸發(fā)，IE 的模擬事件有不同實(shí)現(xiàn)法。
• 主要是講 JavaScript 中的事件，其實(shí)常用的不多，用到查閱就是了。

14 表單腳本

• 介紹了 HTML 中表單的使用
• <form> 標(biāo)簽的使用方式。
• 文本框的操作：文本獲取、文本過(guò)濾、文本選擇、切換焦點(diǎn)等。文本框包括 <input> 和 <textarea> 標(biāo)簽。
• 選擇框 select 的使用。
• 表單序列化（工具）

15 使用 canvas 繪圖

• 介紹了前端繪圖技術(shù)，在圖形化工具和游戲中使用的場(chǎng)景比較多。
• 使用 canvas 獲取 getContext() 獲取上下文進(jìn)行繪圖。
• 描述各種 canvas 的上下文的 api，用于繪制 2D 圖形。
• canvas 可以實(shí)現(xiàn)變換效果，實(shí)現(xiàn)動(dòng)畫(huà)。
• WebGL 是一個(gè) 3D 繪圖工具，即部分計(jì)算機(jī)、瀏覽器支持。不在規(guī)范內(nèi)。
• 需要 3D 繪圖需要學(xué)習(xí) WebGL

16 HTML5 腳本編程

• 可以建立安全的跨文檔消息傳遞方式
• HTML5 實(shí)現(xiàn)了可拖放的元素
• 媒體元素 audio 和 video 標(biāo)簽的介紹
• 歷史狀態(tài)管理，history 對(duì)象管理頁(yè)面的前進(jìn)和后退

17 錯(cuò)誤處理和調(diào)試

• 介紹了各瀏覽器錯(cuò)誤調(diào)試工具和錯(cuò)誤報(bào)告
• 幾種錯(cuò)誤處理方式
  • try...catch...
  • throw 拋出錯(cuò)誤
  • window.onerror 事件監(jiān)聽(tīng)錯(cuò)誤信息
  • 處理錯(cuò)誤的一些方式和類(lèi)型
• 調(diào)試技術(shù)
  • console.log
  • 將錯(cuò)誤信息寫(xiě)到 DOM 中顯示
• 最后介紹了一些 IE 中有一些莫名其妙的錯(cuò)誤（IE 還是那個(gè)獨(dú)特~）。

18 JavaScript 和 XML

• 介紹了 JavaScript 對(duì) XML 的支持
• XPath 是 XML 的 DOM 文檔節(jié)點(diǎn)路徑
• XSLT 是路徑的表現(xiàn)轉(zhuǎn)換形式，

19 E4X

• ECMAScript for XML
• 是 ECMAScript 對(duì) XML 的支持，并提供了一系列 API
• 構(gòu)建、操作 XML
• 確定命名空間
• XML 這部分了解即可，我暫時(shí)不用。

20 JSON

• 對(duì) JSON 進(jìn)行簡(jiǎn)介
• JSON 可以是簡(jiǎn)單數(shù)值、對(duì)象或數(shù)組。
• JSON 對(duì)向有 parse 解析和 stringify 序列化方法。其中涉及一些配置、過(guò)濾等 API。

21 Ajax 和 Comet

• 一般瀏覽器都實(shí)現(xiàn)了原生 XHR 對(duì)象，而 IE7- 實(shí)現(xiàn)了 ActiveXObject 。所以要做跨瀏覽器兼容。
• 簡(jiǎn)單整理下 XHR 的用法及其事件
  • open、send方法
  • 設(shè)置 header
  • GET、POST 交互數(shù)據(jù)方式
  • FormData 表單數(shù)據(jù)序列化提交
  • 進(jìn)度事件 load、progress
• 跨域方案
  • IE 的 XDR
  • 其他瀏覽器的絕對(duì) URL 路徑
  • 先發(fā)送一個(gè) prefighted 請(qǐng)求再方法請(qǐng)求。
  • 帶憑據(jù)的請(qǐng)求
  • 多個(gè)瀏覽器的跨域兼容方案~
• 其他跨域技術(shù)
  • 圖像 ping
  • JSONP
  • comet 長(zhǎng)輪詢(xún)和流
  • SSE 服務(wù)器發(fā)送事件
  • WebSocket 進(jìn)行長(zhǎng)連接雙工通信，講了其 API
• 跨域行為需要注意網(wǎng)絡(luò)通信的安全性。

22 高級(jí)技巧

• 介紹了 JavaScript 的一些高級(jí)的技巧。
• 節(jié)流可以避免過(guò)于頻繁的行為發(fā)生。
• 為了安全，可以將對(duì)象設(shè)為不可擴(kuò)展、密封、凍結(jié)狀態(tài)。
• 定時(shí)器解決了 setTimeout 和 setInterval 方法創(chuàng)造定時(shí)器的隊(duì)列延遲和加入隊(duì)列空擋問(wèn)題。

23 離線(xiàn)應(yīng)用與客戶(hù)端存儲(chǔ)

• 可以實(shí)現(xiàn)將數(shù)據(jù)本地化
• 一般使用 navigator.onLine 檢測(cè)當(dāng)前環(huán)境是否在線(xiàn)。
• 使用應(yīng)用緩存，即使用manifest文件緩存數(shù)據(jù)。
• 數(shù)據(jù)存儲(chǔ)
  • cookie 是常用的，不過(guò)不便于通信效率?？墒褂脦讉€(gè)特殊路徑解決此問(wèn)題。
  • IE 中通過(guò)將數(shù)據(jù)變?yōu)樵貙傩詠?lái)保存數(shù)據(jù)。
  • 通過(guò) sessionStorage 保存瀏覽器關(guān)閉前的數(shù)據(jù)。localStorage 則長(zhǎng)期保存于全局中（在 HTML5 中取代了 globalStorage）。
• IndexdDB 是一個(gè)類(lèi)似 SQL 的數(shù)據(jù)庫(kù)，用于像數(shù)據(jù)庫(kù)一樣存儲(chǔ)和操作數(shù)據(jù)。提供了一系列 API，需要時(shí)按需加載。
• 存儲(chǔ)都會(huì)有域名、大小的限制。需要注意！

24 最佳實(shí)踐

• 介紹了很多約定俗成的最佳實(shí)踐。
• 保證良好的可維護(hù)性
• 松散耦合，不要將代碼如 HTML、CSS、JS 過(guò)渡耦合。
• 一些編程中最好遵守的準(zhǔn)則
• 講了講性能優(yōu)化
  • 注意作用域，避免查找不到或者過(guò)度查找。
  • 優(yōu)化代碼算法
  • 最小化語(yǔ)句數(shù)
  • 優(yōu)化 DOM 交互（DOM 非常慢）
• 部署部分
  • 構(gòu)建過(guò)程
  • 驗(yàn)證
  • 壓縮

25 新興的 API

• requestAnimationFrame 方法用于獲取動(dòng)畫(huà)結(jié)束的時(shí)間點(diǎn)，便于進(jìn)行下一幀動(dòng)畫(huà)或者結(jié)束動(dòng)畫(huà)。
• requestAnimationFrame 對(duì)于不同瀏覽器有不同前綴，需要跨瀏覽器支持。
• Page Visibility API，其他的都不靠譜，看準(zhǔn) documen.hidden 屬性。該屬性確定頁(yè)面是否為用戶(hù)可見(jiàn)。而 VisibilityChange 事件瀏覽器支持不夠好，不推薦用。由于不同前綴名，需要跨瀏覽器支持。
• Geoloaction API，獲取用戶(hù)地理位置。提供了一系列 API，高版本瀏覽器可用。
• File API 提供了網(wǎng)頁(yè)訪問(wèn)文件的方式。
• Web Timing API 計(jì)時(shí)工具，主要用于獲取瀏覽器時(shí)間，監(jiān)聽(tīng)瀏覽器變化時(shí)間。
• Web Workers 提供了后臺(tái)處理復(fù)雜 JavaScript 邏輯的方式，API 及其用法！