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

寫在前面

• 書籍介紹：《移動WEB前端高級開發實踐》這本書的內容涵蓋了移動Web前端開發中的各個關鍵技識訓節，分別從HTML5、CSS3、JavaScript的ECMAScript5和ECMAScript6版本、移動端常用布局方案、MV*類新時代框架、預編譯技術、性能優化、開發除錯、混合式應用、單元測驗、工程化等方面全面地還原了一線互聯網公司Web前端技術堆疊，
• 我的簡評：這本書內容量很大，全面地總結了前端技術堆疊相關的各種技識訓節的優秀實踐，對于技術水平還處于低中級的朋友，推薦將這本書反復多讀幾遍，依照書中的介紹到的各個關鍵技識訓節，來對自己的學習查漏補缺，
• ！！福利：文末有pdf書籍、筆記思維導圖、隨書代碼打包下載地址，覺得有用，記得點贊或收藏哦！想看看[書籍精讀]系列所有文章，請移步：[推薦收藏]JavaScript書籍精讀筆記系列導航
• 該系列文章原稿鏈接：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)
• 紙質書京東購買地址：后面補上（推薦使用紙質書來學習）
• 為了方便在手機上查看，后面我會把這些筆記陸續發布到公眾號“派三派四”，可以掃碼關注一下，歡迎關注，
  

標籤：JavaScript

上一篇：JavaScript常量和變數、運算式 —— 基礎語法（3）

下一篇：JavaScript連載6-轉化為Number和Boolean型別、運算子