[書籍精讀]《移動WEB前端高級開發實踐》精讀筆記分享

寫在前面

• 書籍介紹：《移動WEB前端高級開發實踐》這本書的內容涵蓋了移動Web前端開發中的各個關鍵技術環節。分別從HTML5、CSS3、JavaScript的ECMAScript5和ECMAScript6版本、移動端常用佈局方案、MV*類新時代框架、預編譯技術、性能優化、開發調試、混合式應用、單元測試、工程化等方面全面地還原了一線互聯網公司Web前端技術棧。
• 我的簡評：這本書內容量很大，全面地總結了前端技術棧相關的各種技術環節的優秀實踐。對於技術水平還處於低中級的朋友，推薦將這本書反覆多讀幾遍，依照書中的介紹到的各個關鍵技術環節，來對自己的學習查漏補缺。
• ！！福利：文末有pdf書籍、筆記思維導圖、隨書代碼打包下載地址。覺得有用，記得點贊或收藏哦！
• 該系列文章原稿鏈接：https://github.com/yzsunlei/javascript-book-reading

第一章 初識移動Web前端

• 移動Web開發屬於前端開發中的一個子集，專指移動設備上的Web前端開發工作

1.1.移動Web前端史

• Web開發基本上可以分為三個階段：靜態技術階段、動態技術階段、後Web2.0階段
• HTML5具有以下特性：語義化；本地存儲；設備相容；連接特性；多媒體；圖形特效
• 移動Web開發常用的HTML5技術：視口控制；媒體查詢；音視頻播放；
• 1.移動Web的優勢：跨平臺、開發成本低、更容易迭代
• 2.移動Web的劣勢：功能有限；操作體驗欠佳；無法離線使用；很難被髮現；
• 3.原生應用的優勢：功能完善；體驗更好；可離線使用；發現機會高；
• 4.原生應用的劣勢：開發成本高；迭代不可控；內容限制；

1.2.移動Web前端現狀與未來

• 移動Web仍然有很多問題需要解決：1.瀏覽器種類繁多、參差不齊；2.網速仍然是性能瓶頸；3.多框架造成高門檻；
• 需要掌握的知識體系：電腦基礎知識；靜態頁面製作；編程語言；開發工具；移動前沿技術；瀏覽器；代碼質量；工程化；庫/框架；
• 拐點來自於Google在2005年推出的Web郵箱Gmail
• 原生APP最致命的缺點是每次更新都需要發版，用戶需要重新安裝

第二章 移動Web開發環境搭建

2.1.Visual Studio Code免費跨平臺編輯器

2.2.使用Node.js

• Node.js幾乎能夠實現一切應用，只是需要根據業務和項目選擇使用

2.4.Web代理工具NProxy

• Web代理工具Windows系統上有Fiddler，MacOS上有Charles
• NProxy是能在多端上使用的工具

2.2.5.HTTP伺服器http-server

• 一個簡單的零配置命令行HTTP伺服器，非常適合日常的測試、本地開發等環境

第三章 HTML5必會實際常用特性

3.1.新的語義

• 新元素的到來：讓機器能識別HTML結構中的語義Header、Nav、Article；HTML5還提供很多豐富的語義化標記，如Address、Mark、Time等標記；
• 表單的增強應用：1.Input元素的Type屬性擴充，number、date、color等；2.Input通過屬性進行表單驗證，由required和pattern屬性實現；3.Input元素的其他有用屬性，如autofocus、form、placeholder等；4.HTML5的新元素和特殊屬性contenteditable；HTML5提供的新特性，使得開發者能夠在HTML層面處理各種類型的輸入、驗證、自動聚焦等功能；
• 使用音頻和視頻：HTML5提供了Audio和Video標簽，才可以很方便的在網頁中嵌入音頻和視頻

3.2.訪問你的設備

• 定位當前地理位置：HTML5新功能中提供了獲取用戶位置的能力；Geolocation API通過navigator.geolocation全局對象進行訪問；
• 實戰演練：調用攝像頭拍個照：HTML5的getUserMedia API提供了一個訪問用戶媒體設備的能力，基於該特性，開發者可以在不依賴任何瀏覽器插件的條件下訪問視頻和音頻等設備；最新的標準getUserMedia API為navigator.mediaDevices.getUserMedia；
• 實戰演練：在手機上實現搖一搖：通過感測器，可以感知手機的方向和位置的變化；可以開發出很多有趣的功能，如指南針、通過傾斜手機來控制方向的賽車游戲、甚至更熱門的增強現實游戲等；

3.3.離線和存儲

• HTML5引入了應用程式緩存，這意味著Web應用可在沒有網路時進行訪問
• 同時還提供了一套本地存儲機制，允許開發者在本地存儲少量數據，來提高用戶體驗
• 實戰演練：搭建一個簡單的離線應用：HTML5離線功能包含離線資源緩存、線上狀態監測、本地數據存儲等方面的內容
• 離線之後資源該如何更新--Service Worker：HTML5提供了另外一套API，幫助開發者完全控制離線數據，以支持更好的離線體驗；Service Worker主要提供4類功能：後臺消息傳遞、網路代理、離線緩存、消息推送；開發者也可以通過與伺服器的通信決定何時緩存和更新；
• LocalStorage與SessionStorage：在HTML5之前，Web應用程式通用的數據存儲方案一般通過Cookie實現；將數據存儲在Cookie中的弊端：大小受限、消耗性能；
• 實戰演練：利用IndexedDB實現便簽管理：IndexDB是一個事務型資料庫系統，同時也是一個基於JavaScript的面向對象的資料庫系統；IndexedDB可以存儲大量的結構化的數據，並且使用基於索引的高效API檢索；

