H5前端高級開發(fā)

階段

內(nèi)容

描述

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

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

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

開發(fā)語言基礎(chǔ)的鞏固、內(nèi)存管理

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

00P面向?qū)ο?/span>

面向?qū)ο蠡靖拍?；面向?qū)ο筇匦裕悍庋b（描述）、繼承、多態(tài)； 面向?qū)ο蟾呒壧匦裕簝?nèi)部類、抽象類、接口；異常處理；

API介紹

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

數(shù)據(jù)庫和SQL

掌握數(shù)據(jù)庫原理和SQL語句，鏈接數(shù)據(jù)庫的應(yīng)用

I0概念、多線程、泛型

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

設(shè)計模式理解

熟悉常用設(shè)計模式：Singleton、Template、Strategy、Adapter模式。 為搭建結(jié)構(gòu)良好的Android應(yīng)用程序奠定基礎(chǔ)。

主流WEB開發(fā)技術(shù)

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

第二階段,JS基礎(chǔ)

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

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

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

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

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

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

實例：顏色選擇器組件 
實例：輸入字?jǐn)?shù)統(tǒng)計 

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

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

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

運動高級：彈性運動、碰撞運動 
彈性應(yīng)用：滑動導(dǎo)航

第四階段:JS面向?qū)ο?/span>

面向?qū)ο蠡仡櫍菏裁词敲嫦驅(qū)ο?、對象的組成、00P的特點、this的本質(zhì)、0bject對象 
工廠方式構(gòu)造對象、原型（prototype）、混合法構(gòu)造JS對象、實例：面向?qū)ο蟮倪x項卡 
JS算法基礎(chǔ)：時間復(fù)雜度和空間復(fù)雜度 
數(shù)據(jù)結(jié)構(gòu)基礎(chǔ)：線性和隨機(jī)、線性表、0表示法、數(shù)據(jù)結(jié)構(gòu)基本操作 
線性表和排序：4大排序算法、適用范圍、蛻變和劣化、移動操作開銷 
樹和排序：樹的查找、添加和平衡 
散列：空間換取時間、空間利用率和算法效率 
圖：路徑算法、預(yù)處理和隨機(jī)處理 

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

MVC基礎(chǔ)：3層模型和耦合度 
耦合的問題和消除 
數(shù)據(jù)獨立性、獨立數(shù)據(jù)模型 

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

第五階段 
JQuery

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

第六階段 
HTML5+CSS3

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

第七階段 
PHP核心技術(shù)

PHP基礎(chǔ)：變量、函數(shù)、傳參、返回值、echo 
數(shù)組、字符串、字符串連接 
引號的問題、字符串中的變量、跨行字符串 
常用操作：push、pop、substring等 
PHP中的面向?qū)ο螅篶lass、parent、繼承、方法和屬性 
PHP的表單操作：GET、P0ST、C00KIE和FILE

第八階段 
Video、Audio、canvas

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

第九階段 
客戶端緩存

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

第十階段 
webGL

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