《移动Web前端高效开发实战》

编辑推荐

★《移动Web前端高效开发实战》梳理了移动前端和Native客户端技术体系
★涵盖了移动Web前端开发中的各个关键技术环节
★全面地还原了一线互联网公司的Web前端技术栈
★含大量基于Web前端的优秀开源技术类库和框架介绍

内容简介

移动互联网的兴起和快速普及，给前端开发人员带来了新机遇。移动Web前端技术作为整个技术链条中重要的一环，却乱象丛生。《移动Web前端高效开发实战》是一本梳理移动前端和Native客户端技术体系的入门实战书。

《移动Web前端高效开发实战》涵盖了移动Web前端开发中的各个关键技术环节，共14章。分别从HTML5、CSS3、JavaScript的ECMAScript5和ECMAScript6版本、移动端常用布局方案、MV*类新时代框架、预编译技术、性能优化、开发调试、混合式应用、单元测试、工程化等方面全面地还原一线互联网公司Web前端技术栈。

创作《移动Web前端高效开发实战》的初衷是帮助移动Web前端开发领域的工程师们，勾画出一张实用并且具体的技术图，帮助读者正确且快速地掌握学习路径。《移动Web前端高效开发实战》篇幅有限，力求精简，只列举了各技术栈中核心关键部分，包括大量基于Web前端的优秀开源技术类库和框架介绍，是进入移动Web开发领域的实用指南。

作者简介

iKcamp由沪江Web前端团队中热爱原创和翻译的小伙伴发起，成立于2016年7月，"iK"代表布兰登?艾克（JavaScript之父）。追随JavaScript这门语言所秉持的精神，崇尚开放和自由的我们一同工作、分享、创作，等候更多有趣跳动的灵魂。

《移动Web前端高效开发实战》由iKcamp团队制作完成，主要成员如下。
陈达孚，2015年研究生毕业于香港中文大学计算机专业，现为沪江Web前端架构部成员，主要进行前端新技术调研实践工作，曾在FDCon2017上分享“基于ReactNative三端融合的应用和实践”。

朱会震，10年Web开发经验，曾任CSDN架构师，负责多个核心产品的研发工作。近几年专注于移动Web开发、前端工程化、高效能等方面的研究。现就职于沪江，负责沪江网校Web前端开发和管理工作。

哈志辉，沪江CCtalk产品线前端架构师，有过多年的前后端开发及架构经验。在前后端分离、Webpack构建、React单页应用及自动化等方面有丰富的经验。

干珺，曾就职于大众点评等互联网公司，现就职于沪江学金网络。React忠实爱好者，喜欢研究新技术。

戴亮，近十年前后端开发经验。2014年加入沪江Web前端架构组，负责UI组件、移动打包平台等模块开发，推动Node.js前后端分离方案的落地。曾在GMTC2017上分享“沪江基于Node.js大规模应用实践”。

严明坤，2003年开始从事网站开发工作，2007年赴上海发展并专注于前端领域，曾就职于盛大网络，现就职于沪江。

易未来，原沪江Web前端架构师，现任职万达网络科技集团资深开发工程师。多年前后端开发经验，现专注于前端开发，先后在EMC、携程、沪江从事相关开发及管理工作。

周遥，《HTML5网页开发实例详解》作者，先后在盛大网络、大众点评网就职，从事相关开发及管理工作，现为沪江Web前端横向负责人。

目录

