H5前端高級開發(fā)

階段

內容

描述

階段 
開發(fā)語言基礎

基礎開發(fā)工具入門

軟件開發(fā)主流工具掌握；編程語言入門，Java程序設計：變量、數據類型、
運算符與表達式、分支與循環(huán)、數組；養(yǎng)成良好的軟件編程習慣，強化軟件開發(fā)基本功

開發(fā)語言基礎的鞏固、內存管理

加強和鞏固開發(fā)工具，掌握在Eclipse下開發(fā)/調試程序

00P面向對象

面向對象基本概念；面向對象特性：封裝（描述）、繼承、多態(tài)； 面向對象高級特性：內部類、抽象類、接口；異常處理；

API介紹

常用API,集合API，并了解Java的高級特性， 熟悉各種基本數據類型包裝類：String和StringBuffer等常用API

數據庫和SQL

掌握數據庫原理和SQL語句，鏈接數據庫的應用

I0概念、多線程、泛型

熟悉文件操作、字節(jié)流的操作和常見文件相關類, 分析I0性能，熟練使用常用包裝類I0；多線程；泛型與元數據（注解）；

設計模式理解

熟悉常用設計模式：Singleton、Template、Strategy、Adapter模式。 為搭建結構良好的Android應用程序奠定基礎。

主流WEB開發(fā)技術

了解 WEB開發(fā)技術的核心知識，拓展開發(fā)思路和眼界

第二階段,JS基礎

JS入門：事件、原理、屬性、樣式、函數、if判斷 
JS入門：style和行間樣式、函數傳參、屬性操作兩種方式 
字符串和變量、字面量和變量 
提取行間事件、onload、byTagName、數組 
循環(huán)、全選、選項卡、innerHTML、字符串連接 
調試工具的使用、如何調試JS 
變量類型、typeof、JS常見類型 
類型轉換、parseInt、NaN、隱式轉換 
作用域、閉包、命名規(guī)范、運算符、流程控制 
變量遮蔽 
JS中的隨機數、隨機顏色、隨機范圍、隨機不重復 
函數返回值 
深入理解函數返回值 
定時器：interval、timeout、時鐘、資料框、自動播放選項卡、京東商城側邊欄 
arguments、字符串操作、數組操作、Json 
循環(huán)外i的問題、函數定義和調用的區(qū)別、不變的變量 
D0M操作基礎：創(chuàng)建、添加、刪除 
B0M基礎：窗口操作、UA、location 
B0M應用：滾動、scrollTop、offset、clientHeight、瀏覽器類型檢測 
事件對象：冒泡、clientX、keyCode、ctrl/alt/shift、默認行為、拖拽 
閃爍提示、回放路徑的拖拽 
樹形菜單、多級右鍵菜單

第三階段 
JS中級+實戰(zhàn)

批量設置樣式：json、cssText、with 
location、hash、query的處理，刷新保存頁碼 
Date對象應用：setFullYear/Month等，時間戳、倒計時 
Date高級應用 
閉包的應用、封閉命名空間 
ajax無刷新數據加載：創(chuàng)建、發(fā)送、接收、字符集和緩存 
D0M應用：firstChild/lastChild、nextSibling/previousSibling 
操作屬性的第三方式、自定義屬性的獲取、src的相對路徑 
offsetParent、計算元素的頁面位置 
圖片延遲加載——迅雷 
簡易瀑布流——花瓣 
橫向瀑布流—— 
D0M與innerHTML、innerHTML的bug 
天貓、淘寶吸頂導航條 
天貓、京東placeholder輸入框 
永遠在頁面的右鍵菜單、提示圖片 
圖片預加載、Image對象的使用 
Image對象批量加載 
運動基礎、勻速運動、運動框架、側邊欄、淡入淡出 
緩沖運動、頁面提示框 
多物體運動框架、運動框架、鏈式運動框架、運動框架 
布局轉換、淘寶幻燈片 
運動應用：劃動提示層、百科數字框、新浪滾動微博 
永遠在頁面中放大的圖片 
無縫滾動 
手風琴幻燈片、淘寶網無縫滾動幻燈片 
this的用法、拖拽 
封裝可重用代碼 
拖拽、吸附拖拽、帶框拖拽 
程序思想——如何找思路，如何找規(guī)律，如何思考 
碰撞檢測、模擬窗口拖拽大小 
窗口拖拽大小的封裝和重用 
自定義滾動條、鼠標滾輪 
事件綁定、D0M事件流 
cookie基礎 
ajax高級應用：用戶注冊和登錄、表單提交 
后臺接口的使用、接口文檔 
編寫AJax的基本步驟 
Jsonp跨域的方法——下拉提示 
script標簽的怪異特性、callback的使用 
Jsonp標簽的管理 
封裝可重用的Jsonp方法 
ajax制作簡易新浪微博：后臺、接口、分頁、頂、頁碼 
其他常見數據格式及用法：CSV、XML 

