移動(dòng)WEB前端開發(fā)

移動(dòng)WEB前端開發(fā)
課程介紹
移動(dòng)互聯(lián)網(wǎng)的興起和快速普及，給前端開發(fā)人員帶來了新機(jī)遇。移動(dòng)Web前端技術(shù)作為整個(gè)技術(shù)鏈條中重要的一環(huán)，卻亂象叢生。本課程是一門梳理移動(dòng)前端和Native客戶端技術(shù)體系的入門實(shí)戰(zhàn)課程。本課程涵蓋了移動(dòng)Web前端開發(fā)中的各個(gè)關(guān)鍵技術(shù)環(huán)節(jié)，共13部分。分別從HTML 5、CSS 3、JavaScript的ECMAScript 5和ECMAScript 6版本、移動(dòng)端常用布局方案、MV*類新時(shí)代框架、預(yù)編譯技術(shù)、性能優(yōu)化、開發(fā)調(diào)試、混合式應(yīng)用、單元測試、工程化等方面全面地還原一線互聯(lián)網(wǎng)公司W(wǎng)eb前端技術(shù)棧。
課程目標(biāo)
創(chuàng)作本課程的初衷是幫助移動(dòng)Web前端開發(fā)領(lǐng)域的工程師們，勾畫出一張實(shí)用并且具體的技術(shù)圖，幫助讀者正確且快速地掌握學(xué)習(xí)路徑。本課程時(shí)間有限，力求精簡，包括大量基于Web前端的優(yōu)秀開源技術(shù)類庫和框架介紹，是進(jìn)入移動(dòng)Web開發(fā)領(lǐng)域的實(shí)用課程。
課程大綱：
第1章 初識(shí)移動(dòng)Web前端1．1 移動(dòng)Web前端史
Web開發(fā)的變遷
移動(dòng)Web與HTML 5不得不說的關(guān)系
移動(dòng)Web與原生應(yīng)用的優(yōu)劣勢
1．2 移動(dòng)Web前端現(xiàn)狀與未來
移動(dòng)Web的現(xiàn)狀
您需要掌握的知識(shí)體系
技術(shù)拐點(diǎn)與未來趨勢
1．3 常見問題
移動(dòng)Web前端開發(fā)有前景嗎
PC Web和移動(dòng)Web開發(fā)區(qū)別
1．4 本章小結(jié)
第2章 移動(dòng)Web開發(fā)環(huán)境搭建
2．1 Visual Studio Code免費(fèi)跨平臺(tái)編輯器
2．2 使用Node．js
Node．js的用途
安裝和調(diào)試Node．js
什么是NPM
Web代理工具NProxy
HTTP服務(wù)器http-server
2．3 本章小結(jié)HTML 5 必會(huì)實(shí)際常用特性
3．1 新的語義
新元素的到來
表單的增強(qiáng)應(yīng)用
使用音頻和視頻
3．2 訪問你的設(shè)備
定位當(dāng)前地埋位置
實(shí)戰(zhàn)演練：調(diào)用攝像頭拍個(gè)照
實(shí)戰(zhàn)演練：在手機(jī)上實(shí)現(xiàn)搖一搖
3．3 離線和存儲(chǔ)
實(shí)戰(zhàn)演練：搭建一個(gè)簡單的離線應(yīng)用
離線之后資源該如何更新――Service Worker
LocalStorage與SessionStorage
實(shí)戰(zhàn)演練：利用IndexedDB實(shí)現(xiàn)便簽管理
3．4 圖像效果
使用Canvas繪制一個(gè)簡單的餅圖
使用SVG實(shí)現(xiàn)奧運(yùn)五環(huán)
WebGL帶來了3D圖像功能
3．5 不一樣的通信
PostMessages
XMLHttpRequest Level 2
Server Sent Event
WebSocket
WebRTC
3．6 其他常用特性
History API與單頁應(yīng)用
Drag和Drop介紹
利用Web Workers加速應(yīng)用計(jì)算
利用Performance API分析網(wǎng)站性能
3．7 本章小結(jié)
CSS 3 必會(huì)實(shí)戰(zhàn)技巧4．1 認(rèn)識(shí)CSS 3
什么是CSS 3
移動(dòng)Web的CSS 3現(xiàn)狀
用Modernizr檢測瀏覽器是否支持CSS 3
4．2 選擇器
常見選擇器
偽類和偽元素
優(yōu)先級(jí)和權(quán)重
4．3 響應(yīng)式開發(fā)
常見設(shè)備的寬高
Flex彈性盒布局
媒體查詢（Media Query）
用rem開發(fā)響應(yīng)式設(shè)計(jì)
多列（Multiple Columns）
4．4 動(dòng)效
轉(zhuǎn)換（Transform）
過渡（Transition）
動(dòng)畫（Animation）
4．5 常用特性
開放字體格式（WOFF）
背景（Backgrounds）
顏色（Color）
文字效果（Text Effects）
邊框（Border）
4．6 預(yù)編譯
Less介紹和安裝
Less使用
Sass介紹和安裝
Sass使用
Compass的安裝和使用
4．7 本章小結(jié)
第5章 JavaScript關(guān)鍵語法及使用技巧
5．1 理解JavaScript
語言基礎(chǔ)
函數(shù)和參數(shù)
5．2 事件
事件概述
事件委托
移動(dòng)端事件
5．3 作用域、閉包和this
使用let實(shí)現(xiàn)塊級(jí)作用域
閉包
采用call、apply、bind改變this
5．4 面向?qū)ο?
原型和原型鏈
Mixin模式
ECMAScript 6的Class和Extends
5．5 異步編程
AJAX中的Callback回調(diào)函數(shù)
Promise模式
生成器Generator
5．6 模塊化
為什么需要模塊化
AMD和CMD規(guī)范
ECMAScript 6標(biāo)準(zhǔn)的模塊支持
5．7 ECMAScript 6其他常用功能
基礎(chǔ)數(shù)據(jù)類型的擴(kuò)展
使用解構(gòu)賦值來簡化代碼
使用Babel插件提前使用新特性
5．8 本章小結(jié)
第6章 HTML 5 移動(dòng)開發(fā)實(shí)戰(zhàn) 6．1 在地圖上顯示行走軌跡
6．2 仿原生相冊(cè)
實(shí)現(xiàn)相冊(cè)初始展示頁
通過手勢操作控制相片
6．3 使用Socket．IO制作小型聊天室
前端HTML+JavaScript實(shí)現(xiàn)聊天界面
服務(wù)器端Node．js監(jiān)聽連接
6．4 移動(dòng)端拍照上傳實(shí)踐
前端HTML+CSS+JavaScript
服務(wù)器端Node．js
6．5 利用Microdata進(jìn)行SEO優(yōu)化
認(rèn)識(shí)Microdata
提升網(wǎng)頁SEO效果
6．6 制作一個(gè)帶字幕的視頻播放器
6．7 使用Pixi．js制作“抓住開學(xué)君”游戲（Canvas+WebGL）
6．8 用Canvas制作刮刮卡
6．9 實(shí)戰(zhàn)演練：實(shí)現(xiàn)3D全景效果
需要的CSS 3特性
實(shí)現(xiàn)原理
實(shí)現(xiàn)代碼
6．10 本章小結(jié)
移動(dòng)網(wǎng)頁樣式布局實(shí)戰(zhàn)
7．1 靜態(tài)布局的實(shí)際應(yīng)用
設(shè)計(jì)活動(dòng)頁面靜態(tài)布局
靜態(tài)布局在移動(dòng)端上的自適應(yīng)
7．2 水平居中與垂直居中實(shí)戰(zhàn)
水平居中
自適應(yīng)塊級(jí)元素水平居中
行內(nèi)元素垂直居中
塊級(jí)元素的垂直居中
基于視口單位的解決方案
基于Flexbox的解決方案
7．3 柵格系統(tǒng)實(shí)現(xiàn)響應(yīng)式列表
實(shí)現(xiàn)柵格布局
柵格布局的原理
7．4 Flex多欄布局實(shí)戰(zhàn)
7．5 實(shí)戰(zhàn)演練：滬江網(wǎng)校首頁rem布局實(shí)踐
7．6 實(shí)戰(zhàn)演練：側(cè)邊欄的滑進(jìn)滑出效果
7．7 實(shí)戰(zhàn)演練：模擬原生的頁面切換效果
實(shí)現(xiàn)頁面切換過渡效果
模擬切換原理解析
7．8 提高Web動(dòng)畫的性能實(shí)戰(zhàn)
使用CSS 3動(dòng)畫
使用高性能的JavaScript動(dòng)畫
7．9 實(shí)戰(zhàn)演練：課程分類列表實(shí)戰(zhàn)
實(shí)現(xiàn)主頁結(jié)構(gòu)
響應(yīng)式CSS實(shí)現(xiàn)（Compass）
添加頁面動(dòng)態(tài)效果
7．10 本章小結(jié)
前端工程化實(shí)戰(zhàn)
8．1 前端工程化
前端工程化的必要性
前端工程化的發(fā)展史
8．2 工程化入門Grunt
安裝和配置
Grunt插件
實(shí)戰(zhàn)演練：使用Grunt開發(fā)一個(gè)簡易相冊(cè)
8．3 使用Gulp構(gòu)建一個(gè)ECMAScript 6和Sass應(yīng)用
安裝和配置
預(yù)處理任務(wù)
實(shí)戰(zhàn)演練：采用ECMAScript 6開發(fā)一個(gè)Markdown編輯器
代碼檢查任務(wù)
代碼合并、壓縮、重命名任務(wù)
監(jiān)聽文件變化自動(dòng)構(gòu)建
8．4 實(shí)戰(zhàn)演練：使用Webpack構(gòu)建一個(gè)React應(yīng)用
安裝和配置
常用的加載器和插件
緩存控制
簡化模塊引用
異步模塊加載
使用Source Map調(diào)試代碼
8．5 本章小結(jié)
移動(dòng)Web常用開發(fā)方式實(shí)戰(zhàn)
9．1 基于DOM的開發(fā)方式
9．1．1 使用Zepto和前端模板開發(fā)簡單備忘錄
9．1．2 解決原生單擊事件的缺陷
9．1．3 為何拋棄掉Zepto
9．2 基于React的開發(fā)方式
使用JSX語法創(chuàng)建React組件
在實(shí)踐中掌握React生命周期
實(shí)現(xiàn)組件間通信
實(shí)現(xiàn)組件關(guān)注分離
實(shí)戰(zhàn)演練：運(yùn)用組件化方式開發(fā)一個(gè)備忘錄
如何管理應(yīng)用的狀態(tài)
添加動(dòng)畫效果
提高React組件性能
9．3 基于Vue．js的開發(fā)方式
實(shí)戰(zhàn)演練：開發(fā)一個(gè)簡單的備忘錄應(yīng)用（Vue．js 2．0）
管理應(yīng)用的狀態(tài)及實(shí)現(xiàn)組件間的通信
添加動(dòng)畫效果
9．4 打造單頁應(yīng)用SPA
單頁應(yīng)用的優(yōu)勢是什么
實(shí)戰(zhàn)演練：實(shí)現(xiàn)一個(gè)單頁路由
實(shí)戰(zhàn)演練：使用React開發(fā)一個(gè)簡單的單頁應(yīng)用
單頁應(yīng)用的狀態(tài)管理
9．5 本章小結(jié)
混合式開發(fā)實(shí)戰(zhàn)
10．1 為什么需要混合式開發(fā)
混合式開發(fā)種類
混合式開發(fā)的優(yōu)勢
選擇合適的混合式開發(fā)方案
10．2 Cordova開發(fā)入門
JavaScript和Native互相調(diào)用
Cordova介紹和安裝
Cordova開發(fā)使用
10．3 React Native實(shí)戰(zhàn)
React Native簡介
React Native樣式和布局
React Native組件概念
簡單組件實(shí)戰(zhàn)
復(fù)合組件實(shí)戰(zhàn)
第三方組件實(shí)戰(zhàn)
常用API實(shí)踐
10．4 實(shí)戰(zhàn)演練：用React Native開發(fā)新聞閱讀應(yīng)用
React Native的工程項(xiàng)目結(jié)構(gòu)一覽
列表頁
新聞評(píng)論頁
新聞?wù)故卷?
10．5 本章小結(jié)
前端開發(fā)調(diào)試實(shí)戰(zhàn)
11．1 瀏覽器調(diào)試
Chrome開發(fā)者工具
Safari開發(fā)者工具
11．2 代理工具
Mac OS下Charles的用法
Windows下Fiddler的用法
11．3 多終端同步工具
多設(shè)備瀏覽器同步測試工具BrowserSync
雙向自動(dòng)刷新樣式工具Emmet LiveStyle
11．4 模擬器調(diào)試
Android模擬器調(diào)試
iOS模擬器調(diào)試
在線模擬器Manymo
11．5 多平臺(tái)調(diào)試
網(wǎng)站響應(yīng)式設(shè)計(jì)測試工具Ghostlab
移動(dòng)端Web開發(fā)調(diào)試工具Weinre
JavaScript遠(yuǎn)程調(diào)試和測試工具Vorlon．JS
11．6 云真機(jī)調(diào)試
瀏覽器兼容性云端測試應(yīng)用BrowserStack
Web端移動(dòng)設(shè)備管理控制工具STF
多瀏覽器兼容性測試平臺(tái)F2etest
11．7 React調(diào)試
React Developer Tools
Redux DevTools
11．8 本章小結(jié)
前端單元測試實(shí)戰(zhàn)
12．1 JavaScript單元測試框架Jasmine實(shí)戰(zhàn)
12．2 使用Mocha和Chai在Node．js進(jìn)行單元測試
12．3 使用Sinon輔助單元測試
12．4 使用Karma自動(dòng)化單元測試
12．5 使用Istanbul計(jì)算代碼覆蓋率
12．6 使用Benchmark．js進(jìn)行基準(zhǔn)測試
12．7 實(shí)戰(zhàn)演練：React版?zhèn)渫涰?xiàng)目的完整單元測試
12．8 本章小結(jié)
前端性能優(yōu)化實(shí)戰(zhàn)
13．1 常用網(wǎng)站性能優(yōu)化指標(biāo)
網(wǎng)頁的資源請(qǐng)求與加載階段
網(wǎng)頁渲染階段
JavaScript腳本的執(zhí)行速度
13．2 依舊有效的Yahoo性能優(yōu)化法則
13．3 性能優(yōu)化工具使用實(shí)戰(zhàn)
YSlow
PageSpeed
WebPagetest
13．4 HTTP協(xié)議頭緩存實(shí)戰(zhàn)
客戶端緩存流程
緩存協(xié)議內(nèi)容
實(shí)戰(zhàn)演練：HTTP緩存
13．5 資源按需加載實(shí)戰(zhàn)
基于RequireJS的按需加載
基于Webpack的按需加載
圖片懶加載
13．6 不同網(wǎng)絡(luò)類型的優(yōu)化實(shí)戰(zhàn)
獲取網(wǎng)絡(luò)類型
弱網(wǎng)圖片優(yōu)化
弱網(wǎng)緩存優(yōu)化
13．7 實(shí)戰(zhàn)演練：Nginx配置Combo合并HTTP請(qǐng)求
安裝Nginx和文件合并模塊
配置Nginx和Combo
13．8 本章小結(jié)

駱飛老師的其它課程