3.4.圖像效果

• HTML5引入了Canvas和SVG標簽為瀏覽器提供了更加豐富的圖形渲染功能
• WebGL用於在任何相容的Web瀏覽器中呈現互動式3D和2D圖形
• 使用SVG實現奧運五環：要讓五環環環相扣，一種簡單粗暴的方式是進行“補刀”，利用Path標簽或者Line標簽繪製一個新的圓弧或者線段製造視覺差異
• 在Canvas中所看到的三維空間並非真實的三維空間，而是用數學演算法將模擬的三維空間投射到二維視口的圖像
• 在WebGL中，三維空間中的物體投影到二維空間分為正交投影和透視投影兩種方式。正交投影就是不管物體和視點距離，都按照統一的大小進行繪製。而透視投影則是從視點開始越近的物體越大、遠處的物體則繪製的較小

3.5.不一樣的通信

• PostMessages：在過去，跨源或者視窗之間的通信往往通過和伺服器進行數據交互來實現，並且需要藉助輪詢或者Comet等技術來監聽消息；HTML5提供了新型機制postMessage實現安全的跨源通信；
• XMLHttpRequest Level2。相較於老版本做出的改進：設置HTTP請求的超時時間；使用FormData對象管理表單數據；用於上傳文件；跨域請求；獲取伺服器端的二進位數據；獲得數據傳輸的進度信息；
• Server Sent Event：傳統的做法是客戶端向服務端發送輪詢請求，一旦有新的數據，馬上更新，這種做法消耗性能並且時效性差；HTML5中提供了Server Sent Event，他有以下優點：輕量，相對簡單；單項傳送數據；基於HTTP協議；預設支持斷線重連；自定義發送數據類型；Server Sent Event 通過EventSource對象接收伺服器發送事件的通知；
• WebSocket：WebSocket是HTML5新增的協議，基於TCP連接進行全雙工通信；WebSocket對象提供了一組用於創建和管理WebSocket連接，以及可以通過該連接發送和接收數據的API；
• WebRTC：全稱Web Real-Time Communication，即Web實時通信，能夠為瀏覽器和移動網頁應用提供實時的語音或者視頻通話功能；WebRTC包括以下幾個主要的JavaScript API。MediaDevices提供了查詢和訪問媒體輸入設備的方法；RTCPeerConnection提供建立點和點之間連接的方法，並維護和監聽連接，建立連接的點和點之間可以傳輸視頻流和音頻流；RTCDataChannel可用於點和點之間雙向傳輸任意數據的網路通道；WebRTC現今已然成為Web端最為重要的多媒體通信解決方案。可以不依賴瀏覽器插件實現基於瀏覽器建立音視頻和數據的傳輸，為Web開發者提供了豐富多彩的實時多媒體功能；

3.6.其他常用特性

• History API與單頁應用：單頁應用是指Web應用可以無刷新在不同的頁面間切換，並且頁面訪問記錄會被瀏覽器保存，從而支持瀏覽器的前進、後退和刷新等操作；HTML5在History對象山新增了pushState和replaceState API配合在window對象上新增的popState事件使用，可以實現單頁應用功能；
• Drag和Drop介紹：在沒有提供Drag和Drop功能之前，開發者需要通過元素的mousedown、mousemove、mouseup等事件來實現拖放和拖拽效果；HTML5新增的Drag和Drop功能不僅另外提供一套規範的事件格式，而且還支持桌面文件到瀏覽器的拖放，大大簡化了開發複雜度；
• 利用Web Workers加速應用計算：JavaScript是單線程運行，如果某個操作非常耗時，頁面將會處於“假死”狀態；Web Workers賦予了JavaScript多線程運行的能力，可以將耗時操作放在Web Workers線程里運行，防止頁面出現假死；
• 利用Performance API分析網站性能：早期搜集網站性能需要在頁面里插入相應的腳本，監聽頁面不同時期的事件，比如DOMContentLoaded事件。這種方式侵入性強，且能收集的信息比較少；HTML5裡面提供了可以獲取頁面載入詳細性能指標的Web Performance API，通過window.performance對象暴露給開發者；window.performance.timing對象包含了完整的網頁載入性能數據；

第四章 CSS3必會實戰技巧

• CSS3作為CSS技術的升級版本，已經在移動端被廣泛使用，比如圓角、透明度、陰影、動畫、響應式等功能

4.1.認識CSS3