JS中的預解析機制、script出錯時的處理機制 
預解析相關面試題 
遞歸及其各種應用 
遞歸相關面試題 
遞歸的性能問題、遞歸的優(yōu)化 
棧溢出的原因和處理 

引用、復制 
JS中的異常：try..catch的使用 
try的嵌套和性能問題 
拋出異常、Exception對象、異常和返回值的區(qū)別及用途 
JS變量生存周期、垃圾回收機制 
閉包與JS垃圾回收 
閉包的用法、保存i的值 

JS性能優(yōu)化——健壯性、維護性、性能的平衡 
性能瓶頸的識別——性能檢測工具的使用：Chrome profiles、YSlow等 
JS阻塞加載、圖片延遲加載、網絡性能優(yōu)化、壓縮、CDN的使用 
JS執(zhí)行性能優(yōu)化：D0M操作、循環(huán)、數組優(yōu)化、局部變量、eval、parseInt、系統(tǒng)函數、字符串連接、正則等 

實例：顏色選擇器組件 
實例：輸入字數統(tǒng)計 

正則表達式：RegExp對象、search方法、忽略大小寫 
match方法和全局匹配、量詞的問題、replace方法 
字符類、轉義字符、行首行為、中文、單詞邊界、括號 
正則應用：可重用的表單校驗 
自動表單校驗、批量表單校驗 

表格操作：tBodies、tHead、tFoot、rows、cells 
表格、排序 
自定義表單組件 
D0M文本節(jié)點：創(chuàng)建、兼容、應用 
firstChild怪異問題、childNodes的問題 
實例：google日歷 

domReady事件：優(yōu)點、D0MContentLoaded、defer、onload 
事件隊列、封裝ready事件函數 
事件委托（事件代理）：冒泡的使用、srcElement屬性、target屬性、this的檢測 
call的使用——解決this指向問題 
mouseleave事件——作用、封裝，徹底解決mouseout冒泡的問題 

運動高級：彈性運動、碰撞運動 
彈性應用：滑動導航

第四階段:JS面向對象

面向對象回顧：什么是面向對象、對象的組成、00P的特點、this的本質、0bject對象 
工廠方式構造對象、原型（prototype）、混合法構造JS對象、實例：面向對象的選項卡 
JS算法基礎：時間復雜度和空間復雜度 
數據結構基礎：線性和隨機、線性表、0表示法、數據結構基本操作 
線性表和排序：4大排序算法、適用范圍、蛻變和劣化、移動操作開銷 
樹和排序：樹的查找、添加和平衡 
散列：空間換取時間、空間利用率和算法效率 
圖：路徑算法、預處理和隨機處理 

模塊的規(guī)劃、接口 
模塊的加載、依賴、循環(huán)依賴 
模塊作用域和export 
script加載和同步、請求合并、壓縮代碼 
模塊的重用和沖突 

MVC基礎：3層模型和耦合度 
耦合的問題和消除 
數據獨立性、獨立數據模型 

設計模式：優(yōu)點、常見模式 
自定義事件、事件隊列管理、事件的傳遞、事件對象和參數、監(jiān)聽模式的問題 
數據隊列的管理、反向監(jiān)聽和解耦合、模塊獨立性

第五階段 
JQuery

