1. 程式人生 > 實用技巧 >JavaScript高階程式設計(第4版)知識點總結

JavaScript高階程式設計(第4版)知識點總結

介紹

JavaScript高階程式設計 第四版,在第三版的基礎上添加了ES6相關的內容。如letconst關鍵字,Fetch API、工作者執行緒、模組、Promise 等。適合具有一定程式設計經驗的 Web 應用開發人員閱讀。

下面介紹一下各章節的知識點。

第1章 JavaScript概述

這章節主要講解JavaScript歷史回顧,它是在1995年由網景公司的 Brendan Eich 工程師開發的 JavaScript 1.0,1997 年,JavaScript 1.1 作為提案提交給 Ecma。TC39 完成了語言標準化 ECMA-262,即 ECMAScript 新的指令碼語言標準。1998 年,ISO 和 IEC 也採納了 ECMAScript 標準。至此以後,ECMAScript就作為 JavaScript 實現的標準。

JavaScript 實現包含 ECMAScriptDOMBOM 三部分。

第2章 HTML中的JavaScript

這章節主要講述使用 <script> 標籤將 JavaScript 引入 HTML 中,也可以使用 <noscript> 標籤用於瀏覽器不支援指令碼或指令碼支援被關閉的情況,還有 deferasync 兩個屬性用於延遲指令碼執行和無需等待其它指令碼。

第3章 語言基礎

這章節講述了JavaScript的語言基礎,任何語言的核心都是描述語言在最基本層面上如何工作,其中會涉及語法、操作符、資料型別及內建功能,在此基礎上才能構建複雜的解決方案。

第4章 變數、作用域與記憶體

這章節主要是講述JavaScript變數的兩種型別的值:原始值和引用值。在這其中原始值有6中Undefined/Null/Boolean/Number/String/Symbol和原始值的特點。變數的作用域決定了變數的生命週期。JavaScript也是使用垃圾回收的程式語言,不需要操心記憶體分配和回收。

第5章 基本引用型別

這章節介紹JavaScript中的物件稱為引用值,所有引用型別都繼承自Object。講述了幾種引用型別的作用和 API,還有三種相較於原始值的包裝型別:Boolean/Number/String的介紹和特點。程式碼開始執行時,全域性上下文會存在GlobalMath 兩個內建物件。

第6章 集合引用型別

這章節介紹了幾種 ECMAScript 6 中新增的幾種引用型別:Map/WeakMap/Set/WeakSet。使用這些型別可以簡化應用程式的編寫和記憶體管理的新功能。

第7章 迭代器與生成器

ECMAScript 6 支援迭代模式並引入了迭代器和生成器兩種語言特性。迭代器是一個可以由任意物件實現的介面,支援繼續獲取物件產出的每一個值。任何實現 Iterable 介面的物件都有一個 Symbol.iterator 屬性,這個屬性引用預設迭代器。預設迭代器就像一個迭代器工廠,也就是一個函式,呼叫之後會產生一個實現 Iterator 介面的物件。生成器是一種特殊的函式,呼叫之後會返回一個生成器物件。生成器物件實現了 Iterable 介面,並支援 yield 關鍵字,這個關鍵字能夠暫停執行生成器函式。

第8章 物件、類與面向物件程式設計

本章節主要介紹物件的概念、Object類的建立工廠模式/建構函式模式/原型模式/物件迭代和JavaScript實現繼承的方式原型鏈/盜用建構函式/組合函式/原型式繼承/寄生式繼承/寄生式組合繼承,還介紹了 ECMAScript 6 中新增的類,其實就是基於原型機制的語法糖。但類的語法可以很優雅地定義向後相容的類,既可以繼承內建型別,也可以繼承自定義型別。類有效地跨越了物件例項、物件原型和物件類之間的鴻溝。

第9章 代理與反射