• CSS中文意思是層疊樣式表，是一種用來佈局和美化網頁的樣式表語言
• 什麼是CSS3：1.選擇器：新增的選擇器可以減少多餘的Class、ID或JavaScript的使用；2.盒模型：提供box-sizing屬性來改變預設的CSS盒模型對元素寬高的計算方式；3.個性化字體：@font-face規則的引入允許開發者為網頁指定線上字體，常見的一個用途是IconFont；4.自適應佈局：提供calc函數在渲染時動態計算屬性值，常用在自適應佈局當中；5.還有很多其他激動人心的新特性，比如（圓角邊框、字體陰影這種以前只能通過圖片實現的效果；響應式佈局Media Queries、彈性佈局Flexbox、多列佈局Multi-column Layout；媲美原生應用的過渡與動畫效果；）
• 移動Web的CSS3現狀：如果想知道某個CSS3的屬性在特定瀏覽器的支持情況，可以使用網站caniuse.com
• 用Modernizr檢測瀏覽器是否支持CSS3：Modernizr，一個用於檢測用戶瀏覽器的HTML5與CSS3特性的JavaScript庫；要實現瀏覽器動態特征檢測，一般有如下兩種思路（第一種使用JavaScript獲取到User Agent，然後根據User Agent判斷瀏覽器的版本，再根據瀏覽器的版本，來確定哪些屬性是在當前瀏覽器里支持的。缺點是並不准確；Modernizr採用的思路是直接JavaScript裡面使用指定屬性，如果成功執行則說明支持；Modernizr提供另外一個重要功能，自定義特征檢測。當瀏覽器是Internet Explore7時，Modernizr會添加“ie7”樣式類名到HTML元素，並且在JavaScript裡面調用Modernizr.ie7返回true；）

4.2.選擇器

• 常見選擇器
• 偽類和偽元素：偽類用來指定選擇器的某種特定狀態或者條件，偽類在DOM中並不存在，但對用戶是可見的；動態偽類對除了其名稱、屬性或內容之外的特征的元素進行分類，不會顯示在文檔源或文檔樹中；偽元素是指不存在於文檔樹中的抽象內容；
• 優先順序和權重：CSS中的權重分為4個級別：內聯樣式style；ID選擇器；類、偽類，屬性選擇器；元素、偽元素；還有一個特殊的規則就是“!important”，可以將對應得規則提升到最高的權重；合理的規劃CSS選擇器權重是完成一個易於維護項目的良好開端；

4.3.響應式開發

• 常見設備的寬高：響應式開發的本質是針對多種屏幕做適配；首先得掌握幾個基本概念：物理像素、設備獨立像素、屏幕像素比；通過設置viewport屬性，可以調整用戶界面的邏輯大小，頁面CSS中的大小均以viewport為基準；
• Flex彈性盒佈局：在Flex出現之前，佈局基於盒模型，依賴display、position和float樣式屬性；1vw指的是當前頁面viewport的寬度的1/100；採用Flex佈局後，子元素的樣式float、clear和vertical-align失效；
• 媒體查詢：解析度的差異化擴大，使得不得不根據屏幕的解析度給用戶呈現不同的界面；採用媒體查詢，可以給不同的設備應用不同的樣式；
• 用rem開發響應式設計：rem是指相對於根元素的字體的大小
• 多列：CSS3多列佈局是塊級佈局模式的擴展，允許通過簡單的定義實現文本的多列佈局效果；需要強調的一點是，多列佈局是針對文本排列的佈局，跟通常頁面的左、中、右三列佈局是兩個概念；

4.4.動效

• 轉換：W3C組織分別在2009年3月發佈了3D變形動畫標準草案和2D變形動畫標準草案，草案允許開發者對元素進行移動、縮放、旋轉和傾斜
• 過渡：CSS3動畫包含Transtion和Animation兩種，都可以通過改變元素的CSS屬性來實現動畫效果；transition: property duration timing-function delay；
• 動畫：CSS3 Animation適用於所有塊狀元素和內聯元素，通過定義動畫中的關鍵楨來實現複雜的動畫效果；animation: name duration timing-function delay iteration-count direction；

4.5.常用特性

• CSS3中一些常用特性，包括開放字體格式、背景、顏色、文字效果、邊框和用戶界面
• 開放字體格式（WOFF）：開放字體格式（Web Open Font Format，簡稱WOFF），是一種網頁採用的字體格式標準；WOFF包含了基於SFNT的字體（如Postscript、TrueType和OpenType等開放字體格式）；優點是有效利用壓縮減少檔案大小，並且不包含加密也不受著作許可權制；
• 背景：其中background-size、background-origin、background-clip是CSS3中新增的屬性
• 顏色：常用來設置字體顏色，還用在元素的背景顏色、線性漸變和徑向漸變
• 文字效果：其中常用的4種：text-shadow、text-overflow、word-wrap、word-break
• 邊框：border-radius、border-image、box-shadow

4.6.預編譯

• CSS語言主要缺乏的語言特性有：變數、運算、迴圈、函數、作用域
• 常用的預編譯語言主要有Less、Sass、Stylus等

第五章 JavaScript關鍵語法及使用技巧

5.1.理解JavaScript

• JavaScript是瀏覽器所支持的一種腳本語言，是ECMAScript語言的一種實現，基於原型、多範式的動態腳本語言，並支持面向對象、命令式和聲明式（如函數式編程）編程風格
• JavaScript包括DOM(文檔對象模型)和BOM(瀏覽器對象模型)
• 語言基礎：1.變數；2.數據類型；3.運算符；4.條件；5.迴圈；6.函數；7.異常
• 函數和參數：官方的解釋：函數是由事件驅動的或者當它被調用時執行的可重覆使用的代碼塊；函數聲明：函數式、變數式；arguments並不是一個數組

5.2.事件