JQuery基礎：$、選擇器、獲取元素、添加事件 
JQuery的選擇器：層級、屬性、偽類等 
樣式和屬性操作：css、attr方法、JQuery的鏈式操作和可選參數 
鼠標事件：click、hover、toggle 
JQuery特效：slideDown/slideUp、fadeIn/fade0ut 
JQuery動畫：animate、stop、速度控制、二級菜單 
mouseleave和mouseenter事件的使用 
實例：JQuery選項卡 
JQuery的D0M操作：創(chuàng)建、添加、插入、包裹、刪除 
JQuery的事件操作：冒泡、默認事件、事件綁定、事件委托、事件對象 
JQuery中的大小、位置：height()/width()、outerHeight()、position()、offset() 
JQuery中的其他操作：each、和D0M元素的轉換、class操作、html() 
JQuery工具：$.browser、$.trim() 
JQuery的Ajax：$.get()、$.ajax() 
實例：JQuery拖拽、JQuery留言板 
JQuery的各種bug 
JQuery插件的使用：fancybox 
編寫JQuery插件：靜態(tài)方法、extend() 
實例：自定義JQuery插件——選項卡、自定義組件

第六階段 
HTML5+CSS3

HTML5/CSS3新特性 
文檔頭和編碼聲明 
語義化標簽，HTML5標簽的兼容處理，HTML5標簽SE0
新的元素選擇器，HTML5中的選擇器 
本地存儲，安全性、容量、和cookie區(qū)別 
HTML5表單新特性，新的input類型，placeholder的使用和兼容，表單自動校驗 
FileReader和文件拖拽 
geoLocation
canvas，功能和操作，圖表、游戲和動畫 
WebGL，全3D網頁瀏覽 
video、audio
離線應用，Manifest文件編寫 
桌面提醒 
webSocket，優(yōu)點，和Ajax的區(qū)別 
webWorker，用途和優(yōu)點 
webSql
CSS3新特性，文本溢出，分欄模式，背景，圓角，陰影，漸變，transform，CSS3動畫，rgba等 
HTML5的應用范圍 
CSS3基礎 
css3與css2的區(qū)別，CSS3的兼容性，瀏覽器前綴，不需要前綴的樣式 
實例：CSS3旋轉 
JS設置CSS3樣式，setStyle3()的封裝，IE前綴的問題 
實例：CSS3運動框架基礎 
transition基本使用，transition的參數，不同運動形式的區(qū)別 
transition運用范圍，transition和JS平滑結合，transition的問題 
實例：純CSS3滑動二級菜單 
實例：淡入淡出幻燈片 
border-radius的使用，圓角的單位，圓角大小的測量（PS中），圓角的各種參數 
實例：圓角圖片框 
rgba的使用，rgba和opacity的區(qū)別，rgba的應用，rgba和漸變 
實例：半透明遮罩文字的新寫法 
text-shadow的用法，各種參數，配合rgba的另類用途 
實例：文字模糊效果 
box-shadow的用法，內投影和外投影，擴展陰影 
實例：CSS3按鈕 
實例：CSS3模擬PS的外發(fā)光效果 
實例：文本框模糊效果 
線性漸變的使用，最簡形式，漸變方向的控制，多點漸變和rgba的結合 
實例：CSS3進度條的繪制 
圓形漸變的使用，中心點位置，形狀和大小 
實例：CSS3彩虹圈 
CSS3變形和應用 
transform的作用，旋轉、縮放、位移、傾斜的使用，transform與內聯元素 
實例：各種變形的使用和組合 
rotate的使用，deg，origin的使用，origin的各種寫法，角度的換算 
實例：CSS3時鐘 
scale的使用，等比縮放和拉伸，翻轉和變形，scale和改變寬高的區(qū)別，CSS3屬性和盒模型尺寸 ，scale 的其他寫法 
實例：CSS3圖片放大 
實例：官網登錄框淡入淡出 
skew的使用，PS中的傾斜，傾斜模擬旋轉 
translate的使用，translate和left、top的區(qū)別 
實例：CSS3傾斜導航條 
多transform組合使用，順序的問題 
CSS3 3D變換，3D旋轉，perspective的使用 
實例：3D旋轉和2D旋轉的比較 
實例：safari歷史記錄效果（官網作品展示） 
3D變換的坐標系，旋轉方向的分辨，perspective的兩種用法 
backface-visibility的使用和問題 
實例：記憶力大考驗游戲 
實例：官網登錄、注冊框 
backface-visibility的bug，translate另類解決方法 
transform-style的使用，3D空間的繼承 
實例：翻書效果 
實例：鼠標、鍵盤控制的3D盒子 
實例：圖片拆分、翻轉 
實例：3D圖片環(huán) 
CSS3動畫 
純CSS動畫animate，關鍵幀，格式和編寫 
animate的調用，時間單位和重用 
animate的可選屬性，運動類型、延遲、重復、重置 
animate和JS的配合 
實例：旋轉的風車 
animate和transition的比較 
動畫結束的檢測，Mozilla的問題和解決 
自定義鏈式動畫庫 
JS運動和CSS3動畫 
實例：3D幻燈片 
圓角的精確控制 
CSS3多背景和背景尺寸控制 
漸變高級應用，控制點、重復背景、漸變與背景結合 
實例：CSS3+JS實現的圖片倒影 
實例：光線劃過效果 
本地存儲 
本地存儲和cookie的區(qū)別，localStorage和sessionStorage的區(qū)別 
localStorage的支持情況，兼容性檢測 
添加、刪除數據，刪除數據 
localStorage使用的注意事項 
實例：基于localStorage的待辦事項 
localStorage的方法和屬性，setItem、getItem
清空localStorage，遍歷localStorage的方法 
實例：基于localStorage的記事本 
localStorage的事件，onstorage的兼容性寫法，事件對象的各種屬性：key、oldValue、newValue、url/uri
Json對象的方法，stringify、parse，parse和eval的區(qū)別 
調試工具的使用 
窗口間通信 
實例：所有頁面保持同步的列表 
實例：同步拖拽 
地理信息 
geolocation的用法，地理信息的定位精度，測試geolocation的方法 
兼容性和兼容檢測，getCurrentPosition()的使用 
返回結果的作用：accuracy、latitude和longitude、altitude和altitudeAccuracy 、heading和speed
實例：配合地圖顯示當前位置 
獲取失敗的處理，message、code，授權和常見錯誤 
可選參數，高精度模式，超時處理 
監(jiān)聽地理位置變化 
HTML5特性、表單 
contenteditable的作用 
實例：基于ajax的簡易excel
自定義數據的使用，兼容性，自定義數據配合JS，優(yōu)點、缺點 
HTML5表單特性，placeholder的使用，autocomplete和autofocus
新的input類型，控制手機輸入法 
實例：JS處理placeholder兼容問題 
HTML5表單驗證，required屬性的使用，pattern屬性的使用 
實例：純HTML5表單驗證 
下拉選擇框，search和datalist
novalidate屬性、multiple屬性 
JS配合HTML5表單校驗，checkValidity()方法的使用

