花了七八個小時看了一部分的《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 及其用法！