• 事件概述：事件是一種非同步編程的實現方式，是程式各個組成部分間的通信；事件不是JavaScript對象，只是一種傳遞信息的機制，所以事件本身不能承載任何數據內容；瀏覽器通過JavaScript的Event對象來承載事件數據信息。當事件發生時，瀏覽器將被觸發元素、發生位置等相關的原始數據存入Event對象，然後程式通過事件監聽獲取響應數據；需要瞭解的幾個概念（事件類型、事件目標、事件處理程式、事件對象、事件傳播）
• 事件委托：早期的事件模型通過DOM元素屬性實現，即直接以對象屬性的形式為DOM元素註冊事件，稱之DOM事件模型；DOM2事件模型主要實現兩點技術：支持為同一DOM元素註冊多個同類型事件；把事件分為捕獲階段和冒泡階段；DOM2事件模型通過元素對象的addEventListener方法為其添加事件監聽，在多次監聽事件時，不會像之前那樣彼此覆蓋，每一個監聽均有效；將事件交給父元素或祖先元素處理的方式叫做事件委托；事件委托主要兩個優點：提高性能：每一個函數都會占用空間，只添加一個事件處理程式，所占用記憶體空間少；動態監聽：使用委托可以監聽未來元素；
• 專為移動端設計的事件主要包含三類：觸摸事件、手勢事件和感測器事件

5.3.作用域、閉包和this

• 在JavaScript中，函數是“第一類對象”，這讓JavaScript函數可以被存入變數或其他結構，也可以被作為其他函數的返回值，或者被作為參數傳遞給其他函數
• 閉包可以用來保存中間計算結果，類似於實現了計算結果的緩存
• 閉包另一個使用場景是實現內部變數的封裝，即使用匿名函數封裝私有成員的單例模式
• JavaScript的this關鍵字表示函數運行時生成的內部對象。和變數的搜索過程不同，this的值從執行上下文中獲取，而不會在作用域鏈中搜尋
• 函數的調用方式有以下幾種：作為函數調用、作為對象方法調用、作為構造函數調用以及使用call和apply調用

5.4.面向對象

• JavaScript是一種基於對象。但書寫上又不同於傳統面向對象編程的一門語言
• 原型和原型鏈：在JavaScript中繼承由原型鏈來實現，對象原型的概念常常會困惑許多JavaScript的初學者，而事實上基於原型的繼承模型比傳統的類繼承更要強大，javascript可以通過原型的繼承來模擬類繼承，而一個類繼承的模型想要模擬原型繼承卻要難的多；創造對象和生成原型鏈的方法主要有四種：1.使用普通語法創造對象；2.使用構造器創造對象；3.使用Object.create創造對象；4.__proto__、prototype和constructor；
• Mixin模式：JavaScript通過原型鏈實現繼承關係，但該繼承基於單一的原型鏈，單一原型鏈意味著只能繼承唯一原型；Mixin模式是開發者引入解決多重繼承的方案。Mixin實現多重繼承簡單說是一種組合；
• ECMAScript6的Class和Extends：對於傳統面向對象語言的開發者，原型鏈是很容易讓人產生困惑的，Class和Extends作為語法糖解決了開發者對於JavaScript繼承的困惑；Extends實現的繼承相比原型鏈的方式更加直觀，子類需要在constructor構造函數中調用super方法執行父類構造函數

5.5.非同步編程

• Ajax中的Callback回調函數：通過監聽readystatechange事件，判斷readyState屬性的值
• Promise模式：通過Promise對象的then方法，獲取非同步成功回調的數據，通過catch方法，捕獲非同步調用的錯誤信息，同時then方法支持多次鏈式調用；通過Promise.all和Promise.race方法，可以容易的控制多個Promise並行執行
• 生成器Generator：Iterator是ECMAScript6的新語法，遍歷器對象可以採用for...of迴圈遍歷其所有子項；由於生成器的特性，每次調用next方法執行一個區間的代碼，即生成器提供了分段執行機制

5.6.模塊化

• 以功能塊為單位進行程式設計，實現其求解演算法的方法稱為模塊化，原則是“高內聚，低耦合”
• “高內聚”儘量減少不同文件中函數的交叉引用，“低耦合”是模塊與模塊之間要互相獨立
• 模塊化的目的是為了降低程式複雜度，使程式設計、調試和維護等操作簡單化
• 為什麼需要模塊化：在JavaScript發展初期，Ajax並未普及，JavaScript還只是一種“玩具語言”，用來在網頁上進行表單校驗、實現簡單的動畫效果；龐大複雜的應用需要一個團隊分工協作、進度管理、單元測試等，開發者不得不使用軟體工程的方法管理網頁的業務邏輯；模塊化的一些寫法的探索（1.原始寫法：把實現功能的一組函數放在同一文件中；2.添加命名空間：使用單全局變數的模式；3.立即執行的函數：實際就是匿名函數）
• AMD和CMD規範：時下流行的模塊化規範主要有CommonJS、AMD和CMD規範；Common.js規範的實現代表是Node.js，AMD規範的實現代表是RequireJS。CMD規範的實現代表是Sea.js；
• ECMAScript6標準的模塊支持：直到ECMAScript6才支持原生模塊化，其不但具有CommonJS規範和AMD規範的優點，而且實現得更加友好，語法較之CommonJS更簡潔、支持編譯時載入或者靜態載入、迴圈依賴處理得更加優秀；ECMAScript6模塊功能主要由兩個命令構成：export和import/export命令用於規定模塊的對外介面，import命令用於輸入其他模塊提供的功能；export命令規定的是對外的介面，必須與模塊內部的變數建立一一對應關係；