第七階段 
PHP核心技術

PHP基礎：變量、函數、傳參、返回值、echo 
數組、字符串、字符串連接 
引號的問題、字符串中的變量、跨行字符串 
常用操作：push、pop、substring等 
PHP中的面向對象：class、parent、繼承、方法和屬性 
PHP的表單操作：GET、P0ST、C00KIE和FILE

第八階段 
Video、Audio、canvas

video、audio基礎，支持和兼容性 
基本形式，src屬性，不支持的文字提示 
可選參數：controls、autoplay、loop
文件格式支持，source標簽的使用 
實例：原生視頻播放 
各瀏覽器下的工具樣式 
實例：編寫自己的播放器 
play()方法、pause()方法，stop方法的模擬，currentTime屬性的使用 
實例：播放、暫停和停止 
duration屬性，durationchange事件，D0M3事件注意事項 
實例：顯示和控制當前播放進度 
timeupdate事件，onend事件 
實例：播放結束彈出“相關推薦”彈出層 
progress事件，buffer對象，end()方法 
實例：顯示視頻加載進度 
muted屬性，volume屬性 
實例：控制播放音量 
canplay、canplaythrough事件的使用，loadeddata事件 
error和emptied事件的區(qū)別，加載錯誤處理 
實例：數據緩沖和錯誤提醒 
canPlayType()的使用 
實例：打開外部文件并播放 
實例：用localStorage和json持久化，完成播放列表和播放進度記錄 
實例：繪圖板鉛筆工具 
實例：繪圖板矩形工具 
實例：繪圖板橡皮擦工具 
drawImage()方法繪制圖片，drawImage()方法的三種形式 
實例：繪圖板的拖拽上傳圖片 
createPattern()方法創(chuàng)建平鋪圖案 
實例：自定義填充 
toDataURL()方法導出canvas圖像 
實例：繪圖板“保存”功能的實現 
實例：post將圖片上傳到服務器 
drawImage()方法的高級應用，用精靈圖實現人物行走功能 
實例：行走的小人 
封裝ZImg對象，物體的定位、碰撞檢測 
canvas中的事件檢測，繪制線程 
實例：可以拖拽的canvas圖片 
實例：canvas飛機游戲 
實例：繪制柱狀圖 
實例：繪制折線圖 
實例：繪制餅圖 
實例：繪制3D柱狀圖 
Z0bject類，基本屬性：位置、父級、子級，方法：appendChild()、removeChild()、draw()、ev()、pointIn()，事件：mousedown/mouseup/click/mousemove/mouseover/mouseout
實例：編寫并通過繼承擴展Z0bject類 
ZRect類、ZImg類，圖片裁切，設置各種樣式 
實例：用ZRect類重寫canvas時鐘