第1章　初识移动Web前端1
1．1移动Web前端史1
1．1．1Web开发的变迁2
1．1．2移动Web与HTML5不得不说的关系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．2PCWeb和移动Web开发区别12
1．4本章小结13
第2章　移动Web开发环境搭建14
2．1VisualStudioCode免费跨平台编辑器14
2．2使用Node．js16
2．2．1Node．js的用途16
2．2．2安装和调试Node．js17
2．2．3什么是NPM19
2．2．4Web代理工具NProxy22
2．2．5HTTP服务器http-server24
2．3本章小结25
第3章　HTML5必会实际常用特性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离线之后资源该如何更新――ServiceWorker47
3．3．3LocalStorage与SessionStorage48
3．3．4实战演练：利用IndexedDB实现便签管理51
3．4图像效果56
3．4．1使用Canvas绘制一个简单的饼图56
3．4．2使用SVG实现奥运五环58
3．4．3WebGL带来了3D图像功能60
3．5不一样的通信62
3．5．1PostMessages62
3．5．2XMLHttpRequestLevel265
3．5．3ServerSentEvent69
3．5．4WebSocket72
3．5．5WebRTC73
3．6其他常用特性77
3．6．1HistoryAPI与单页应用77
3．6．2Drag和Drop介绍79
3．6．3利用WebWorkers加速应用计算81
3．6．4利用PerformanceAPI分析网站性能82
3．7本章小结85
第4章　CSS3必会实战技巧86
4．1认识CSS386
4．1．1什么是CSS387
4．1．2移动Web的CSS3现状89
4．1．3用Modernizr检测浏览器是否支持CSS393
4．2选择器96
4．2．1常见选择器97
4．2．2伪类和伪元素99
4．2．3优先级和权重104
4．3响应式开发106
4．3．1常见设备的宽高106
4．3．2Flex弹性盒布局108
4．3．3媒体查询（MediaQuery）112
4．3．4用rem开发响应式设计115
4．3．5多列（MultipleColumns）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文字效果（TextEffects）141
4．5．5边框（Border）144
4．6预编译147
4．6．1Less介绍和安装147
4．6．2Less使用150
4．6．3Sass介绍和安装154
4．6．4Sass使用156
4．6．5Compass的安装和使用160
4．7本章小结163
第5章　JavaScript关键语法及使用技巧164
5．1理解JavaScript164
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作用域、闭包和this178
5．3．1使用let实现块级作用域178
5．3．2闭包180
5．3．3采用call、apply、bind改变this182
5．4面向对象184
5．4．1原型和原型链184
5．4．2Mixin模式186
5．4．3ECMAScript6的Class和Extends188
5．5异步编程189
5．5．1AJAX中的Callback回调函数189
5．5．2Promise模式190
5．5．3生成器Generator192
5．6模块化194
5．6．1为什么需要模块化195
5．6．2AMD和CMD规范197
5．6．3ECMAScript6标准的模块支持205
5．7ECMAScript6其他常用功能207
5．7．1基础数据类型的扩展207
5．7．2使用解构赋值来简化代码210
5．7．3使用Babel插件提前使用新特性212
5．8本章小结215
第6章　HTML5移动开发实战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+JavaScript229
6．4．2服务器端Node．js232
6．5利用Microdata进行SEO优化232
6．5．1认识Microdata233
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需要的CSS3特性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．4Flex多栏布局实战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使用CSS3动画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工程化入门Grunt300
8．2．1安装和配置301
8．2．2Grunt插件302
8．2．3实战演练：使用Grunt开发一个简易相册305
8．3使用Gulp构建一个ECMAScript6和Sass应用309
8．3．1安装和配置309
8．3．2预处理任务310
8．3．3实战演练：采用ECMAScript6开发一个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使用SourceMap调试代码335
8．5本章小结338
第9章　移动Web常用开发方式实战339
9．1基于DOM的开发方式339
9．1．1使用Zepto和前端模板开发简单备忘录340
9．1．2解决原生单击事件的缺陷341
9．1．3为何抛弃掉Zepto343
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．js2．0）372
9．3．2管理应用的状态及实现组件间的通信375
9．3．3添加动画效果379
9．4打造单页应用SPA381
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．2Cordova开发入门392
10．2．1JavaScript和Native互相调用392
10．2．2Cordova介绍和安装394
10．2．3Cordova开发使用397
10．3ReactNative实战400
10．3．1ReactNative简介400
10．3．2ReactNative样式和布局402
10．3．3ReactNative组件概念404
10．3．4简单组件实战404
10．3．5复合组件实战405
10．3．6第三方组件实战406
10．3．7常用API实践407
10．4实战演练：用ReactNative开发新闻阅读应用410
10．4．1ReactNative的工程项目结构一览410
10．4．2列表页411
10．4．3新闻评论页414
10．4．4新闻展示页414
10．5本章小结415
第11章　前端开发调试实战417
11．1浏览器调试417
11．1．1Chrome开发者工具418
11．1．2Safari开发者工具421
11．2代理工具424
11．2．1MacOS下Charles的用法424
11．2．2Windows下Fiddler的用法426
11．3多终端同步工具428
11．3．1多设备浏览器同步测试工具BrowserSync429
11．3．2双向自动刷新样式工具EmmetLiveStyle431
11．4模拟器调试432
11．4．1Android模拟器调试432
11．4．2iOS模拟器调试434
11．4．3在线模拟器Manymo436
11．5多平台调试437
11．5．1网站响应式设计测试工具Ghostlab437
11．5．2移动端Web开发调试工具Weinre439
11．5．3JavaScript远程调试和测试工具Vorlon．JS442
11．6云真机调试444
11．6．1浏览器兼容性云端测试应用BrowserStack444
11．6．2Web端移动设备管理控制工具STF446
11．6．3多浏览器兼容性测试平台F2etest448
11．7React调试452
11．7．1ReactDeveloperTools452
11．7．2ReduxDevTools455
11．8本章小结458
第12章　前端单元测试实战459
12．1JavaScript单元测试框架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．3JavaScript脚本的执行速度484
13．2依旧有效的Yahoo性能优化法则484
13．3性能优化工具使用实战486
13．3．1YSlow486
13．3．2PageSpeed487
13．3．3WebPagetest488
13．4HTTP协议头缓存实战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和Combo499
13．8本章小结499
第14章　项目实战：搭建直播平台（Cordova+Koa+React）500
14．1项目的安装和启动500
14．1．1安装依赖501
14．1．2启动项目501
14．1．3Cordova打包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服务端――Koa506
14．5实现多人在线直播功能512
14．6实现弹幕客户端与服务端通信517
14．6．1客户端与服务端通信的过程517
14．6．2客户端代码设计――React518
14．6．3服务端代码设计520
14．7本章小结521