5.7.ECMAScript6其他常用功能

• 基礎數據類型的擴展：Number對象增加了一個極小常量EPSILON
• 使用解構賦值來簡化代碼：任何實現了Iterator介面的數據結構都可以使用數組方式解構
• 使用Babel插件提前使用新特性

第六章 HTML5移動開發實戰

• 通過多個實際開發場景，如地理定位、線上聊天、拍攝、播放器、動畫、3D等
• 在地圖上顯示行走軌跡：採用高德地圖；通過HTML5的navigator.geolocation.getCurrentPosition獲取當前地理位置；使用navigator.geolocation.watchPosition方法監聽地理信息的變化來顯示行走軌跡

6.2.仿原生相冊

• 通過touchstart、touchmove和touchend事件，實現左滑和右滑操作

6.3.使用Socket.IO製作小型聊天室

6.4.移動端拍照上傳實踐

• 功能包括拍照上傳、實時進度顯示和圖片預覽

6.5.利用Microdata進行SEO優化

• HTML5中引入了Microdata技術
• 該技術旨在讓網路更加智能，如提供信息獲取、信息過濾、Web自動服務等

6.6.製作一個帶字幕的視頻播放器

• 實例播放器包含3個常用功能按鈕：播放、快進和靜音
• WebVTT格式文件，全稱Web Video Text Tracks，中文意思是網路視頻文本軌道

6.7.使用Pixi.js製作“抓住開學君”游戲

• Pixi.js是一款高效並且開源的2D渲染引擎，主打支持硬體GPU渲染的WebGL API
• Pixi.js可用於開發交互圖形、動畫和游戲等“富視覺”應用

6.8.用Canvas製作刮刮卡

• Canvas是HTML5的新增元素，用於圖形的繪製，如繪製路徑、盒、圓、字元以及添加圖像

6.9.實戰演練：實現3D全景效果

• Transform：對元素應用2D或3D轉換
• 該屬性允許對元素進行旋轉、縮放、移動或傾斜

第七章 移動網頁樣式佈局實戰

• 有效的掌握移動端網頁樣式佈局，是成為一名合格的前端開發工程師的必要條件

7.1.靜態佈局的實際應用

• 靜態佈局的特點是佈局的大小不會隨著用戶調整瀏覽器視窗大小而變化
• 傳統PC端一般選擇960像素，這個寬度可以被所有現代瀏覽器適配，且能被主流屏幕寬度整除。而移動端一般選擇320像素
• 靜態佈局在移動端上的自適應：1.整體縮放；2.媒體查詢；
• 媒體查詢會使代碼量大幅增加，註意兩點：一是將不需要根據屏幕變化的屬性放到媒體查詢外，減少代碼冗餘；二是設置好需要的媒體查詢斷點

7.2.水平居中與垂直居中實戰

• 水平居中：行內元素，對其父元素設置樣式text-align為center；塊級元素，對自身設置樣式margin值為auto；塊級元素(固定大小)水平居中還可以採用絕對定位+負外邊距的方式實現；
• 自適應塊級元素水平居中：使用transform來達到效果；
• 行內元素垂直居中：單行文本設置元素高度等於行高即可；多行不固定高度可以通過設置padding實現；固定高度多行文本可以使用display:table-cell配合vertical-align:middle實現；
• 塊級元素的垂直居中：固定高寬就可以用絕對定位加負邊距來實現；不固定寬高需要通過translate變形函數來處理；
• 基於視口單位的解決方案：採用使用長度單位1vw表示視口寬度的1%；
• 基於Flexbox解決方案：目前推薦的最佳解決方案；

7.3.柵格系統實現響應式列表

• 柵格佈局是從桌面瀏覽器時代流傳下來的一種響應式佈局方式
• 柵格系統由容器（container）、行（Row）、列（Column）組成，行包含在容器之中，只有列可以作為行的直接子元素

7.4.Flex多欄佈局實戰

7.5.實戰演練：滬江網校首頁rem佈局實戰 24

7.6.實戰演練：側邊欄的滑進滑出效果

• 移動開發中，由於屏幕空間有限，經常會把一些菜單或功能浮窗隱藏在屏幕一側，當單擊展開按鈕時，以滑出的效果呈現內容

7.7.實戰演練：模擬原生的頁面切換效果

• Web應用中，頁面跳轉會導致資源重新載入，可能會產生長時間的白屏等待，所以為了實現仿原生應用的頁面切換效果需要以單頁Web應用的形式來呈現

7.8.提高Web動畫的性能實戰

• 使用CSS3動畫：在渲染DOM的時候，瀏覽器實際的工作是由上到下順序執行的；設置Transform屬性，在一些先進的瀏覽器中，該屬性會觸發一個新的圖層，甚至會啟動設備的硬體加速，這樣性能消耗的主要點僅僅集中在了圖層的組合上；樣式Opacity也是一個會觸發GPU加速的CSS屬性；
• 使用高性能的JavaScript動畫：1.去除佈局顛簸（分離獲取和設置，是瀏覽器對於同一時間的一系列操作可以優化為一個單一的操作；一些迴圈調用中setTimeout或者setInterval進行動畫調用時，不合理的時間設置也會導致頁面卡頓，這時候推薦使用requestAnimationFrame）；2.使用節流函數（反跳是調用動作n毫秒內，才會執行該動作，若在n毫秒內又調用此動作則將重新計算時間；節流則是先設置一個執行周期，當調用的時刻大於等於執行周期時則執行併進入下一個周期；如果要對JavaScript動畫進行更方便的優化，可以選擇使用優秀的第三方動畫庫，如Velicity.js）

