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

寫在前面

• 書籍介紹：《移動WEB前端高級開發實踐》這本書的內容涵蓋了移動Web前端開發中的各個關鍵技術環節。分別從HTML五、CSS三、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)
• 紙質書京東購買地址：後面補上（推薦使用紙質書來學習）
• 爲了方便在手機上查看，後面我會把這些筆記陸續發佈到公衆號「派三派四」，能夠掃碼關注一下，歡迎關注。