2019年H5全栈工程师课程大纲

阶段名称

课时

授课阶段

主要课程

授课时长

备注

基础阶段

45天

HTML5 CSS3

1. 课程体系介绍、HTML CSS基本入门知识

2. 网站运行原理

3. HTML常用标签、表单新类型、网页SEO优化

4. HTML5语义化标签、音视频标签

5. CSS选择器(基本、层级、属性、伪类、伪状态)

6. CSS常用样式属性

7. CSS3 过渡、变换、动画

8. CSS3 3D场景搭建与应用

9. 精灵图(雪碧图)的原理以及实现

10. Iconfont 字体图标(阿里巴巴矢量字体图标库)原理以及实现

11. Media媒体响应式布局

12. Flex弹性盒子布局

13. Photoshop基本切图

15天

1. JavaScript jQuery

2. ECMAScript核心语法结构

3. 变量声明优先级(var/function)

4. 函数详解(格式、作用域、作用域链、回调、闭包、匿名、递归)

5. 对象详解(格式、内置对象、原型、原型链)

6. 事件(event)

7. DOM 文档对象模型

8. BOM 浏览器对象模型

9. jQuery的概念与基本使用

10. jQuery元素节点操作

11. jQuery的事件绑定与链式操作

12. jQuery元素属性与样式操作

23天

PHP Ajax JSONP

1. Ajax原理以及应用场景

2. 原生Ajax的运行原理与实现

3. 异步操作与同步操作原理与区别

4. Ajax请求同源策略布局

5. JSONP 跨域请求原理以及实现方式

6. jQuery封装的Ajax调用和JSONP数据跨域请求原理和实现

2天

项目实战考核

1. 任选电商类、游戏类、论坛类、门户类网站，完成整站开发

2. 实现Ajax后台数据交互

3. 实现网站常见页面布局以及JS特效开发

4. 完成移动端页面布局(flex弹性盒子、rem布局)

5. 打包移动端项目，真机运行

6. PC端项目放入GitHub社区，在线运行

5天

55天

ES6的语法结构

1. let const 语法

2. 解构赋值

3. for of 语法

4. 模板字符串

5. 箭头函数

6. 新增数组操作

7. 新增对象操作

8. Set、Map数据类型

9. Promise的原理和应用

10. Class语法

11. ES6 Module

2天

高级阶段

Node.js MongoDB Express Bootstrap

1. nodeJS介绍及使用

2. 环境搭建

3. NPM包管理器

4. CommonJS规范、模块化思想及操作

5. 文件模块

6. http、URL、querystring、7. path等模块

8. HTTP模块、WEB开发框架介绍、

9. noSQL基础概念

10. MongoDB 简介、安装

数据库、集合、文档概念

11. 文档CURD操作

12. nodeJS操作MongoDB

13. Expres的安装、使用

14. 使用模板引擎

15. Express中间件

16. Express路由

17. Bootstrap的介绍和使用

18.Express MongoDB BootStrap搭建博客系统实战

10天

H5新特性

1. 多媒体API

2. 地理定位(Geolocation)

3. 拖拽API

4. 文件API（FileReader）

5. xhr2、FormData

6.localStorage/sessionStorage 本地存储

7. 应用程序缓存

8. WebWorks多线程

9. Websocket

10. userMediaAPI调用摄像头、麦克风

11. SVG 矢量图

12. Canvas绘图

6天

Vue.js(2.0)

1. Vue实例

2. Vue生命周期

3. 模板语法

4. 计算属性computed

5. 条件和列表渲染

6. 事件处理器

7. 组件定义和使用、组件间的通信、

8. 自定义指令、单文件组件、

9. 脚手架vue-cli

10. 路由vue-router、

11. vueX状态管理

12. 数据请求axios

13. Vue todoList 实战

10天

Angular(5.0)

1. TypeScrip

2. angular-cli构建工具

3. 属性型指令 (attribute directive)

4. 封装桶 (barrel)

5. 装饰器 (decorator)

6. 注入器 (injector)、

8插值表达式 (interpolation)、

9. 即时编译 (JiT)、

10.生命周期钩子 (lifecycle hook)、

11.可观察对象 (observable)、

12. 管道 (pipe)、

13. 提供商 (provider)、

14. 路由器 (router)、

15.路由器模块 (router module)、路由组

16. angular todoList 实战

10天

React.js

1. react介绍

2. 虚拟Virtual-DOM

3. 单向数据流

4. JSX、

5. 结构渲染render

6. 组件通信

7. 组件嵌套、

8. 数组储存结构、

9. 事件规则、

10. ref、

11. 组件状态state、

12. 更新视图setState、

13. 生命周期lifeCycle，

14. 路由react-router、

15. React todoList实战

10天

微信小程序 微信JS-SDK

1. 微信开发介绍，以及公众号、小程序的注册

2. JSSDK接口注入权限验证

3. JSSDK分享接口、图像接口、音频接口，地理位置接口等接口的使用

4. 小程序目录结构讲解

5. 小程序配置讲解

6. 小程序逻辑层讲解，注册7. 程序、注册页面、路由

8. 小程序视图层：数据绑9. 定、列表渲染、条件渲染、事件、模板

10. 小程序组件讲解

11. 自定义小程序组件

12. 小程序网络请求API

13. 设备API、文件API、多媒体API等各种API的应用

7天

项目实战考核

Vue.js、Angular、React、微信小程序项目。实战项目：可开发商城类、论坛类、音乐播放类、视频播放类、小说阅读类、天气查询、物流快递查询类、汇率查询等应用

各项目在授课阶段独立完成，不再安排额外时间