移動WEB前端開發(fā)

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

駱飛老師的其它課程