9W字｜值得研讀的前端進(jìn)階資料

2020 年 08 月 03 號(hào) <<前端進(jìn)階篇>> 1.0 版本正式發(fā)布了，首發(fā)一周的下載量突破 2K，截止目前的下載量 2864，瀏覽量為 1290。

這里還得感謝一位讀者 sunshine 的鼓勵(lì)，以下是 2020 年 8 月 16 日晚的對(duì)話：

第一次看到以上的內(nèi)容，阿寶哥內(nèi)心還是很激動(dòng)的，很欣慰、也很感動(dòng)。這個(gè)舉動(dòng)讓我再次燃起了斗志，打算將之前已寫的 40 幾篇重學(xué) TS 系列文章整理成 PDF 書(shū)籍免費(fèi) ?? 提供給需要的小伙伴們。

好的，下面我們開(kāi)始步入正題，首先阿寶哥先來(lái)個(gè)自我介紹。

一、前言

大家好，我是阿寶哥。首先簡(jiǎn)單介紹下我自己，2017 年 3 月份開(kāi)始在思否寫 Angular 修仙之路專欄，目前已輸出 142 篇原創(chuàng)文章。曾獲得思否年度優(yōu)秀文章作者及兩季 Top Writer。

2020 年開(kāi)始專注系列教程寫作，包含以下專題：

• 重學(xué) TS 專題（40+篇）
• 玩轉(zhuǎn)前端專題（5 篇）
• 你不知道的 XXX（5 篇）
• 了不起的 XXX 專題（5 篇）

平?；钴S在各個(gè)開(kāi)發(fā)社區(qū)，這里分享主要的社區(qū)地址：

• 掘金（LV5）：https://juejin.im/user/764915822103079

• 思否（11.5K）：https://segmentfault.com/a/1190000008754631

• 個(gè)人博客：https://www.semlinker.com/

接著給大家分享，本人精心準(zhǔn)備的 “重學(xué)TS” 系列教程及本人 Github 上的 Awesome TypeScript 項(xiàng)目：

• 重學(xué) TS 系列教程：https://mp.weixin.qq.com/s/y6C4R04mpvBmyV80p5WOug

• Awesome TypeScript（1.8K）：https://github.com/semlinker/awesome-typescript

二、簡(jiǎn)介

歡迎你閱讀 <<前端進(jìn)階篇>> 這本書(shū)，該書(shū)由 “玩轉(zhuǎn)前端”、 “你不知道的 XXX”、 “一文讀懂 XXX（新增）” 和 “軟件架構(gòu)（新增）” 4 大專題組成，共 15 個(gè)章節(jié)。4 大專題所包含的內(nèi)容如下：

• “玩轉(zhuǎn)前端專題”：包含玩轉(zhuǎn) Video 播放器、玩轉(zhuǎn)圖片處理、玩轉(zhuǎn) Word 文檔、玩轉(zhuǎn)混合加密和玩轉(zhuǎn)網(wǎng)絡(luò) 5 大章節(jié)的內(nèi)容。
• “你不知道的 XXX 專題”：包含你不知道的 Web Workers、你不知道的 WebSocket、你不知道的 Blob 及你不知道的 WeakMap、你不知道的 MutationObserver（新增） 5 大章節(jié)的內(nèi)容。
• “一文讀懂 XXX 專題”：包含一文讀懂 IoC 與 DI、一文讀懂 Base64 編碼、一文讀懂原碼、反碼與補(bǔ)碼、一文讀懂 MD5 4 大章節(jié)內(nèi)容。
• “軟件架構(gòu)專題”： 包含微內(nèi)核架構(gòu)之西瓜視頻播放器。

此外，你也可以在 ”PDF 下載“ 章節(jié)了解一下，阿寶哥另一本 85 頁(yè)的 <<了不起的 TS 和 Deno>> 電子書(shū)，該書(shū)包含 5 大章節(jié)的內(nèi)容，內(nèi)容豐富不要錯(cuò)過(guò)喲。

2.1 本書(shū)適合人群

① 具有一定的編程基礎(chǔ)的 Web 開(kāi)發(fā)者

② 希望深入學(xué)習(xí)與掌握 Web API 的 Web 開(kāi)發(fā)者

③ 對(duì)前端二進(jìn)制處理、音視頻感興趣的開(kāi)發(fā)者

④ 對(duì)網(wǎng)絡(luò)安全、信息安全和軟件架構(gòu)感興趣的開(kāi)發(fā)者

2.2 我能學(xué)到什么

① 在前端如何處理音視頻、圖片和 Word 文檔等

② 了解如何保障數(shù)據(jù)的安全及網(wǎng)絡(luò)狀態(tài)的檢測(cè)與網(wǎng)絡(luò)測(cè)速等

③ 掌握 Web Workers、WebSocket、Blob、WeakMap 和 MutationObserver API

④ 掌握 Base64、MD5 和原碼、反碼和補(bǔ)碼等知識(shí)

