移动Web前端高效开发实战 PDF 原版扫描版

移动互联网的兴起和快速普及，给前端开发人员带来了前所未有的新机遇。移动Web前端技术作为整个技术链条中重要的一环，却乱象丛生。本书是一本梳理移动前端和Native客户端技术体系的入门实战书。 本书涵盖了移动Web前端开发中的各个关键技术环节，共14章。分别从HTML 5、CSS 3、JavaScript的ECMAScript 5和ECMAScript 6版本、移动端常用布局方案、MV*类新时代框架、预编译技术、性能优化、开发调试、混合式应用、单元测试、工程化等方面全面地还原一线互联网公司Web前端技术栈。 创作本书的初衷是帮助移动Web前端开发领域的工程师们，勾画出一张实用并且具体的技术图，帮助读者正确且快速地掌握学习路径。本书篇幅有限，力求精简，只列举了各技术栈中核心关键部分，包括大量基于Web前端的优秀开源技术类库和框架介绍，是进入移动Web开发领域的绝佳之选。

目录

• 第1章　初识移动Web前端 1
• 1.1 移动Web前端史 1
• 1.1.1 Web开发的变迁 2
• 1.1.2 移动Web与HTML 5不得不说的关系 3
• 1.1.3 移动Web与原生应用的优劣势 5
• 1.2 移动Web前端现状与未来 6
• 1.2.1 移动Web的现状 6
• 1.2.2 您需要掌握的知识体系 7
• 1.2.3 技术拐点与未来趋势 10
• 1.3 常见问题 11
• 1.3.1 移动Web前端开发有前景吗 11
• 1.3.2 PC Web和移动Web开发区别 12
• 1.4 本章小结 13
• 第2章　移动Web开发环境搭建 14
• 2.1 Visual Studio Code免费跨平台编辑器 14
• 2.2 使用Node.js 16
• 2.2.1 Node.js的用途 16
• 2.2.2 安装和调试Node.js 17
• 2.2.3 什么是NPM 19
• 2.2.4 Web代理工具NProxy 22
• 2.2.5 HTTP服务器http-server 24
• 2.3 本章小结 25
• 第3章　HTML 5 必会实际常用特性 26
• 3.1 新的语义 26
• 3.1.1 新元素的到来 26
• 3.1.2 表单的增强应用 28
• 3.1.3 使用音频和视频 32
• 3.2 访问你的设备 34
• 3.2.1 定位当前地埋位置 35
• 3.2.2 实战演练：调用摄像头拍个照 37
• 3.2.3 实战演练：在手机上实现摇一摇 41
• 3.3 离线和存储 44
• 3.3.1 实战演练：搭建一个简单的离线应用 44
• 3.3.2 离线之后资源该如何更新——Service Worker 47
• 3.3.3 LocalStorage与SessionStorage 48
• 3.3.4 实战演练：利用IndexedDB实现便签管理 51
• 3.4 图像效果 56
• 3.4.1 使用Canvas绘制一个简单的饼图 56
• 3.4.2 使用SVG实现奥运五环 58
• 3.4.3 WebGL带来了3D图像功能 60
• 3.5 不一样的通信 62
• 3.5.1 PostMessages 62
• 3.5.2 XMLHttpRequest Level 2 65
• 3.5.3 Server Sent Event 69
• 3.5.4 WebSocket 72
• 3.5.5 WebRTC 73
• 3.6 其他常用特性 77
• 3.6.1 History API与单页应用 77
• 3.6.2 Drag和Drop介绍 79
• 3.6.3 利用Web Workers加速应用计算 81
• 3.6.4 利用Performance API分析网站性能 82
• 3.7 本章小结 85
• 第4章　CSS 3 必会实战技巧 86
• 4.1 认识CSS 3 86
• 4.1.1 什么是CSS 3 87
• 4.1.2 移动Web的CSS 3现状 89
• 4.1.3 用Modernizr检测浏览器是否支持CSS 3 93
• 4.2 选择器 96
• 4.2.1 常见选择器 97
• 4.2.2 伪类和伪元素 99
• 4.2.3 优先级和权重 104
• 4.3 响应式开发 106
• 4.3.1 常见设备的宽高 106
• 4.3.2 Flex弹性盒布局 108
• 4.3.3 媒体查询（Media Query） 112
• 4.3.4 用rem开发响应式设计 115
• 4.3.5 多列（Multiple Columns） 119
• 4.4 动效 122
• 4.4.1 转换（Transform） 122
• 4.4.2 过渡（Transition） 126
• 4.4.3 动画（Animation） 128
• 4.5 常用特性 131
• 4.5.1 开放字体格式（WOFF） 131
• 4.5.2 背景（Backgrounds） 134
• 4.5.3 颜色（Color） 138
• 4.5.4 文字效果（Text Effects） 141
• 4.5.5 边框（Border） 144
• 4.6 预编译 147
• 4.6.1 Less介绍和安装 147
• 4.6.2 Less使用 150
• 4.6.3 Sass介绍和安装 154
• 4.6.4 Sass使用 156
• 4.6.5 Compass的安装和使用 160
• 4.7 本章小结 163
• 第5章　JavaScript关键语法及使用技巧 164
• 5.1 理解JavaScript 164
• 5.1.1 语言基础 165
• 5.1.2 函数和参数 168
• 5.2 事件 171
• 5.2.1 事件概述 171
• 5.2.2 事件委托 172
• 5.2.3 移动端事件 175
• 5.3 作用域、闭包和this 178
• 5.3.1 使用let实现块级作用域 178
• 5.3.2 闭包 180
• 5.3.3 采用call、apply、bind改变this 182
• 5.4 面向对象 184
• 5.4.1 原型和原型链 184
• 5.4.2 Mixin模式 186
• 5.4.3 ECMAScript 6的Class和Extends 188
• 5.5 异步编程 189
• 5.5.1 AJAX中的Callback回调函数 189
• 5.5.2 Promise模式 190
• 5.5.3 生成器Generator 192
• 5.6 模块化 194
• 5.6.1 为什么需要模块化 195
• 5.6.2 AMD和CMD规范 197
• 5.6.3 ECMAScript 6标准的模块支持 205
• 5.7 ECMAScript 6其他常用功能 207
• 5.7.1 基础数据类型的扩展 207
• 5.7.2 使用解构赋值来简化代码 210
• 5.7.3 使用Babel插件提前使用新特性 212
• 5.8 本章小结 215
• 第6章　HTML 5 移动开发实战 216
• 6.1 在地图上显示行走轨迹 216
• 6.2 仿原生相册 220
• 6.2.1 实现相册初始展示页 221
• 6.2.2 通过手势操作控制相片 222
• 6.3 使用Socket.IO制作小型聊天室 224
• 6.3.1 前端HTML+JavaScript实现聊天界面 225
• 6.3.2 服务器端Node.js监听连接 227
• 6.4 移动端拍照上传实践 228
• 6.4.1 前端HTML+CSS+JavaScript 229
• 6.4.2 服务器端Node.js 232
• 6.5 利用Microdata进行SEO优化 232
• 6.5.1 认识Microdata 233
• 6.5.2 提升网页SEO效果 233
• 6.6 制作一个带字幕的视频播放器 237
• 6.7 使用Pixi.js制作“抓住开学君”游戏（Canvas+WebGL） 242
• 6.8 用Canvas制作刮刮卡 248
• 6.9 实战演练：实现3D全景效果 251
• 6.9.1 需要的CSS 3特性 251
• 6.9.2 实现原理 251
• 6.9.3 实现代码 253
• 6.10 本章小结 255
• 第7章　移动网页样式布局实战 256
• 7.1 静态布局的实际应用 256
• 7.1.1 设计活动页面静态布局 257
• 7.1.2 静态布局在移动端上的自适应 257
• 7.2 水平居中与垂直居中实战 259
• 7.2.1 水平居中 259
• 7.2.2 自适应块级元素水平居中 260
• 7.2.3 行内元素垂直居中 261
• 7.2.4 块级元素的垂直居中 263
• 7.2.5 基于视口单位的解决方案 264
• 7.2.6 基于Flexbox的解决方案 265
• 7.3 栅格系统实现响应式列表 267
• 7.3.1 实现栅格布局 267
• 7.3.2 栅格布局的原理 269
• 7.4 Flex多栏布局实战 269
• 7.5 实战演练：沪江网校首页rem布局实践 272
• 7.6 实战演练：侧边栏的滑进滑出效果 276
• 7.7 实战演练：模拟原生的页面切换效果 280
• 7.7.1 实现页面切换过渡效果 280
• 7.7.2 模拟切换原理解析 283
• 7.8 提高Web动画的性能实战 284
• 7.8.1 使用CSS 3动画 284
• 7.8.2 使用高性能的JavaScript动画 285
• 7.9 实战演练：课程分类列表实战 286
• 7.9.1 实现主页结构 287
• 7.9.2 响应式CSS实现（Compass） 289
• 7.9.3 添加页面动态效果 293
• 7.10 本章小结 294
• 第8章　前端工程化实战 295
• 8.1 前端工程化 295
• 8.1.1 前端工程化的必要性 296
• 8.1.2 前端工程化的发展史 298
• 8.2 工程化入门Grunt 300
• 8.2.1 安装和配置 301
• 8.2.2 Grunt插件 302
• 8.2.3 实战演练：使用Grunt开发一个简易相册 305
• 8.3 使用Gulp构建一个ECMAScript 6和Sass应用 309
• 8.3.1 安装和配置 309
• 8.3.2 预处理任务 310
• 8.3.3 实战演练：采用ECMAScript 6开发一个Markdown编辑器 312
• 8.3.4 代码检查任务 315
• 8.3.5 代码合并、压缩、重命名任务 317
• 8.3.6 监听文件变化自动构建 318
• 8.4 实战演练：使用Webpack构建一个React应用 320
• 8.4.1 安装和配置 320
• 8.4.2 常用的加载器和插件 323
• 8.4.3 缓存控制 327
• 8.4.4 简化模块引用 330
• 8.4.5 异步模块加载 332
• 8.4.6 使用Source Map调试代码 335
• 8.5 本章小结 338
• 第9章　移动Web常用开发方式实战 339
• 9.1 基于DOM的开发方式 339
• 9.1.1 使用Zepto和前端模板开发简单备忘录 340
• 9.1.2 解决原生单击事件的缺陷 341
• 9.1.3 为何抛弃掉Zepto 343
• 9.2 基于React的开发方式 345
• 9.2.1 使用JSX语法创建React组件 345
• 9.2.2 在实践中掌握React生命周期 348
• 9.2.3 实现组件间通信 353
• 9.2.4 实现组件关注分离 355
• 9.2.5 实战演练：运用组件化方式开发一个备忘录 358
• 9.2.6 如何管理应用的状态 364
• 9.2.7 添加动画效果 366
• 9.2.8 提高React组件性能 369
• 9.3 基于Vue.js的开发方式 372
• 9.3.1 实战演练：开发一个简单的备忘录应用（Vue.js 2.0） 372
• 9.3.2 管理应用的状态及实现组件间的通信 375
• 9.3.3 添加动画效果 379
• 9.4 打造单页应用SPA 381
• 9.4.1 单页应用的优势是什么 382
• 9.4.2 实战演练：实现一个单页路由 382
• 9.4.3 实战演练：使用React开发一个简单的单页应用 384
• 9.4.4 单页应用的状态管理 386
• 9.5 本章小结 388
• 第10章　混合式开发实战 389
• 10.1 为什么需要混合式开发 389
• 10.1.1 混合式开发种类 389
• 10.1.2 混合式开发的优势 390
• 10.1.3 选择合适的混合式开发方案 391
• 10.2 Cordova开发入门 392
• 10.2.1 JavaScript和Native互相调用 392
• 10.2.2 Cordova介绍和安装 394
• 10.2.3 Cordova开发使用 397
• 10.3 React Native实战 400
• 10.3.1 React Native简介 400
• 10.3.2 React Native样式和布局 402
• 10.3.3 React Native组件概念 404
• 10.3.4 简单组件实战 404
• 10.3.5 复合组件实战 405
• 10.3.6 第三方组件实战 406
• 10.3.7 常用API实践 407
• 10.4 实战演练：用React Native开发新闻阅读应用 410
• 10.4.1 React Native的工程项目结构一览 410
• 10.4.2 列表页 411
• 10.4.3 新闻评论页 414
• 10.4.4 新闻展示页 414
• 10.5 本章小结 415
• 第11章　前端开发调试实战 417
• 11.1 浏览器调试 417
• 11.1.1 Chrome开发者工具 418
• 11.1.2 Safari开发者工具 421
• 11.2 代理工具 424
• 11.2.1 Mac OS下Charles的用法 424
• 11.2.2 Windows下Fiddler的用法 426
• 11.3 多终端同步工具 428
• 11.3.1 多设备浏览器同步测试工具BrowserSync 429
• 11.3.2 双向自动刷新样式工具Emmet LiveStyle 431
• 11.4 模拟器调试 432
• 11.4.1 Android模拟器调试 432
• 11.4.2 iOS模拟器调试 434
• 11.4.3 在线模拟器Manymo 436
• 11.5 多平台调试 437
• 11.5.1 网站响应式设计测试工具Ghostlab 437
• 11.5.2 移动端Web开发调试工具Weinre 439
• 11.5.3 JavaScript远程调试和测试工具Vorlon.JS 442
• 11.6 云真机调试 444
• 11.6.1 浏览器兼容性云端测试应用BrowserStack 444
• 11.6.2 Web端移动设备管理控制工具STF 446
• 11.6.3 多浏览器兼容性测试平台F2etest 448
• 11.7 React调试 452
• 11.7.1 React Developer Tools 452
• 11.7.2 Redux DevTools 455
• 11.8 本章小结 458
• 第12章　前端单元测试实战 459
• 12.1 JavaScript单元测试框架Jasmine实战 459
• 12.2 使用Mocha和Chai在Node.js进行单元测试 462
• 12.3 使用Sinon辅助单元测试 465
• 12.4 使用Karma自动化单元测试 468
• 12.5 使用Istanbul计算代码覆盖率 470
• 12.6 使用Benchmark.js进行基准测试 473
• 12.7 实战演练：React版备忘录项目的完整单元测试 475
• 12.8 本章小结 479
• 第13章　前端性能优化实战 480
• 13.1 常用网站性能优化指标 480
• 13.1.1 网页的资源请求与加载阶段 481
• 13.1.2 网页渲染阶段 482
• 13.1.3 JavaScript脚本的执行速度 484
• 13.2 依旧有效的Yahoo性能优化法则 484
• 13.3 性能优化工具使用实战 486
• 13.3.1 YSlow 486
• 13.3.2 PageSpeed 487
• 13.3.3 WebPagetest 488
• 13.4 HTTP协议头缓存实战 489
• 13.4.1 客户端缓存流程 489
• 13.4.2 缓存协议内容 490
• 13.4.3 实战演练：HTTP缓存 491
• 13.5 资源按需加载实战 492
• 13.5.1 基于RequireJS的按需加载 492
• 13.5.2 基于Webpack的按需加载 493
• 13.5.3 图片懒加载 494
• 13.6 不同网络类型的优化实战 495
• 13.6.1 获取网络类型 495
• 13.6.2 弱网图片优化 496
• 13.6.3 弱网缓存优化 496
• 13.7 实战演练：Nginx配置Combo合并HTTP请求 497
• 13.7.1 安装Nginx和文件合并模块 498
• 13.7.2 配置Nginx和Combo 499
• 13.8 本章小结 499
• 第14章　项目实战：搭建直播平台（Cordova+Koa+React） 500
• 14.1 项目的安装和启动 500
• 14.1.1 安装依赖 501
• 14.1.2 启动项目 501
• 14.1.3 Cordova打包 502
• 14.2 直播平台功能预览 502
• 14.2.1 直播流程 503
• 14.2.2 直播核心页面 503
• 14.3 页面的布局和结构 504
• 14.3.1 首页 504
• 14.3.2 发起直播页面 505
• 14.3.3 观看直播页面 505
• 14.4 搭建WebRTC服务端——Koa 506
• 14.5 实现多人在线直播功能 512
• 14.6 实现弹幕客户端与服务端通信 517
• 14.6.1 客户端与服务端通信的过程 517
• 14.6.2 客户端代码设计——React 518
• 14.6.3 服务端代码设计 520
• 14.7 本章小结 521