H5前端高级开发

阶段

内容

描述

阶段 
开发语言基础

基础开发工具入门

软件开发主流工具掌握；编程语言入门，Java程序设计：变量、数据类型、
运算符与表达式、分支与循环、数组；养成良好的软件编程习惯，强化软件开发基本功

开发语言基础的巩固、内存管理

加强和巩固开发工具，掌握在Eclipse下开发/调试程序

00P面向对象

面向对象基本概念；面向对象特性：封装（描述）、继承、多态； 面向对象高级特性：内部类、抽象类、接口；异常处理；

API介绍

常用API,集合API，并了解Java的高级特性， 熟悉各种基本数据类型包装类：String和StringBuffer等常用API

数据库和SQL

掌握数据库原理和SQL语句，链接数据库的应用

I0概念、多线程、泛型

熟悉文件操作、字节流的操作和常见文件相关类, 分析I0性能，熟练使用常用包装类I0；多线程；泛型与元数据（注解）；

设计模式理解

熟悉常用设计模式：Singleton、Template、Strategy、Adapter模式。 为搭建结构良好的Android应用程序奠定基础。

主流WEB开发技术

了解 WEB开发技术的核心知识，拓展开发思路和眼界

第二阶段,JS基础

JS入门：事件、原理、属性、样式、函数、if判断 
JS入门：style和行间样式、函数传参、属性操作两种方式 
字符串和变量、字面量和变量 
提取行间事件、onload、byTagName、数组 
循环、全选、选项卡、innerHTML、字符串连接 
调试工具的使用、如何调试JS 
变量类型、typeof、JS常见类型 
类型转换、parseInt、NaN、隐式转换 
作用域、闭包、命名规范、运算符、流程控制 
变量遮蔽 
JS中的随机数、随机颜色、随机范围、随机不重复 
函数返回值 
深入理解函数返回值 
定时器：interval、timeout、时钟、资料框、自动播放选项卡、京东商城侧边栏 
arguments、字符串操作、数组操作、Json 
循环外i的问题、函数定义和调用的区别、不变的变量 
D0M操作基础：创建、添加、删除 
B0M基础：窗口操作、UA、location 
B0M应用：滚动、scrollTop、offset、clientHeight、浏览器类型检测 
事件对象：冒泡、clientX、keyCode、ctrl/alt/shift、默认行为、拖拽 
闪烁提示、回放路径的拖拽 
树形菜单、多级右键菜单

第三阶段 
JS中级+实战

批量设置样式：json、cssText、with 
location、hash、query的处理，刷新保存页码 
Date对象应用：setFullYear/Month等，时间戳、倒计时 
Date高级应用 
闭包的应用、封闭命名空间 
ajax无刷新数据加载：创建、发送、接收、字符集和缓存 
D0M应用：firstChild/lastChild、nextSibling/previousSibling 
操作属性的第三方式、自定义属性的获取、src的相对路径 
offsetParent、计算元素的页面位置 
图片延迟加载——迅雷 
简易瀑布流——花瓣 
横向瀑布流—— 
D0M与innerHTML、innerHTML的bug 
天猫、淘宝吸顶导航条 
天猫、京东placeholder输入框 
永远在页面的右键菜单、提示图片 
图片预加载、Image对象的使用 
Image对象批量加载 
运动基础、匀速运动、运动框架、侧边栏、淡入淡出 
缓冲运动、页面提示框 
多物体运动框架、运动框架、链式运动框架、运动框架 
布局转换、淘宝幻灯片 
运动应用：划动提示层、百科数字框、新浪滚动微博 
永远在页面中放大的图片 
无缝滚动 
手风琴幻灯片、淘宝网无缝滚动幻灯片 
this的用法、拖拽 
封装可重用代码 
拖拽、吸附拖拽、带框拖拽 
程序思想——如何找思路，如何找规律，如何思考 
碰撞检测、模拟窗口拖拽大小 
窗口拖拽大小的封装和重用 
自定义滚动条、鼠标滚轮 
事件绑定、D0M事件流 
cookie基础 
ajax高级应用：用户注册和登录、表单提交 
后台接口的使用、接口文档 
编写AJax的基本步骤 
Jsonp跨域的方法——下拉提示 
script标签的怪异特性、callback的使用 
Jsonp标签的管理 
封装可重用的Jsonp方法 
ajax制作简易新浪微博：后台、接口、分页、顶、页码 
其他常见数据格式及用法：CSV、XML 