⑤ 了解如何利用 Chrome 開(kāi)發(fā)者工具、WireShark 分析 HTTP 報(bào)文和 WebSocket 數(shù)據(jù)幀

2.3 本書(shū)閱讀建議

本書(shū)阿寶哥為了讓大家能更好地學(xué)習(xí)每個(gè)章節(jié)的知識(shí)點(diǎn)，精心準(zhǔn)備了大量的配圖及示例。在學(xué)習(xí)的新知識(shí)的過(guò)程中，建議小伙伴們盡量親自動(dòng)手試一下，在學(xué)完相關(guān)的知識(shí)點(diǎn)可以考慮對(duì)所學(xué)的知識(shí)點(diǎn)進(jìn)行總結(jié)和輸出，可以寫學(xué)習(xí)筆記、博文或跟團(tuán)隊(duì)內(nèi)的成員分享。

當(dāng)然，在寫作過(guò)程中，如果遇到問(wèn)題，歡迎跟阿寶哥一起交流技術(shù)問(wèn)題或?qū)懽骷记伞?/p>

2.4 PDF 下載

原創(chuàng)不易，下載前，阿寶哥希望能得到你的一點(diǎn)鼓勵(lì)，點(diǎn)贊、在看、分享或留言都可以。你們的認(rèn)可與鼓勵(lì)，是我不斷前進(jìn)的動(dòng)力。

2.4.1 獲取方式

① 掃描下方二維碼加 “前端進(jìn)階” 學(xué)習(xí)群，凡進(jìn)群者都送書(shū)籍一本。另外，對(duì)于入群的小伙伴，阿寶哥還會(huì)額外贈(zèng)送包含了 “了不起 TypeScript 入門教程（掘金 - 1505?個(gè)?）” 和 “了不起的 Deno 入門教程（12 個(gè)號(hào)主轉(zhuǎn)載）” 的 <<了不起的 TS 和 Deno>> 85 頁(yè)的 PDF 電子書(shū)，該電子書(shū)包含 五大章節(jié) 的內(nèi)容，感興趣的小伙伴不要錯(cuò)過(guò)喲。

② 掃描下方二維碼，添加阿寶哥微信（semlinker）獲取 PDF 書(shū)籍并獲取抽獎(jiǎng)二維碼，3 個(gè) 8.88 紅包，3?個(gè) 6.66 紅包。

③ 全棧修仙之路公眾號(hào)內(nèi)回復(fù) pdf，你將獲得一個(gè) <<前端進(jìn)階篇>> 電子書(shū)的下載鏈接和以上的抽獎(jiǎng)二維碼。

另外，如果你在學(xué)習(xí)、成長(zhǎng)過(guò)程中遇到什么問(wèn)題，也可以添加我的微信一起交流。

2.5 玩轉(zhuǎn)前端專題

2.5.1 玩轉(zhuǎn)前端 Video 播放器

本章將從八個(gè)方面入手，全方位帶你一起探索前端 Video 播放器和主流的流媒體技術(shù)。此外，你還會(huì)了解到如何實(shí)現(xiàn)播放器截圖、如何基于截圖生成 GIF、如何使用 Canvas 播放視頻及如何實(shí)現(xiàn)色度鍵控等內(nèi)容。

2.5.2 玩轉(zhuǎn)圖片處理

本章將以一個(gè)前端圖片處理的案例，帶大家一起深入學(xué)習(xí)二進(jìn)制、Blob、Blob URL、Base64、Data URL、ArrayBuffer、TypedArray、DataView 和圖片壓縮相關(guān)的知識(shí)點(diǎn)。

2.5.3 玩轉(zhuǎn) Word 文檔

本章將介紹在前端如何把 Word 文檔轉(zhuǎn)換成 HTML/Markdown 文檔，同時(shí)也會(huì)介紹在前端如何動(dòng)態(tài)生成 Word 文檔，除此之外，還會(huì)介紹如何在瀏覽器中處理 ZIP 文檔。

2.5.4 玩轉(zhuǎn)混合加密

本章首先介紹了對(duì)稱加密、非對(duì)稱加密的優(yōu)缺點(diǎn)及使用示例，接著引出了混合加密的概念并給出了一套完整的使用示例與解決方案。

2.5.5 玩轉(zhuǎn)網(wǎng)絡(luò)

本章將介紹在前端如何實(shí)現(xiàn)在線或離線檢測(cè)、獲取網(wǎng)絡(luò)信息、獲取網(wǎng)絡(luò)延遲和網(wǎng)絡(luò)測(cè)速等內(nèi)容。

2.6 你不知道的 XXX 專題

2.6.1你不知道的 Web Workers

本章將介紹進(jìn)程與線程的區(qū)別、瀏覽器內(nèi)核的相關(guān)知識(shí)、Web Workers 是什么、Web Workers 的分類及 Web Workers API 及如何觀察 Dedicated Worker 等知識(shí)。

2.6.2 你不知道的 WebSocket

