移动Web前端高效开发实战：HTML5+CSS3+JavaScript+Webpack+ReactNative+Vue.js+Node.js电子书

内容简介

前言

第1章 初识移动Web前端

1.1 移动Web前端史

1.1.1 Web开发的变迁

1.1.2 移动Web与HTML 5不得不说的关系

1.1.3 移动Web与原生应用的优劣势

1.2 移动Web前端现状与未来

1.2.1 移动Web的现状

1.2.2 您需要掌握的知识体系

1.2.3 技术拐点与未来趋势

1.3 常见问题

1.3.1 移动Web前端开发有前景吗

1.3.2 PC Web和移动Web开发区别

1.4 本章小结

第2章 移动Web开发环境搭建

2.1 Visual Studio Code免费跨平台编辑器

2.2 使用Node.js

2.2.1 Node.js的用途

2.2.2 安装和调试Node.js

2.2.3 什么是NPM

2.2.4 Web代理工具NProxy

2.2.5 HTTP服务器http-server

2.3 本章小结

第3章 HTML 5必会实际常用特性

3.1 新的语义

3.1.1 新元素的到来

3.1.2 表单的增强应用

3.1.3 使用音频和视频

3.2 访问你的设备

3.2.1 定位当前地埋位置

3.2.2 实战演练：调用摄像头拍个照

3.2.3 实战演练：在手机上实现摇一摇

3.3 离线和存储

3.3.1 实战演练：搭建一个简单的离线应用

3.3.2 离线之后资源该如何更新——Service Worker

3.3.3 LocalStorage与SessionStorage

3.3.4 实战演练：利用IndexedDB实现便签管理

3.4 图像效果

3.4.1 使用Canvas绘制一个简单的饼图

3.4.2 使用SVG实现奥运五环

3.4.3 WebGL带来了3D图像功能

3.5 不一样的通信

3.5.1 PostMessages

3.5.2 XMLHttpRequest Level 2

3.5.3 Server Sent Event

3.5.4 WebSocket

3.5.5 WebRTC

3.6 其他常用特性

3.6.1 History API与单页应用

3.6.2 Drag和Drop介绍

3.6.3 利用Web Workers加速应用计算

3.6.4 利用Performance API分析网站性能

3.7 本章小结

第4章 CSS 3必会实战技巧

4.1 认识CSS 3

4.1.1 什么是CSS 3

4.1.2 移动Web的CSS 3现状

4.1.3 用Modernizr检测浏览器是否支持CSS 3

4.2 选择器

4.2.1 常见选择器

4.2.2 伪类和伪元素

4.2.3 优先级和权重

4.3 响应式开发

4.3.1 常见设备的宽高

4.3.2 Flex弹性盒布局

4.3.3 媒体查询（Media Query）

4.3.4 用rem开发响应式设计

4.3.5 多列（Multiple Columns）

4.4 动效

4.4.1 转换（Transform）

4.4.2 过渡（Transition）

4.4.3 动画（Animation）

4.5 常用特性

4.5.1 开放字体格式（WOFF）

4.5.2 背景（Backgrounds）

4.5.3 颜色（Color）

4.5.4 文字效果（Text Effects）

4.5.5 边框（Border）

4.6 预编译

4.6.1 Less介绍和安装

4.6.2 Less使用

4.6.3 Sass介绍和安装

4.6.4 Sass使用

4.6.5 Compass的安装和使用

4.7 本章小结

第5章 JavaScript关键语法及使用技巧

5.1 理解JavaScript

5.1.1 语言基础

5.1.2 函数和参数

5.2 事件

5.2.1 事件概述

5.2.2 事件委托

5.2.3 移动端事件

5.3 作用域、闭包和this

5.3.1 使用let实现块级作用域

5.3.2 闭包

5.3.3 采用call、apply、bind改变this

5.4 面向对象

5.4.1 原型和原型链

5.4.2 Mixin模式

5.4.3 ECMAScript 6的Class和Extends

5.5 异步编程

5.5.1 AJAX中的Callback回调函数

5.5.2 Promise模式

5.5.3 生成器Generator

5.6 模块化

5.6.1 为什么需要模块化

5.6.2 AMD和CMD规范

5.6.3 ECMAScript 6标准的模块支持