JS中的预解析机制、script出错时的处理机制 
预解析相关面试题 
递归及其各种应用 
递归相关面试题 
递归的性能问题、递归的优化 
栈溢出的原因和处理 

引用、复制 
JS中的异常：try..catch的使用 
try的嵌套和性能问题 
抛出异常、Exception对象、异常和返回值的区别及用途 
JS变量生存周期、垃圾回收机制 
闭包与JS垃圾回收 
闭包的用法、保存i的值 

JS性能优化——健壮性、维护性、性能的平衡 
性能瓶颈的识别——性能检测工具的使用：Chrome profiles、YSlow等 
JS阻塞加载、图片延迟加载、网络性能优化、压缩、CDN的使用 
JS执行性能优化：D0M操作、循环、数组优化、局部变量、eval、parseInt、系统函数、字符串连接、正则等 

实例：颜色选择器组件 
实例：输入字数统计 

正则表达式：RegExp对象、search方法、忽略大小写 
match方法和全局匹配、量词的问题、replace方法 
字符类、转义字符、行首行为、中文、单词边界、括号 
正则应用：可重用的表单校验 
自动表单校验、批量表单校验 

表格操作：tBodies、tHead、tFoot、rows、cells 
表格、排序 
自定义表单组件 
D0M文本节点：创建、兼容、应用 
firstChild怪异问题、childNodes的问题 
实例：google日历 

domReady事件：优点、D0MContentLoaded、defer、onload 
事件队列、封装ready事件函数 
事件委托（事件代理）：冒泡的使用、srcElement属性、target属性、this的检测 
call的使用——解决this指向问题 
mouseleave事件——作用、封装，彻底解决mouseout冒泡的问题 

运动高级：弹性运动、碰撞运动 
弹性应用：滑动导航

第四阶段:JS面向对象

面向对象回顾：什么是面向对象、对象的组成、00P的特点、this的本质、0bject对象 
工厂方式构造对象、原型（prototype）、混合法构造JS对象、实例：面向对象的选项卡 
JS算法基础：时间复杂度和空间复杂度 
数据结构基础：线性和随机、线性表、0表示法、数据结构基本操作 
线性表和排序：4大排序算法、适用范围、蜕变和劣化、移动操作开销 
树和排序：树的查找、添加和平衡 
散列：空间换取时间、空间利用率和算法效率 
图：路径算法、预处理和随机处理 

模块的规划、接口 
模块的加载、依赖、循环依赖 
模块作用域和export 
script加载和同步、请求合并、压缩代码 
模块的重用和冲突 

MVC基础：3层模型和耦合度 
耦合的问题和消除 
数据独立性、独立数据模型 

设计模式：优点、常见模式 
自定义事件、事件队列管理、事件的传递、事件对象和参数、监听模式的问题 
数据队列的管理、反向监听和解耦合、模块独立性

第五阶段 
JQuery

JQuery基础：$、选择器、获取元素、添加事件 
JQuery的选择器：层级、属性、伪类等 
样式和属性操作：css、attr方法、JQuery的链式操作和可选参数 
鼠标事件：click、hover、toggle 
JQuery特效：slideDown/slideUp、fadeIn/fade0ut 
JQuery动画：animate、stop、速度控制、二级菜单 
mouseleave和mouseenter事件的使用 
实例：JQuery选项卡 
JQuery的D0M操作：创建、添加、插入、包裹、删除 
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插件：静态方法、extend() 
实例：自定义JQuery插件——选项卡、自定义组件

第六阶段 
HTML5+CSS3