ECMAScript 6 新增的代理和反射為開發者提供了攔截並向基本操作嵌入額外行為的能力。代理儘管不支援向後相容,但它是真實JavaScript物件的透明抽象層。可以定義包含捕獲器的處理程式物件,而捕獲器可以攔截絕大部分 JavaScript 的基本操作和方法。在這個捕獲器處理程式彙總,可以修改任何基本操作的行為,前提是遵從捕獲器不變式。而反射 API,則封裝了一整套與捕獲器攔截的操作相對的方法。可以把反射 API 看作一套基本操作,這些操作是絕大部分 JavaScript 物件 API的基礎。

代理的應用場景:跟蹤屬性訪問、隱藏屬性、組織修改或刪除屬性、函式引數驗證、建構函式引數驗證、資料繫結、以及可觀察物件。

第10章 函式

函式是 JavaScript 程式設計中最有用的工具。在 ECMAScript 6 中更是新增了許多強大的語法特性。

  • 函式表示式與匿名函式。
  • ES6 新增的箭頭函式語法、擴充套件操作符,可以實現函式定義和呼叫的完全動態化。
  • JavaScript 引擎優化符合尾呼叫條件的函式,節省棧空間等等。

第11章 期約與非同步函式

ECMAScript 6 及以後的幾個版本逐步加大了對非同步程式設計機制的支援,新增的期約(Promise)和asyncawait關鍵字,實現了非同步程式設計和定義非同步函式的機制。

期約的主要功能是為非同步程式碼提供清晰的抽象。可以用期約表示非同步執行的程式碼塊,也可以表示非同步計算的值。在需要序列非同步程式碼時最為突出。期約可以被序列化、連鎖使用、複合、擴充套件和重組。非同步函式可以說是現代 JavaScript 中的最重要的工具之一。

第12章 BOM

BOM是指瀏覽器物件模型,用於表示瀏覽器視窗和頁面可見區域的。最要有 window/location/navigator/screen/history幾種表示視窗區域的物件。

第13章 客戶端檢測

客戶端檢測是 JavaScript 中爭議最多的話題之一。因為不同瀏覽器之間存在差異,所以經常需要根據瀏覽器的能力來編寫不同的程式碼。客戶端檢測有不少方式,但下面兩種用的最多。

  • 能力檢測。又稱特性檢測,即在執行時檢測瀏覽器是否支援某種特性的檢測邏輯。
  • 使用者代理檢測。通過使用者代理字串確定使用的瀏覽器。
  • 軟硬體檢測。通過BOM中的一些物件獲取作業系統與硬體資訊。

第14~16章 DOM

這三章主要講解DOM模型、DOM Level、節點層級及 Node 型別,和 Selectors API 用來根據 CSS 選擇符匹配 DOM 元素,DOM中的元素遍歷,和HTML 與 DOM 互動的核心 API,在HTML5中也提供了DOM擴充套件,DOM2 和 DOM3 是在 DOM1 的基礎上添加了更多的互動能力及更高階的XML特性。

第17章 事件

JavaScript 與 HTML 的互動是通過事件實現的,而事件中的事件流分為事件冒泡和事件捕獲,DOM想要實現事件就需要與事件進行繫結,而事件繫結分為HTML/DOM0/DOM2/IE幾種,而發生的事件主要有 UIEvent/FocusEvent/MouseEvent/WheelEvent/InputEvent/KeyboardEvent/CompositionEvent等幾種型別,還有一些型別這裡沒有列舉。可以使用事件委託和事件移除來減少記憶體消耗和提供效能。事件是 JavaScript 中最重要的主題之一,理解事件的原理及其對效能的影響非常重要。

第18章 動畫與 Canvas 圖形

本章主要介紹前端繪圖和動畫的技術,主要是 HTML5 中的 <canvas> 元素提供了動態建立建立圖形的 API。這種主要是繪製 2D 圖形。而 3D 繪圖就需使用 WebGL 技術,它是對 OpenGL ES 2.0 的實現。

第19章 表單指令碼