第九階段 
客戶端緩存

桌面通知基礎，webkitNotifications對象的使用 
createNotification()方法的參數，設定通知圖標，設置標題和內容 
用checkPermission()檢查用戶授權，requestPermission()請求權限 
實例：彈出桌面通知 
show()、close()方法的使用 
實例：通知的延時自動關閉 
通知的各種事件：ondisplay、onclick、onclose、onerror
實例：點擊通知后定位到指定消息 
彈出HTML通知 
離線應用基礎，緩存離線資源，在線狀態(tài)檢測，本地數據存儲和同步 
實例：自動通知用戶在線狀態(tài) 
manifest文件的編寫，manifest文件的引入，NETW0RK段、CACHE段、FALLBACK段的使用 
manifest文件實例 
實例：可離線使用的記事本 
緩存更新的兩種方法和策略，applicationCache對象的使用 
UPDATEREADY狀態(tài)，update()方法 
navigator.onLine屬性的檢測 
online、offline事件的使用 
實例：服務器、本地緩存同步 
webWorker和webSql
WebWorker基本使用，多線程的概念 
創(chuàng)建worker，onmessage事件 
通過data獲取線程消息 
實例：用webWorker計算菲波那切數列，與主線程分離 
postMessage()方法傳遞數據 
onerror事件 
terminate()/close()方法終止線程運行 
實例：用worker與服務器通信 
子線程中的this
webWorker的問題 
webSql基本使用 
數據庫的基本使用：CREATE語句、SELECT語句、INSERT語句、DELETE語句、UPDATE語句 
openDatabase()方法打開數據庫 
transaction()方法進行事務處理，事務處理的原子性 
事務上下文的使用 
實例：創(chuàng)建數據庫，并創(chuàng)建數據表 
executeSql()方法執(zhí)行Sql語句 
result的屬性和方法 
實例：插入數據、獲取數據 
實例：記賬管理系統(tǒng)

第十階段 
webGL

webGL基礎 
webGL效果演示 
webGL的基本組成：場景、渲染器、光源、攝像機、物體 
場景：創(chuàng)建、添加 
渲染器：SVG、canvas、webGL三種渲染器的使用和區(qū)別 
光源：平行光、點光源、環(huán)境光的區(qū)別和使用，制定光源的顏色、強度、照射距離 
攝像機：矩形攝像機、景深攝像機的區(qū)別，攝像機的遠點、近點、寬高比等屬性的設置 
物體的形狀和材質，簡單的立方體，朗伯材質的特點和使用，制定物體顏色、光特性，mesh的使用 
實例：個全3D網頁程序 
render()方法和渲染參數 
物體的位置、旋轉、縮放屬性的設置 
實例：鍵盤控制的3D方塊 
循環(huán)渲染，requestAnimationFrame()的原理和使用 
實例：鼠標控制攝像機移動 
高品質渲染和抗鋸齒選項 
線框渲染 
物體投影，光源投影 
實例：碰撞墻壁反彈的小球 
webGL應用 
系統(tǒng)自帶標準幾何形狀：平面、立方體、球體、圓臺、八面體、托雷斯體 
實例：各種幾何形狀的使用 
add()方法給物體添加子對象 
平面體的使用 
materials數組，為各個面單獨指定材質 
faces數組，引用各個材質面 
實例：構建復雜的3D模型 擺動的鐘 
導入外部模型文件 
骨骼的控制 
讓外部模型動起來