5.7 ECMAScript 6其他常用功能

5.7.1 基础数据类型的扩展

5.7.2 使用解构赋值来简化代码

5.7.3 使用Babel插件提前使用新特性

5.8 本章小结

第6章 HTML 5移动开发实战

6.1 在地图上显示行走轨迹

6.2 仿原生相册

6.2.1 实现相册初始展示页

6.2.2 通过手势操作控制相片

6.3 使用Socket.IO制作小型聊天室

6.3.1 前端HTML+JavaScript实现聊天界面

6.3.2 服务器端Node.js监听连接

6.4 移动端拍照上传实践

6.4.1 前端HTML+CSS+JavaScript

6.4.2 服务器端Node.js

6.5 利用Microdata进行SEO优化

6.5.1 认识Microdata

6.5.2 提升网页SEO效果

6.6 制作一个带字幕的视频播放器

6.7 使用Pixi.js制作“抓住开学君”游戏（Canvas+WebGL）

6.8 用Canvas制作刮刮卡

6.9 实战演练：实现3D全景效果

6.9.1 需要的CSS 3特性

6.9.2 实现原理

6.9.3 实现代码

6.10 本章小结

第7章 移动网页样式布局实战

7.1 静态布局的实际应用

7.1.1 设计活动页面静态布局

7.1.2 静态布局在移动端上的自适应

7.2 水平居中与垂直居中实战

7.2.1 水平居中

7.2.2 自适应块级元素水平居中

7.2.3 行内元素垂直居中

7.2.4 块级元素的垂直居中

7.2.5 基于视口单位的解决方案

7.2.6 基于Flexbox的解决方案

7.3 栅格系统实现响应式列表

7.3.1 实现栅格布局

7.3.2 栅格布局的原理

7.4 Flex多栏布局实战

7.5 实战演练：沪江网校首页rem布局实践

7.6 实战演练：侧边栏的滑进滑出效果

7.7 实战演练：模拟原生的页面切换效果

7.7.1 实现页面切换过渡效果

7.7.2 模拟切换原理解析

7.8 提高Web动画的性能实战

7.8.1 使用CSS 3动画

7.8.2 使用高性能的JavaScript动画

7.9 实战演练：课程分类列表实战

7.9.1 实现主页结构

7.9.2 响应式CSS实现（Compass）

7.9.3 添加页面动态效果

7.10 本章小结

第8章 前端工程化实战

8.1 前端工程化

8.1.1 前端工程化的必要性

8.1.2 前端工程化的发展史

8.2 工程化入门Grunt

8.2.1 安装和配置

8.2.2 Grunt插件

8.2.3 实战演练：使用Grunt开发一个简易相册

8.3 使用Gulp构建一个ECMAScript 6和Sass应用

8.3.1 安装和配置

8.3.2 预处理任务

8.3.3 实战演练：采用ECMAScript 6开发一个Markdown编辑器

8.3.4 代码检查任务

8.3.5 代码合并、压缩、重命名任务

8.3.6 监听文件变化自动构建

8.4 实战演练：使用Webpack构建一个React应用

8.4.1 安装和配置

8.4.2 常用的加载器和插件

8.4.3 缓存控制

8.4.4 简化模块引用

8.4.5 异步模块加载

8.4.6 使用Source Map调试代码

8.5 本章小结

第9章 移动Web常用开发方式实战

9.1 基于DOM的开发方式

9.1.1 使用Zepto和前端模板开发简单备忘录

9.1.2 解决原生单击事件的缺陷

9.1.3 为何抛弃掉Zepto

9.2 基于React的开发方式

9.2.1 使用JSX语法创建React组件

9.2.2 在实践中掌握React生命周期

9.2.3 实现组件间通信

9.2.4 实现组件关注分离

9.2.5 实战演练：运用组件化方式开发一个备忘录

9.2.6 如何管理应用的状态

9.2.7 添加动画效果

9.2.8 提高React组件性能

9.3 基于Vue.js的开发方式

9.3.1 实战演练：开发一个简单的备忘录应用（Vue.js 2.0）

9.3.2 管理应用的状态及实现组件间的通信

9.3.3 添加动画效果

9.4 打造单页应用SPA

9.4.1 单页应用的优势是什么

9.4.2 实战演练：实现一个单页路由