本章主要介紹了HTML 中 <form><select><option><input><textarea>等元素的使用和富文字編輯。

第20章 JavaScript API

本章主要介紹 JavaScript 中比較重要的幾種 API,如Atomics/SharedArrayBuffer/Encoding API/File API/Blob API/<audio>/<video>/Notifications API/Page Visibility等幾種較為重要的API。

第21章 錯誤處理與除錯

本章介紹了JavaScript中使用 try/catchthrow 語句來處理瀏覽器錯誤和一些錯誤型別,主流瀏覽器也提供了向用戶報告錯誤的機制。

第22~23章 XML/JSON

這兩章主要介紹了JavaScript處理XML和JSON兩種資料格式,而現在使用較多的是JSON格式,因為它是輕量級的、可以較方便地表示覆雜資料結構。在ECMAScript 5中定義了原生 JSON 物件,用於將JavaScript物件序列化為 JSON 字串,以及將JSON陣列解析為JavaScript物件。而DOM2中為XML實現了兩個型別:

  • DOMParser 型別將 XML 字串解析為 DOM 文件。
  • XMLSerializer 型別執行相反操作,將 DOM 文件序列化為 XML 字串。

DOM3 新增了 XPath API 的規範,可以讓JavaScript針對DOM文件執行任何XPath查詢並得到不同資料型別的結果。

第24章 網路請求與遠端呼叫

本章介紹了Ajax技術和實現Ajax的XMLHttpRequest物件,這個物件最早由微軟發明並在IE5中引入。之後其餘瀏覽器都復刻了該技術。W3C也在之後將XMLHttpRequest加入Web標準。其中也講述了進度事件。

XMLHttpRequest主要限制是同源策略,訪問超出限制之外的資源會導致安全錯誤,觸發使用正式跨域方案CORS,XMLHttpRequest原生支援CORS。圖片探測和JSONP是另兩種跨域通訊技術,但沒有CORS可靠。

Fetch API 是作為對 XMLHttpRequest物件的一種端到端的替代方案而提出的。這個 API 提供了優秀的基於期約的結構、更直接的介面,以及對Stream API 的最好支援。

還有 Web Socket、與伺服器全雙工、雙向通訊。但需要專用的伺服器,速度優勢明顯。

第25章 客戶端儲存

本章主要講述了將資料儲存在客戶的機器上的儲存方式,主要有cookie/Web Storage/IndexedDB

Web Storage定義了sessionStorage/localStorage兩個物件儲存資料。而IndexedDB是類似SQL資料庫結構的資料化資料儲存機制,但IndexedDB儲存的是物件,可以定義鍵來新增資料,而索引針對特定屬性實現更快查詢。但因為這些資料沒加密,因此要注意別儲存敏感資訊。

第26章 模組

本章介紹了模組模式,它是管理複雜性的永恆工具。分為ES6之前的模組模式和ES6之後的模組模式,在ES6之前,CommonJS和AMD兩種實現模組的方式,但它們編寫的程式碼會在很多方面不一致,經常會帶有冗餘的樣板程式碼。而ES6之後重新定義了瀏覽器模組,集兩個系統之長於一身,並通過更簡單的宣告性語法暴露出來。

第27章 工作者執行緒

本章介紹工作者執行緒的概念和實現,而工作者執行緒主要分為:專用工作者執行緒、共享工作者執行緒和服務工作者執行緒。現代瀏覽器都支援它們。它們非常適合複雜計算和資料處理,特別是需要花較長時間因而會影響使用者使用網頁的處理任務。

第28章 最佳實踐

本章主要介紹一些編碼習慣、鬆散耦合和編碼慣例來保證JavaScript程式碼的可維護性,一些可以提高效能的方式還有部署:構建的過程、驗證、壓縮。

如想獲取本資源請按以下步驟操作:

  1. 識別二維碼並關注公眾號 「海人的部落格」
  2. 在公眾號後臺回覆關鍵字 「7913」