精彩书摘

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

Webpack是一个模块加载器兼打包工具，能把各种资源，例如脚本（JavaScript、TypeScript、JSX）、样式（CSS、Less、Sass）、图片（png、jpg、gif）等都作为模块来处理。目前，主流前端开发框架（如React、Vue.js）的官方实例项目均使用Webpack作为工程化工具。

8.4.1安装和配置

本节会创建一个简单的React项目，并使用Webpack构建开发环境以及打包生产环境所需的静态资源。项目目录结构如图8.10所示。

app文件夹存储打包前的静态文件，里面的文件会被Webpack打包，打包后的文件会存储到public文件夹。

index.js文件是入口脚本文件，内容如下：

importReact,{Component}from'react';//引入react包

importReactDOMfrom'react-dom';//引入react-dom包

importHellofrom'./hello';//引入依赖的Hello组件

classAppextendsComponent{//定义入口组件

render(){//绘制组件

return(

//使用Hello组件

)

}

}

ReactDOM.render(//绘制组件到页面

,

document.getElementById('root')

);

hello.js文件定义了一个React组件，被index.js文件使用，代码如下：

importReact,{Component}from'react';//引入react包

exportdefaultclassHelloextendsComponent{//定义Hello组件并导出

render(){//绘制组件

return(

HelloWorld

)

}

}

注意：React的详细使用会在后续章节中介绍，此处只是简单使用。

public文件夹存储需要被浏览器访问到的文件，打包后生成的入口脚本文件也会存储在这个文件夹当中。

index.html是入口页面文件，内容如下：

package.json文件是标准的NPM说明文件，这个文件可以通过NPM命令生成。打开命令行窗口，输入如下命令：

npminit

前言/序言

国内从2012年开始，移动端设备流量呈现大面积爆发式增长，到2017年已经达到75%，预计2018年这一比例会达到79%。在移动的浪潮下，前端工程师的战场面临着一次巨大的迁移，区别于传统的PC端Web开发，移动终端给前端工程师带来了新的挑战，但更多的是机遇。令人激动的是，前端工程师是一群一直信奉“StayHungry,StayFoolish”的伙伴，充满激情和活力，时刻拥抱变化，追求人机交互的极致。

恍若隔世，犹记得在InternetExplorer6时代，前端工程师忙碌于兼容各种奇异浏览器，受困于职业的被误解，受限于业务场景的单一，壮志未酬的身影。时至今日，前端领域技术栈日渐宽广和深厚，向后有基于Node.js的大规模前后端分离实践，向前有基于ReactNative或Weex的多端融合方案，从PC端到移动端有大量优秀MV*类框架的探索和应用，身后有诸如Webpack或Rollup的工程化支持。作为这个时代身处移动变革中的前端工程师的我们，应保持信仰，不断学习前进，努力构建一个精彩的多元化世界。

《移动Web前端高效开发实战》特点：

1.《移动Web前端高效开发实战》所有案例考虑移动设备的开发场景，从跨终端、热部署、开放性等方面入手，为开发者提供更高效的开发体验。

2.《移动Web前端高效开发实战》内容技术新颖、与时俱进，结合时下最热门的技术，如HTML5、CSS3、ES6、Node.js、React、Webpack、Cordova、ReactNative、Mocha，让读者在学习移动Web前端技术的同时，了解并熟识更多相关的世界先进开源解决方案。

3.《移动Web前端高效开发实战》案例贴近项目开发真实环境，结合大量成熟第三方组件和框架的使用，帮助读者快速找到问题的最优解决方案。

4.《移动Web前端高效开发实战》的目的就是帮助读者形成思维方法论和构建牢固的知识体系，不管是移动Web还是Native客户端，还是跨终端、跨平台，都能在《移动Web前端高效开发实战》中找到合适的技术方案。