7.9.實戰演練：課程分類列表實戰

7.10.本章小結

• 移動網頁佈局不同於傳統的PC端佈局，在設計和實現上需要著重考慮不同終端尺寸設備的還原，在技術選擇上越來越趨向於使用CSS3新特性

第八章 前端工程化實戰

• 軟體工程是一門研究如何系統化、規範化、數量化地開發和維護軟體的學科。包含兩方面內容：軟體開發技術和軟體項目管理
• 軟體工程的目標：在給定成本、進度的前提下，開發出具有適用性、有效性、可修改性、可靠性、可理解性、可維護性、可重用性、可移植性、可追蹤性、可互操作性和滿足用戶需求的軟體產品

8.1.前端工程化

• 沒有工程化的體系，效率、質量、合作和維護等便無從談起
• 前端工程化的必要性：1.規範代碼、2.進行JavaScript預處理、3.進行CSS預處理、4.自動編譯、5.縮減文件體積、6.還包括代碼共用、自動部署、工作流管理等
• 前端工程化的發展史：1.石器時代（只需要實現最簡單的內容呈現和表單提交。利用靜態的HTML代碼提供基本的瀏覽內容）；2.銅器時代（Web開發的組件化和非同步載入的實現）；3.農業時代（模塊載入規範應運而生，出現了很多基於該規範的，動態載入JavaScript代碼的框架）；4.工業時代（降低開發難度，前端MVC、MVP、MVVM框架如雨後春筍般誕生，如Backbone，React等；還出現了很多以自動化為目標的構建工具，如Grunt、Gulp和Webpack等）

8.2.工程化入門Grunt

• Grunt是一個基於JavaScript的強大的任務管理器，允許在終端機上完成驗證JavaScript語法，CSS壓縮、Sass編譯等任務。可以實現自動化構建、測試等
• Gruntfile文件的主要作用：配置或定義任務task；載入Grunt插件；

8.3.使用Gulp構建應用

• 使用Grunt構建項目涉及磁碟操作，構建效率較低。因此，基於流的Gulp應運而生
• gulp.src方法返回Stream對象，可以通過pipe方法將內容傳遞給插件
• Babel可以將JavaScript文件，甚至React的JSX文件編譯為標準的JavaScript文件
• indexedDB通過版本來管理資料庫的結構，因此必須在upgradeneded事件中修改資料庫或者對象存儲的代碼

8.4.使用Webpack構建應用

• Webpack是一個模塊載入器兼打包工具能把各種資源，例如腳本（JavaScript、Typescript、JSX）、樣式（CSS、Less、Sass）、圖片（png、jpg、gif）等都作為模塊來處理
• 載入器的作用是對項目中的源文件進行格式轉換，以函數的形式存在，接收源文件作為輸入參數，輸出轉換後的資源文件
• Webpack引用模塊時，指定模塊路徑的方式分為三種：相對路徑、絕對路徑和模塊路徑
• 單頁應用預設所有資源都會被編譯到一個統一的文件中
• require.ensure只會載入模塊，不會執行模塊，所以一定要在回調函數里使用require執行請求的模塊

第九章 移動Web常用開發方式實戰

• 移動Web開發者已漸漸從早期基於DOM的開發方式，逐漸向MVC/MVVM類庫框架遷移，比較有代表性的框架有React和Vue.js，原有的多頁開發模式變為單頁應用模式

9.1.基於DOM的開發方式

• Zepto是一款小巧的JavaScript類庫，其大多數API都與jQuery保持一致
• 解決原生單擊事件的缺陷：雙擊縮放，300毫秒延遲問題
• 為何拋棄掉Zepto：Touch模塊增加了一種新的tap事件來去除單擊延遲，卻產生一個新的被稱為“點透”的問題；Zepto在基礎的DOM操作上額執行效率也是遠遠差於其模仿對象jQuery；
• 目前主流的JavaScript框架所融入主要設計思想：1.MVC以及MVVM、2.前端路由、3.觀察者模式、4.模塊化以及組件化、5.數據綁定與狀態管理、6.Virtual DOM

9.4.打造單頁應用SPA

• 單頁應用的理念是所有的代碼（HTML、JavaScript、CSS）在一次頁面載入中獲取，或者部分資源在頁面需要的時刻被動態載入
• 通過路徑的Hash值或者HTML5的History API提供的技術，在單一頁面內實現頁面跳轉切換，但實際沒有重新載入頁面
• 單頁應用的優勢是什麼：單頁應用主要依賴兩種技術：一種是JavaScript的框架提供渲染和頁面切換的能力，另一種是Ajax提供前端頁面和伺服器端數據交互的能力
• 實戰演練：實現一個單頁路由：Web實現路由有兩種技術模式：基於Hash、基於History API；參考React Router或者axios（Vue2.0推薦路由）的源碼；
• 實戰演練：使用React開發一個簡單的單頁應用
• 單頁應用的狀態管理

第十章 混合式開發實戰

• 混合式開發的理念綜合了原生和Web開發的特性，通常定義為開發一個在原生容器使用Web技術的混合式應用 31

10.1.為什麼需要混合式開發