本章將從多個(gè)方面入手，全方位帶你一起探索 WebSocket 技術(shù)。在介紹完 WebSocket 協(xié)議相關(guān)的知識(shí)之后，還會(huì)帶你一步步實(shí)現(xiàn)一個(gè) WebSocket 服務(wù)器。

2.6.3 你不知道的 Blob

本章將詳細(xì)介紹 Blob API，在日常工作中，Blob 的使用場(chǎng)景，比如分片上傳、從互聯(lián)網(wǎng)下載數(shù)據(jù)、Blob 用作 URL、Blob 轉(zhuǎn)換為 Base64、圖片壓縮等，此外，阿寶哥還會(huì)介紹 Blob 與 ArrayBuffer 之間的區(qū)別。

2.6.4 你不知道的 WeakMap

本章將介紹什么是垃圾回收（引用計(jì)數(shù)法和標(biāo)記清除法）、為什么需要 WeakMap、WeakMap 是什么及其應(yīng)用，此外還會(huì)介紹 ECMAScript 私有字段及在 TypeScript 3.8 版本中如何使用 ECMAScript 私有字段。

2.6.5 你不知道的 MutationObserver

本章將介紹 MutationObserver 是什么、MutationObserver API 的基本使用及 MutationRecord 對(duì)象、MutationObserver API 常見(jiàn)的使用場(chǎng)景。此外，還會(huì)介紹什么是觀察者設(shè)計(jì)模式及如何使用 TS 實(shí)現(xiàn)觀察者設(shè)計(jì)模式。

2.7 一文讀懂 XXX 專題

2.7.1 一文讀懂 IoC 與 DI

本章將介紹 IoC（控制反轉(zhuǎn)） 是什么、IoC 能做什么、IoC 與 DI（依賴注入） 的關(guān)系、DI 的應(yīng)用及如何手寫 IoC 容器。

2.7.2 一文讀懂 Base64 編碼

本章將介紹為什么要使用 base64、什么是 base64、base64 編碼的應(yīng)用及如何使用 base64 進(jìn)行編碼和解碼。

2.7.3 一文讀懂原碼、反碼與補(bǔ)碼

本章將介紹二進(jìn)制、數(shù)值型數(shù)據(jù)的表示、原碼、反碼和補(bǔ)碼和位移運(yùn)算的相關(guān)知識(shí)。

2.7.4 一文讀懂 MD5

本章將介紹什么是消息摘要、什么是 MD5、MD5 算法的用途及 MD5 算法的缺陷和密碼的安全性。

2.8 軟件架構(gòu)專題

本章將介紹微內(nèi)核架構(gòu)是什么、西瓜視頻播放器簡(jiǎn)介及西瓜視頻播放器的微內(nèi)核實(shí)踐。

三、結(jié)尾

至此本書(shū)的內(nèi)容已經(jīng)介紹完了，非常感謝你的閱讀與支持。由于作者水平有限，書(shū)中可能會(huì)有一些描述不準(zhǔn)確內(nèi)容或出現(xiàn)一些錯(cuò)別字，請(qǐng)大家多多包涵。歡迎小伙伴把出現(xiàn)的問(wèn)題反饋給我，在這本書(shū)后續(xù)版本中，會(huì)感謝幫忙勘誤的小伙伴們。

前端進(jìn)階之路，阿寶哥與你同行，歡迎小伙們與我一起技術(shù)交流，共同學(xué)習(xí)進(jìn)步。

2020 年上半年認(rèn)識(shí)了好多小伙伴，如浪里行舟、關(guān)關(guān)、Linmi、Champollion、小傅哥、方旭、元哥、璐姐、暖暖和楊中興老師，還有我的好兄弟 —— 石七，他們都默默幫助我，給我很多成長(zhǎng)建議，真心感謝他們。當(dāng)然還要感謝 JavaScript 突擊隊(duì) 那些可愛(ài)的小伙伴們的認(rèn)可與支持，作為隊(duì)長(zhǎng)的阿寶哥，會(huì)做好本職工作，讓你們快速成長(zhǎng)起來(lái)。

2020 年 8 月 1 號(hào)（建軍節(jié)），阿寶哥的第一本電子書(shū) <<前端進(jìn)階篇>> 1.0 版本終于出來(lái)了，2020 年 8 月 22 號(hào)，該書(shū)的 1.1 版本也按照原定的計(jì)劃完成了，又是一個(gè)小小的里程碑。

阿寶哥一直在努力，本書(shū)阿寶哥還會(huì)繼續(xù)更新，不斷地輸出有價(jià)值的內(nèi)容。如果你有好的建議，歡迎小伙伴們給我留言喲。

最后感謝 <<前端進(jìn)階篇>> 1.0 版本打賞的 “金主” 們，Champollion、Bing、宜常樂(lè)、石七、永久。、ulyn、小傅哥 | bugstack.cn、兔子愛(ài)吃胡蘿卜、阿浪、自由人、阿仁、草莽、張曉衡、Lisayang123，謝謝你們的認(rèn)可與鼓勵(lì)?。