HTML5/CSS3新特性 
文档头和编码声明 
语义化标签，HTML5标签的兼容处理，HTML5标签SE0
新的元素选择器，HTML5中的选择器 
本地存储，安全性、容量、和cookie区别 
HTML5表单新特性，新的input类型，placeholder的使用和兼容，表单自动校验 
FileReader和文件拖拽 
geoLocation
canvas，功能和操作，图表、游戏和动画 
WebGL，全3D网页浏览 
video、audio
离线应用，Manifest文件编写 
桌面提醒 
webSocket，优点，和Ajax的区别 
webWorker，用途和优点 
webSql
CSS3新特性，文本溢出，分栏模式，背景，圆角，阴影，渐变，transform，CSS3动画，rgba等 
HTML5的应用范围 
CSS3基础 
css3与css2的区别，CSS3的兼容性，浏览器前缀，不需要前缀的样式 
实例：CSS3旋转 
JS设置CSS3样式，setStyle3()的封装，IE前缀的问题 
实例：CSS3运动框架基础 
transition基本使用，transition的参数，不同运动形式的区别 
transition运用范围，transition和JS平滑结合，transition的问题 
实例：纯CSS3滑动二级菜单 
实例：淡入淡出幻灯片 
border-radius的使用，圆角的单位，圆角大小的测量（PS中），圆角的各种参数 
实例：圆角图片框 
rgba的使用，rgba和opacity的区别，rgba的应用，rgba和渐变 
实例：半透明遮罩文字的新写法 
text-shadow的用法，各种参数，配合rgba的另类用途 
实例：文字模糊效果 
box-shadow的用法，内投影和外投影，扩展阴影 
实例：CSS3按钮 
实例：CSS3模拟PS的外发光效果 
实例：文本框模糊效果 
线性渐变的使用，最简形式，渐变方向的控制，多点渐变和rgba的结合 
实例：CSS3进度条的绘制 
圆形渐变的使用，中心点位置，形状和大小 
实例：CSS3彩虹圈 
CSS3变形和应用 
transform的作用，旋转、缩放、位移、倾斜的使用，transform与内联元素 
实例：各种变形的使用和组合 
rotate的使用，deg，origin的使用，origin的各种写法，角度的换算 
实例：CSS3时钟 
scale的使用，等比缩放和拉伸，翻转和变形，scale和改变宽高的区别，CSS3属性和盒模型尺寸 ，scale 的其他写法 
实例：CSS3图片放大 
实例：官网登录框淡入淡出 
skew的使用，PS中的倾斜，倾斜模拟旋转 
translate的使用，translate和left、top的区别 
实例：CSS3倾斜导航条 
多transform组合使用，顺序的问题 
CSS3 3D变换，3D旋转，perspective的使用 
实例：3D旋转和2D旋转的比较 
实例：safari历史记录效果（官网作品展示） 
3D变换的坐标系，旋转方向的分辨，perspective的两种用法 
backface-visibility的使用和问题 
实例：记忆力大考验游戏 
实例：官网登录、注册框 
backface-visibility的bug，translate另类解决方法 
transform-style的使用，3D空间的继承 
实例：翻书效果 
实例：鼠标、键盘控制的3D盒子 
实例：图片拆分、翻转 
实例：3D图片环 
CSS3动画 
纯CSS动画animate，关键帧，格式和编写 
animate的调用，时间单位和重用 
animate的可选属性，运动类型、延迟、重复、重置 
animate和JS的配合 
实例：旋转的风车 
animate和transition的比较 
动画结束的检测，Mozilla的问题和解决 
自定义链式动画库 
JS运动和CSS3动画 
实例：3D幻灯片 
圆角的精确控制 
CSS3多背景和背景尺寸控制 
渐变高级应用，控制点、重复背景、渐变与背景结合 
实例：CSS3+JS实现的图片倒影 
实例：光线划过效果 
本地存储 
本地存储和cookie的区别，localStorage和sessionStorage的区别 
localStorage的支持情况，兼容性检测 
添加、删除数据，删除数据 
localStorage使用的注意事项 
实例：基于localStorage的待办事项 
localStorage的方法和属性，setItem、getItem
清空localStorage，遍历localStorage的方法 
实例：基于localStorage的记事本 
localStorage的事件，onstorage的兼容性写法，事件对象的各种属性：key、oldValue、newValue、url/uri
Json对象的方法，stringify、parse，parse和eval的区别 
调试工具的使用 
窗口间通信 
实例：所有页面保持同步的列表 
实例：同步拖拽 
地理信息 
geolocation的用法，地理信息的定位精度，测试geolocation的方法 
兼容性和兼容检测，getCurrentPosition()的使用 
返回结果的作用：accuracy、latitude和longitude、altitude和altitudeAccuracy 、heading和speed
实例：配合地图显示当前位置 
获取失败的处理，message、code，授权和常见错误 
可选参数，高精度模式，超时处理 
监听地理位置变化 
HTML5特性、表单 
contenteditable的作用 
实例：基于ajax的简易excel
自定义数据的使用，兼容性，自定义数据配合JS，优点、缺点 
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事件的区别，加载错误处理 
实例：数据缓冲和错误提醒 
canPlayType()的使用 
实例：打开外部文件并播放 
实例：用localStorage和json持久化，完成播放列表和播放进度记录 
实例：绘图板铅笔工具 
实例：绘图板矩形工具 
实例：绘图板橡皮擦工具 
drawImage()方法绘制图片，drawImage()方法的三种形式 
实例：绘图板的拖拽上传图片 
createPattern()方法创建平铺图案 
实例：自定义填充 
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通知 
离线应用基础，缓存离线资源，在线状态检测，本地数据存储和同步 
实例：自动通知用户在线状态 
manifest文件的编写，manifest文件的引入，NETW0RK段、CACHE段、FALLBACK段的使用 
manifest文件实例 
实例：可离线使用的记事本 
缓存更新的两种方法和策略，applicationCache对象的使用 
UPDATEREADY状态，update()方法 
navigator.onLine属性的检测 
online、offline事件的使用 
实例：服务器、本地缓存同步 
webWorker和webSql
WebWorker基本使用，多线程的概念 
创建worker，onmessage事件 
通过data获取线程消息 
实例：用webWorker计算菲波那切数列，与主线程分离 
postMessage()方法传递数据 
onerror事件 
terminate()/close()方法终止线程运行 
实例：用worker与服务器通信 
子线程中的this
webWorker的问题 
webSql基本使用 
数据库的基本使用：CREATE语句、SELECT语句、INSERT语句、DELETE语句、UPDATE语句 
openDatabase()方法打开数据库 
transaction()方法进行事务处理，事务处理的原子性 
事务上下文的使用 
实例：创建数据库，并创建数据表 
executeSql()方法执行Sql语句 
result的属性和方法 
实例：插入数据、获取数据 
实例：记账管理系统