9.4.3 实战演练：使用React开发一个简单的单页应用

9.4.4 单页应用的状态管理

9.5 本章小结

第10章 混合式开发实战

10.1 为什么需要混合式开发

10.1.1 混合式开发种类

10.1.2 混合式开发的优势

10.1.3 选择合适的混合式开发方案

10.2 Cordova开发入门

10.2.1 JavaScript和Native互相调用

10.2.2 Cordova介绍和安装

10.2.3 Cordova开发使用

10.3 React Native实战

10.3.1 React Native简介

10.3.2 React Native样式和布局

10.3.3 React Native组件概念

10.3.4 简单组件实战

10.3.5 复合组件实战

10.3.6 第三方组件实战

10.3.7 常用API实践

10.4 实战演练：用React Native开发新闻阅读应用

10.4.1 React Native的工程项目结构一览

10.4.2 列表页

10.4.3 新闻评论页

10.4.4 新闻展示页

10.5 本章小结

第11章 前端开发调试实战

11.1 浏览器调试

11.1.1 Chrome开发者工具

11.1.2 Safari开发者工具

11.2 代理工具

11.2.1 Mac OS下Charles的用法

11.2.2 Windows下Fiddler的用法

11.3 多终端同步工具

11.3.1 多设备浏览器同步测试工具BrowserSync

11.3.2 双向自动刷新样式工具Emmet LiveStyle

11.4 模拟器调试

11.4.1 Android模拟器调试

11.4.2 iOS模拟器调试

11.4.3 在线模拟器Manymo

11.5 多平台调试

11.5.1 网站响应式设计测试工具Ghostlab

11.5.2 移动端Web开发调试工具Weinre

11.5.3 JavaScript远程调试和测试工具Vorlon.JS

11.6 云真机调试

11.6.1 浏览器兼容性云端测试应用BrowserStack

11.6.2 Web端移动设备管理控制工具STF

11.6.3 多浏览器兼容性测试平台F2etest

11.7 React调试

11.7.1 React Developer Tools

11.7.2 Redux DevTools

11.8 本章小结

第12章 前端单元测试实战

12.1 JavaScript单元测试框架Jasmine实战

12.2 使用Mocha和Chai在Node.js进行单元测试

12.3 使用Sinon辅助单元测试

12.4 使用Karma自动化单元测试

12.5 使用Istanbul计算代码覆盖率

12.6 使用Benchmark.js进行基准测试

12.7 实战演练：React版备忘录项目的完整单元测试

12.8 本章小结

第13章 前端性能优化实战

13.1 常用网站性能优化指标

13.1.1 网页的资源请求与加载阶段

13.1.2 网页渲染阶段

13.1.3 JavaScript脚本的执行速度

13.2 依旧有效的Yahoo性能优化法则

13.3 性能优化工具使用实战

13.3.1 YSlow

13.3.2 PageSpeed

13.3.3 WebPagetest

13.4 HTTP协议头缓存实战

13.4.1 客户端缓存流程

13.4.2 缓存协议内容

13.4.3 实战演练：HTTP缓存

13.5 资源按需加载实战

13.5.1 基于RequireJS的按需加载

13.5.2 基于Webpack的按需加载

13.5.3 图片懒加载

13.6 不同网络类型的优化实战

13.6.1 获取网络类型

13.6.2 弱网图片优化

13.6.3 弱网缓存优化

13.7 实战演练：Nginx配置Combo合并HTTP请求

13.7.1 安装Nginx和文件合并模块

13.7.2 配置Nginx和Combo

13.8 本章小结

第14章 项目实战：搭建直播平台（Cordova+Koa+React）

14.1 项目的安装和启动

14.1.1 安装依赖

14.1.2 启动项目

14.1.3 Cordova打包

14.2 直播平台功能预览

14.2.1 直播流程

14.2.2 直播核心页面

14.3 页面的布局和结构

14.3.1 首页

14.3.2 发起直播页面

14.3.3 观看直播页面

14.4 搭建WebRTC服务端——Koa

14.5 实现多人在线直播功能

14.6 实现弹幕客户端与服务端通信

14.6.1 客户端与服务端通信的过程

14.6.2 客户端代码设计——React

14.6.3 服务端代码设计

14.7 本章小结

反侵权盗版声明