• 混合式開發種類：1.WebView模式（代表是PhoneGap和Cordova，主要通過HTML、CSS、JavaScript放置在WebView中執行）；2.JavaScriptCore模式（全新的開發模式，即通過JavaScript調用原生代碼渲染原生控制項）；3.微信小程式（獨立設計了一套語法對應傳統的HTML、CSS和JavaScript。學習了React Native類框架直接渲染原生組件提升性能，在利用離線緩存獲得流暢的體驗）；4.Flutter（激進的實現整個UI層，可以通過Dart語言直接控制完成。曾希望Dart能夠替代JavaScript在瀏覽器中的地位）
• 混合式開發的優勢：跨平臺、快速發佈、功能提升
• 選擇合適的混合式開發方案：綜合三點（開發效率、用戶體驗、項目複雜度）；選擇分析（如果有現成的應用並且具有一定的原生開發能力，只需要讓Web頁面嵌入APP中實現一些動態展示。則可以選擇自行實現一套WebView擴展方案，將原生能力暴露到WebView中；內嵌的H5頁面比較複雜或者需要構建一個完整的APP，且開發者更專長於Web技術，適合PhoneGap或Cordova這類方案；解決WebView在Android系統中的機型差異性；React Native或Weex這類技術，既可以實現完整的應用也可以嵌入APP作為其中的一部分。接近原生應用的體驗，存在平臺相容性問題和複雜場景性能問題）

10.2.Cordova 開發入門

• JavaScript和native互相調用：混合式開發的本質是JavaScript代碼和native代碼的互相調用；1.Native調用Web（Android端中Java實現：webView.loadUrl("javascript:(function(){alert('調用來自Native')})()")；iOS端中Swift實現：webView stringByEvaluatingJavaScriptFromString(from: "alert('調用來自Native')")）；2.Web調用Native（Native調用Web是JavaScript腳本的動態執行，而Web調用Native則是原生獲得JavaScript端數據，然後執行或映射到原生代碼的過程；Android端目前最主流的方法，WebView.addJavascriptInterface，這種方法能將Java中的對象映射到JavaScript中，調用JavaScript對象下的函數，會觸發原生對象下的函數）；
• Cordova介紹和安裝：Cordova是一個基於WebView的跨平臺解決方案，其核心組成部分是插件；幾乎所有代碼都需要在監聽到deviceready事件後執行，即表示Cordova能力的註入是在WebView創建後；

10.3.React Native

• 最大的優勢是其使用JavaScript作為Bridge調用原生方法和組件，兼顧了性能和開發效率
• 打包出來的是JSbundle，需要通過原生容器啟用
• React Native的樣式和佈局是一套以Flexbox為基礎的CSS子集方案
• API是其內部暴露的方法，通過JavaScript對象調用，可以用來獲得一些原生提供的能力，類似Cordova中插件提供的功能
• AppRegistry，整個JavaScript需要調用此API實現在原生應用處的註冊，原生應用通過對應的AppRegistry.runApplication來運行程式

第十一章 前端開發調試實戰

• 瀏覽器調試、代理工具、多終端同步工具、模擬器調試、多平臺調試、雲真機調試和React調試

11.1.瀏覽器調試

• chrome開發工具
• safari開發者工具

11.2.代理工具

• 通過代理工具可以抓包查看網路請求的具體細節
• 可以將線上的文件代理成本地文件，不用重覆上線就能調試線上問題
• 兩種常用的代理工具：Mac OS下的Charles（通過將自己設置成系統的網路訪問代理伺服器，使得所有的網路訪問請求都通過Charles來完成，從而實現了網路封包的截取和分析）；Windows下的Fiddler（能夠在本機和服務端之間建立一個代理，通過這個代理，對所有通過的請求和響應進行攔截、修改和分析等。也可以把網站上的靜態文件代理為本地的文件，簡化調試的流程）

11.3.多終端同步工具

• 兩個比較常用的多終端同步工具BrowserSync和EmmetLiveStyle
• BrowserSync能讓瀏覽器實時、快速響應文件更改並自動刷新頁面，文件包含HTML、JavaScript、CSS、Sass、Less等
• Browsersync可以同時在PC、平板、手機等設備下進行調試，一次修改保存，所有設備都會同時顯示改動後的效果
• 雙向自動刷新樣式工具EmmetLiveStyle

11.4.模擬器調試

• 模擬器是運行在本地電腦上的虛擬設備，有效地緩解了開發人員無法獲取大量物理設備的難題
• 比較常用的Android模擬器軟體推薦Genymotion
• IOS模擬器需要藉助Mac OS系統下的XCode工具
• 線上Android模擬器Manymo

11.5.多平臺調試

• 目的在於對多個設備測試和調試，主要解決相容性問題和提供測試、調試的工作效率
• Ghostlab是一款Mac應用程式，用於在多設備上進行站點和Web App的同步化測試
• 移動端Web開發調試工具Weinre
• Vorlon.JS是微軟提供的一款用於JavaScript遠程調試和測試的開源工具，幫助開發者載入、檢查、測試及調試任何設備上使用Web瀏覽器運行的JavaScript代碼

11.6.雲真機調試

• BrowserStack是一個多系統跨瀏覽器相容性線上測試工具，支持1100多種真機和桌面瀏覽器的雲端線上測試
• STF是一個可以很舒適的在瀏覽器中遠程調試和管理智能手機、智能手錶和其他小工具的Web應用程式
• 多瀏覽器相容性測試平臺F2etest