第十阶段 
webGL

webGL基础 
webGL效果演示 
webGL的基本组成：场景、渲染器、光源、摄像机、物体 
场景：创建、添加 
渲染器：SVG、canvas、webGL三种渲染器的使用和区别 
光源：平行光、点光源、环境光的区别和使用，制定光源的颜色、强度、照射距离 
摄像机：矩形摄像机、景深摄像机的区别，摄像机的远点、近点、宽高比等属性的设置 
物体的形状和材质，简单的立方体，朗伯材质的特点和使用，制定物体颜色、光特性，mesh的使用 
实例：个全3D网页程序 
render()方法和渲染参数 
物体的位置、旋转、缩放属性的设置 
实例：键盘控制的3D方块 
循环渲染，requestAnimationFrame()的原理和使用 
实例：鼠标控制摄像机移动 
高品质渲染和抗锯齿选项 
线框渲染 
物体投影，光源投影 
实例：碰撞墙壁反弹的小球 
webGL应用 
系统自带标准几何形状：平面、立方体、球体、圆台、八面体、托雷斯体 
实例：各种几何形状的使用 
add()方法给物体添加子对象 
平面体的使用 
materials数组，为各个面单独指定材质 
faces数组，引用各个材质面 
实例：构建复杂的3D模型 摆动的钟 
导入外部模型文件 
骨骼的控制 
让外部模型动起来