致力于提升研发企业的持续创新能力

一、课程目标

通过本课程的学习，旨在帮助前端开发人员进一步梳理工作中的开发流程和巩固已有的知识结构体系，加深对技术背景的理解；同时，通过本课程的学习，使用前端开发人员掌握HTML5、CSS3等新型框的核心技术点，完全胜任使用前端框架开发移动项目的需求。

二、课程对象

本课程知识面向以下学习对象：

1． 正在从事传统PC端Web页面的技术开发人员。

2． 希望从事移动端WebApp应用开发的技术人员。

3． 对前端技术感兴趣，希望从事这方面工作的人员。

4． 掌握一些传统的前端开发技术，想进一步学习HTML5、CSS3方面的人员。

三、课程大纲

1.   Html5新增元素与属性

1.1.    Html5的标准，以及优势的地方和对移动设备的支持上更突出

1.2.    常见的HTML5新标签与属性

1.3.    动态控制状态条

1.4.    滑动条改变背景色

1.5.    案例一：使用HTML5元素获取手机音频内容

2.   掌握Css3效果，可以大大提升制作页面动画的速度

2.1.    文本阴影与圆角边框

2.2.    图片遮罩效果

2.3.    案例二：CSS3图片遮罩形成探照灯

2.4.    2d基本效果

2.5.    3d动画基本效果

2.6.    制作过渡动画效果

2.7.    过滤动画效果的各种状态

2.8.    案例三：制作3d翻页效果

3.   Sass工具的基础用法指南

3.1.    什么是SCSS

3.2.    安装和使用

3.3.    基本用法定义变量、语句

3.4.    代码复用完成继承功能

3.5.    高级用法实现循环、条件、函数

4.   响应式布局的概念

4.1.    解决跨浏览器问题，视口调试等

4.2.    响应式设计中的Html5

4.3.    link方式实现响应式设计

4.4.    style方式实现响应式设计

4.5.    响应样式的兼容性与优劣比较

5.   面向对象编程的概念

5.1.    什么是面向对象

5.2.    封装与继承的关系

5.3.    如何将面向对象运用到项目中

5.4.    call与apply的区别与相同之处

5.5.    案例四：面向对象实现灯泡开关

6.   前端JS框架的演变和介绍

6.1.    MVC结构的优势

6.2.    Angular1.X版本的不足

6.3.    React组件化的优势

6.4.    TypeScript语言

6.5.    ES6的标准

6.6.    Angular2的问世

7.    使用HTML5中API，优化页面打开速度和用户体验

7.1.    使用数组、对象形式的跟踪用户行为

7.2.    案例六：百合网个人中心页优化方案

7.3.    页面中实现地理定位的API

7.4.    案例七：宏基促销项目

7.5.    Html5的画布API

7.6.    案例八：亮视点和晨阳水漆项目

8.    掌握Web页面的性能优化，加速代码的执行效果

8.1.    前端性能要点。

8.2.    HTTP 1.x和HTTP 2.0。

8.3.    优化应用的交付。

8.4.    XMLHttpRequest。

8.5.    WebSocket。

8.6.    前端开发最佳实践

8.7.    创建快速响应的Web应用。

8.8.    拆分初始化负载。

8.9.    案例九：百合网前端高性能框架搭建

9.    页面请求和元素的性能优化，提升代码执行速度

9.1.    理解Ajax性能。

9.2.    无阻塞加载脚本。

9.3.    整合异步脚本。

9.4.    编写高效的JavaScript

9.5.    图像优化

9.6.    尽早刷新文档的输出

9.7.    少用iframe

9.8.    简化CSS选择符

10.  掌握Websocket 通讯API，优化主线程执行速度

10.1.   使用Websocket与服务器基本通讯实现

10.2.   使用Socket.IO创建WebSocket

10.3.   在NodeJS环璄下架构Websocket通讯

10.4.   案例十一：页面消息的推送和接收

11.  理解单元测试mocha的使用，提升代码开发质量

11.1.   基础介绍

11.2.   使用语法

11.3.   浏览器测试

11.4.   异步测试