11.7.React調試

• React Developer Tools是Facebook提供給開發者的用於調試使用React渲染的系統工具
• Redux DevTools是一個Redux開發測試工具，可以對Redux應用的狀態進行記錄、回放、實時編輯等

第十三章 前端性能優化實戰

13.1.常用網站性能優化指標

• 1.網頁的資源請求與載入階段
• 2.網頁渲染階段
• 3.JavaScript腳本的執行速度

13.2.依舊有效的Yahoo性能優化法則

• 1.減少HTTP請求
• 2.壓縮CSS和JavaScript代碼
• 3.去除重覆引用的腳本
• 4.可緩存的Ajax
• 5.延遲載入非必要腳本
• 6.預載入
• 7.減少DOM元素數量
• 8.減少DOM訪問次
• 9.避免使用Iframe
• 10.優化圖像
• 11.優化CSS Sprites
• 12.不要在HTML中縮放圖片
• 13.減少cookie體積

13.3.性能優化工具使用實戰

• 1.YSlow：依據雅虎法則中23條可測試的性能法則構建的網站性能分析工具
• 2.PageSpeed：Google公司提供的一款性能優化分析工具
• 3.WebPageTest：Google開源項目“Make the Web Faster”的子項目線上版本

13.4.HTTP協議頭緩存實戰

• 1.客戶端緩存流程
• 2.緩存協議內容：HTTP頭中關於緩存相關的屬性（1.Expires：指定緩存過期的時間；2.Cache-Control：比Expires策略更詳細，優先順序比Expires高；3.Last-Modified/If-Modified-Since：指定響應資源的最後修改時間；4.ETag/If-None-Match：區別資源內容的唯一標識，需要配合Cache-Control使用）
• 3.實戰演練：HTTP緩存

13.5.資源按需載入實戰

• 1.基於RequireJS的按需載入：採用非同步載入模塊，因此模塊載入不會影響後續代碼的運行；AMD通過require函數載入模塊，接受兩個參數module和callback；
• 2.基於Webpack的按需載入：CommonJS規範雖然本身採用同步載入模塊，但也提出了Modules/Async/A規範，定義了一套require.ensure用於處理非同步載入
• 3.圖片懶載入：懶載入的原理是通過監聽頁面滾動事件，當圖片進入可視區域時，再進行圖片的載入；真實的業務場景中還需要考慮用戶下拉速度、頁面高度的固定性、iScroll等第三方插件庫的使用情況；

13.6.不同網路類型的優化實戰

• 1.獲取網路類型：開發者可以通過navigator.connection.type獲取網路類型，包括unknown、Etherne、WIFI、2G、3G、4G、none
• 2.弱網圖片優化：僅將小圖標整合到雪碧圖，並控制每張雪碧圖的體積，如果超過了上限，則整合第二張雪碧圖
• 3.弱網緩存優化：開發者可以選擇在記憶體中緩存請求數據

13.7.實戰演練：Nginx配置Combo合併HTTP請求

• 1.安裝Nginx和文件合併模塊
• 2.配置Nginx和Combo

13.8.本章小結

• Web優化的黃金法則中指出對於訪問一張網頁只有10%-20%的時間花在下載伺服器端響應的HTML文件，80%-90%的時間用在前端資源的下載和執行，比如CSS、JavaScript、Images等

第十四章 項目實戰：搭建直播平臺

• 項目中引用Crosswalk來提供一個統一的WebView，用以解決WebRTC的相容問題
• 直播的流程由採集、推流、拉流、解碼、播放等環節組成
• 由於WebRTC需要HTTPS的支持，本例中採用自簽證書的方式實現HTTPS
• HLS是由Apple提出的一種基於HTTP協議的線上視頻播放解決方案，由播放列表文件(格式為M3U8)和視頻片段(格式為TS)組成
• 在實際的項目中部署Node.js時，為了提升系統的擴展性，可以使用PM2啟動並開啟Cluster模式
• 採用FFmpeg組件對視頻進行轉碼
• 該項目涉及的新技術有WebRTC、WebSocket、React、FFmpeg等

直播流程

• 採集：發起端通過Navigator對象的getUserMedia方法調用本地攝像頭採集視頻流
• 推流：發起端將視頻流通過WebSocket上傳到伺服器
• 編碼：伺服器使用FFmpeg視頻框架將視頻編碼為TS格式存儲
• 拉流：觀看通過HLS從伺服器拉取編碼後的音視頻流
• 觀看端解碼音視頻流
• 觀看端播放解碼後的音視頻流

視頻直播採用HLS技術實現思路

• 採用WebRTC介面獲取音視頻信息
• 採用MediaRecorder定時錄製視頻片段並上傳到伺服器
  -- 伺服器保存視頻片段並生成M3U8格式文件
• 其他參與直播的客戶端直接採用M3U8播放直播視頻

寫在後面

• pdf書籍、筆記思維導圖、隨書代碼打包下載地址：https://pan.baidu.com/s/1pi0CgI3LFnIdi2DPawKU9w(提取碼：2942)
• 紙質書京東購買地址：後面補上（推薦使用紙質書來學習）
• 為了方便在手機上查看，後面我會把這些筆記陸續發佈到公眾號“派三派四”，可以掃碼關註一下，歡迎關註。