《移动web前端高效开发实战:html 5 + css 3 + javascript + webp》_sample


乡 web 喝稀:离主汇介绍:实战 忡·TML 5 css 3 jetVCfScy1:pt webpetc~己 Reetct Nett~ve vueJs NooleJs iKcamp 著 常手王苦也服祉· Publishing House of Electronics Industry 北京 •BEI丑NG 内容简介 移动互联网的兴起和快速普及,给前端开发人员带来了前所未有的新机遇。移动 Web 前端技术 作 为整个技术链条中重要的一环,却乱象丛生。本书是一本梳理移动前端和 Native 客户端技术体系的入 门 实战书。 本书涵盖了移动 Web 前端开发中的各个关键技术环节,共 14 章。分别从 HTMLS 、 css 3 、 JavaScript 的 ECMAScript 5 和 ECMAScript 6 版本、移动端常用布局方案、 MV *类新时代框架 、预编译技术、性能优 化、开发调试、混合式应用、单元测试、 工 程化等方面全面地还原 一 线互联网公司 Web 前端技术拢 。 创作本书的初衷是帮助移动 Web 前端开发领域的工程师们,勾画出 一 张实用并且具体的技术图, 帮 助读者正确且快速地掌握学习路径。本书篇幅有限,力求精简,只列举了各技术核中核心关键部分, 包括 大量基于 Web 前端的优秀开源技术类库和框架介绍,是进入移动 Web 开发领域的绝佳之选。 未经许可,不得以任何方式复制或抄袭本书之部分或全部内容。 版权所有,侵权必究 。 图书在版编目 CCIP )数据 移动 Web 前端高效开发实战: HTML S+CSS 3+JavaScript+Webpack+React Native+Vue.js+Node .j s/ iKcamp 著一北京:电子工业出版社, 2017.9 ISBN 978-7-121-32481-9 I. ①移… II . ① i …皿.①超文本标记语言一程序设计 ②网页制作工具③ JAVA 语言一程序设计 川① TP312.8 ② TP393.092.2 中国版本图书馆 CIP 数据核字( 2017 )第 194788 号 责任编辑:董英 印 刷:三河市鑫金马印装有限公司 装 订:三河市鑫金马印装有限公司 出版发行:电子工业出版社 北京市海淀区万寿路 173 信箱 开 本: 787 × 980 1/16 印张: 33.75 版 次: 2017 年 9 月第 1 版 印 次: 2017 年 9 月第 1 次印刷 印数: 3000 册定价: 89.00 元 邮编: 100036 字数: 768 千字 凡所购买电子工业出版社图书有缺损问题,请向购买书店调换 。若书店售缺,请与本社发行部联系, 联系及邮购电话: (010) 88254888, 88258888 . 质量投诉请发邮件至 zlts@phei.com .cn , 盗版侵权举报请发邮件至 dbqq@phei.com . cn . 本书咨询联系方式: 010-51260888-819, faq@phei.com.cn 。 刚昌 国内从 2012 年开始,移动端设备流量呈现大面积爆发式增长 ,到 2017 年己经达到 75%, 预计 2 018 年这一比例会达到 79% 。在移动的浪潮下,前端工程师的战场面临着一次巨大的迁移, 区别于 传统的 PC 端 Web 开发,移动终端给前端工程师带来了新的挑战,但更多的是机遇。令 人激动的是,前端工程师是一群一直信奉“ Stay Hungry, Stay Foolish ,,的伙伴,充满激情和活 力,时 刻拥抱变化,追求人机交互的极致。 恍若隔世,犹记得在 In ternet Explorer 6 时代,前端工程师忙碌于兼容各种奇异浏览器,受 困于职 业的被误解,受限于业务场景的单一,壮志未酬的身影。时至今日,前端领域技术技日 渐宽广 和深厚,向后有基于 Node.js 的大规模前后端分离实践,向前有基于 React Native 或 Weex 的多端 融合方案,从 PC 端到移动端有大量优秀 MV *类框架的探索和应用,身后有诸如 Webpack 或 R ollup 的工程化支持 。 作为这个时代身处移动变革中的前端工程师的我们,应保持信仰,不 断学习 前进,努力构建 一 个精彩的多元化世界。 本书特点 1. 本书所有案例考虑移动设备的开发场景,从跨终端、热部署、开放性等方面入手,为开 发者提供更高效的开发体验 。 2. 本书内容技术新颖、与时俱进,结合时下最热门的技术,如 HTML 5 、 css 3 、 ES6 、 Node.js 、 React 、 Webpack 、 Cordova 、 React Nati v e 、 Mocha ,让读者在学习移动 Web 前 端技术的同时,了解并熟识更多相关的世界先进开源解决方案。 3. 本书案例贴近项目开发真实环境,结合大量成熟第三方组件和框架的使用,帮助读者快 移动 Web 前端高效开发实战 HTML 5 + CSS 3 +JavaScript+ Webpack + React Native + Vue.js + Node.js 速找到问题的最优解决方案。 4. 本书的目的就是帮助读者形成思维方法论和构建牢固的知识体系,不管是移动 Web 还 是 Native 客户端,还是跨终端、跨平台,都能在本书中找到合适的技术方案 。 , \ I/ 且作脯 ~\ // /-“ 应日号:;三 移动We唰蝙顺顺战 i e块化AM ~'~. ~:~~~ 飞 "',~…用叫 I ~ \ i 单页应用SPA实战案例 \面亟面匾;;Fative 本书的技术体系 10. 项目实战 · 搭建莲铺平台( Cordova+Koa +React+WebRTC) 性能优化指标 且随 时 一把牛端 加 一前 市 μ 。。 时 斌试 }防化化率 ψ 成战 测测蛐 唰动动 …益 、测实 元元拟自 -自 叶 覆 准试 单单镇斌斌码篡测” ·乒第测 叩测 与代元 Mhm 一戴一兀元 伽 单 J阳」 M m 单单吕 川 h 项 Et 2” e nHH 本书主要作者(排名不分先后) 本书 由 iKcamp 团队制作完成,主要成员如下。 •IV• 前言 陈达孚, 2015 年研究生毕业于香港中文大学计算机专业,现为沪江 Web 前端架构部成员, 主要 进行前端新技术调研实践工作,曾在 FDCon2017 上 分享“基于 React Native 三 端融合的应 用 和 实 践” 。 朱会震, 10 年 Web 开发经验,曾任 CSDN 架构师,负责多个核心产品的研发工作 。 近几 年专注 于移动 Web 开发、前端工程化、高效能等方面的研究。现就职于沪江,负责沪江网校 Web 前端开发和管理工作。 哈志辉,沪江 CC talk 产 品线前端架构师,有过多年的前后端开发及架构经验。在前后端分 离、 Webpack 构建、 React 单页应用及自动化等方面有 丰 富的经验。 干理,曾就职于大众点评等互联网公司,现就职于沪江学金网络。 React 忠实爱好者,喜欢 研究 新技术,信奉“没有最好的技术,只有最合适的技术”。 戴亮,近十年前后端开发经验 。 2014 年加入沪江 Web 前端架构组,负责 UI 组件、移动打 包平台 等模块开发,推动 Node.js 前后端分离方案的落地 。 曾在 GMTC 2017 上分享“沪江基于 N ode.js 大规模应用实践” 。 严明坤, 2003 年开始从事网站开发工作, 2007 年赴上海发展并专注于前端领域,曾就职于 盛大 网络,现就职于沪 江。 易未来,原沪江 Web 前端架构师,现任职万达网络科技集团资深开发工程师 。 多年前后端 开发经 验,现 专 注于前端开发,先后在 EMC 、携程、沪江从事相关开发及管理工作 。 周遥, 《 HT岛1L 5 网页开发实例详解 》 作者,先后在盛大网络、大众点评网就职,从事相 关开发 及管理 工 作,现为沪江 Web 前端横向负责人。 本书读者 ·移动 Web 开发初学者和前端爱好者 • APP 的 Native 客户端开发人员 ·网页和移动网页从业人员 ·从事后端开发对前端有兴趣的人员 .大中专院校的学生 ·可作为各种培训学校的入门教程 •V• 移动 Web 前端高效开发实战 HTML 5 + CSS 3 +JavaScript+ Webpack + React Native+ Vue .j s + Node.JS 读者服务 轻松注册成为博文视点社区用户 ( www. broad view.co m .cn ),扫码直达本书页面。 下载资源: 本书如提供示例代码及资源文件,均可在主盖全盘处下载 。 提交勘误: 您对书中内容的修改意见可在主主蛊盖处提交,若被采纳,将获赠 博文 视点社区积分(在您购买电子书时,积分可用来抵扣相应金额) 。 交流互动 :在页面下方主主主主处留下您的疑问或观点,与我们和其他读者 一同学 习交流。 页面入口: htφ :// www. broad view.e o m . cn/32481 •VI• 录同口 第 1 章 初识移动 Web 前端·· ··· · · · ···· · · · · ·· · · · · · · ·… …… .. ... . .….................................... . ............. ..... . 1 1.1 移动 We b 前 端史..........….......…. . . . ...…......... . . ... . .... ... …· ·…. . ... .... . . ... .......…. . . . ..... . .. ... .…. ....... 1 1.1.l Web 开发的变迁··································································…... .. ..…....................... 2 1. 1.2 移动 We b 与 H U.在L5 不 得不说 的 关系 .. . .... ..…........…· ·· ······ ·· ··· · ··· · · · · · · …… ............ 3 1.1 .3 移动 We b 与原生应用 的优劣势.. . ... ..... . .. . ..… …… · ·…….. . . .... . ......…........ . …... . .... . ... 5 1.2 移动 Web 前端现状与未来.. . ... ... …..... . .. … …····· · ········…....................................................... 6 1.2.l 移动 We b 的现状 ........ . ..... . .... . .... .. …….. . ......... . ........ ..… . ..... . .…. . ......… ... .. .............. .. 6 1.2.2 您需要掌握的知识体系... ...... .... .…....... . .….. . ....... . .... . . . . . . . . ... . . .......…· ·········· · ············ 7 1.2.3 技术拐点与未来趋势... . ...........………... . ...…..... . ............ . . . .…. . . . ... ... . . ... . … . . . . ........ .. 10 1.3 常见问题....... .. .... .... ….. . . ... .... ...... .. .. . ... . .. ... ... ... .. . . .......................................……................... 11 1.3.l 移动 Web 前端开发有前景吗. . . ... . ..... .. . ..... .. ..... ... . . ...........…. .......…...........…........ 11 1.3.2 PC W e b 和移动 Web 开 发区别. .... .....……….... .... .. ... .. ... . . . ... .... ........ . .... ................. 12 1.4 本章小结............. ..….... ... .... . ..…. ... ... .. . .. . .... ........ . ..................….............…............................ 13 第 2 章 移动 Web 开发环境搭建.........….................. . . . ....................... . .................. . ... . ... . . . . . ... 14 2.1 Visual Studio Code 免费跨平台编辑器..............................…......................….......…......... 14 2.2 使用 Node.js .........….... .. ... ..... ... .. ............ .. ..... .... ......…. .. ......................... ......…........….. ....... 16 2.2.l Node.js 的用途.................…................................................….........…................ . .... 16 2.2.2 安装和调试 N ode .js ............. ...…........… ·· ·······….........................….......................... 17 2.2.3 什么是 NPM .......... ............... …....... ...... .. ..…. .. ... ........ ...... .... ..... .... ...... ..….........…... 19 2.2.4 Web 代理工具 NProxy ... .... ....... ....... .. ............. .... ..... .. ... ... ... ....…··…. ..... .. .... ..... .. .. .. 22 移动 Web 前端高效开发实战 HTML 5 + CSS 3 +JavaScript+ Webpack + React Native+ Vue .js + Node.js 2 .2.5 HTTP 服务器 http-server ..……···············…·········· ·········· ··….. ........ .......... ..….. ......... 24 2.3 本章小结................................….......................................................…...............……...... ..... 25 第 3 章 HTMLS 必会实际常用特性.............….................…......... . ....... . ........................ ........ 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 实战演练 :调用摄像 头 拍个照.. . ...... . . . . ........ . .. .. .. . .... . . ... ............ .. ... . .....................刀 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 Se 凹 er 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 •VIII • 目录 3.7 本章小结.........................................….................................….................................…......... 85 第 4 章 CSS3 必会实战技巧..................................... .. ... . . ... ....... . . . .......... . ... . . . ..................... 86 4.1 认识 css 3 ..........…··……………………………………………………………………………………………··“ 4 . 1.1 什么是 css 3 ............................ ..…·· ··············…........….......…....... ..... ..........…....... 87 4 . l.2 移动 Web 的 css 3 现状..........…·········· · ····································…........................ 89 4.1.3 用 Modemizr 检测浏览器是否支持 css 3 ........................................................... 93 4.2 选择器....................….......….. .. ...…·······…·······…… .. .... ..... .. .…. ......…·······… .......….... .... ........ 96 4.2.l 常见选择器..... .. .............….................... .. .. .. .. . ........ ..... ..... ... ..…..... ....... . .….............. 97 4.2.2 伪类和伪元素......................................... . ................................... : ............. .... .......... 99 4.2.3 优先级和权重….......….......….......….......….......….......…·····························…........ 104 4 .3 响应式开发.........…….................…...................... . .…·········…….......................................... 106 4.3.l 常见设备的宽高. ... .. ... ... . .. . . .. ....... ..... . ... .. . .. ..... ..... ..... ...... . . ... ... ... ............. .. ..... ..... .. 106 4 .3.2 Flex 弹性盒布局.. ........ . .................... ...… . ......……...............….......…..................... 108 4.3.3 媒体查询( Me dia Query) .... ...... .......................................... .... . .. .... .. .. ........ ....... 112 4.3.4 用 rem 开发响应式设计. . ...... . ....... .… ..... . ...…·················…·························…....... 115 4.3.5 多列( Multiple Columns) .................… .........…............ .... ........ ...... ..……............ 119 4.4 动效........................................…........................ .. . ........ . ........ . .........……............................ 122 4.4 . l 转换( Transform) ..............…….. .... .….. .......................….........…........................ 122 4.4 .2 过渡( Transition) .............................. ........……… .......…······ ·…........................ . 126 4.4.3 动画( Animation) ........................ ........ .. ............................................................ 128 4 .5 常用特性…................ ................. .... ....... .... ......... .... ...................................... .... .......... . . .... 131 4.5.1 开放字体格式 CW OFF ) ........................................…..............…….......…........... 131 4.5.2 背景 CBackgroun ds ) ............…….......… .......….......…..............…….......…............ 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 •IX• 移动 Web 前端高效开发实战 HTML 5 + CSS 3 + JavaSc 『 ipt + Webpack + React Native + Vue .js + Node.is 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.l 原型和原型链............ ... .. . ...... .............. ................. . ........ .. .… · ···· ···· · ··· ·……...... ....... 184 5.4.2 Mixin 模式· ····· ··· ····· · ····· · ……….... ... .... . . ........ . . . .. . ... .. ……........…................. ... ........ 186 5.4.3 ECMAScript 6 的 Clas s 和 Extends ....................... .............................................. 188 5.5 异步编程.........….........…········ · ··· ········· ··· ·· ··········· ·· · ·· ············· · ············…...............….... ...... 189 5.5.l 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.l 基础数据类型的扩展 . ........... ...... . ... . . ... ... . . ... . .. .. .. ............. . ....... ........ .. .. .... . ........ ... 207 5.7.2 使用解构赋值来简化代码. ...... . .…... .. .......... .. ...... . . ..... .. .... ................... . . .… .......... 210 5.7.3 使用 Babel 插件提前使用新特性............ . .....…….......... . . ....…......... .... ... ... ...... .... 212 5.8 本章小结 . . . . . ... . . . . . . ....... . ... . . .. ... . . ............ . ..... . . .. .... . ...... . ..................... . . .. .................. .. .. .. ...... 215 •X• 目录 第 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+ JavaScript ...... ... ......….. ......…………......... ... ....…................. 22 9 6.4.2 服务器端 Nod 巳..................................... . .. . ..... . .............................................. ... ... 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.l 需要的 c ss 3 特性.............…...... . .......... … .........….........…......... ··· ······ ···· ··•·· · ..... 251 6 旦 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.l 水平居中.........…...............…............... .. ......…….......…..............…................. . ....... 259 7.2.2 自适应块级元素水平居中............. ..….... ............... . ...... .... .. . ............... . ................ 260 7.2.3 行内元素垂直居中···· · ··….......... ..... ...........….. .. ....……·· ··· · ··…... ...... ... ........... . ... . ... 261 7.2.4 块级元素的垂直居中................... . .....…·········………...............…........................ . .. 263 •XI• 移动 Web 前端高效开发实战, HTML 5 + CSS 3 +JavaScript+ Webpack + React Native+ Vue.js + Node.JS 7.2.5 基于视口单位的解决方案..........….......…·····································…... . ...…….. .... 264 7.2.6 基于 Flex box 的解决 方案........ ... .......................…….........…................................ 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.l 实现页面切换过渡效果..........….........…….....................................….............. ..... 280 7.7.2 模拟切换原理解析....................…..............……..............……..............…............... 283 7.8 提高 Web 动画的性能实战....................................................................…........ ............... 284 7.8.l 使用 css 3 动画.... ......... . ...............…....... ..…. ......…................…....................... . .. 284 7.8.2 使用高性能的 JavaScript 动画..........................…………·······………….............. ... 285 7.9 实战演练:课程分类列表实战.......................…......................….........................…...... . .. 286 7.9.l 实现主页结构............ .. ..….......….........…...............….......…........................... ... . ... 287 7.9.2 响应式 css 实现( Compass) ........................................................................ ... 289 7.9.3 添加页面动态效果.... . ................................................................... . ............... ....... 29 3 7.10 本章小结.............................. . ............ . . . . ...... . ...... . ........................................... . ............. . .. 29 4 第 8 章前端工程化实战··· · ··· ···· ·· ·· · ·…… ….......... .....… ..... ...... . .............................................. 295 8.1 前端工程化.......….................. . .....…............... ... ........... ...…..............................….......... .. . 295 8.1.l 前端工程化的必要性 . ... . .........….......…. .... ... .... ... ...... ... .....….......…… ....... : ........... 296 8.1.2 前端工程化的发展史 . ..............……….......……..............…............. ........… ….. ....... 298 8.2 工程化入门 Grunt.. ..……........ .............................. .…... .............….......................….......….. 300 8.2.1 安装和配置.........…···· · ·················…·······················…...................… ….......…......... 301 8.2.2 Grunt 插件.......... ... .... . ................................................. . ................................. .... .. . 302 8.3 使用 Gulp 构建一个 ECMAScript 6 和 Sass 应用...............…………...............….......... 309 •X 川· 8.3.l 安装和配置................ . ..……..............................….......….......…...... .….......…......... 309 8.3.2 预处理任务.........….... . ............….......................….......…….........…... ..................... 310 8.3.3 实战演练:采用 ECMAScript 6 开发一个 Markdown 编辑器............... ....... ... . 312 目录 8.3.4 代码检查任务.......... . ...…… …. .. . .. . … ... . . . . . . . . ... . .. . . ...…. . . . ... . . . .. . ... . .. . ... . ...…... .... .. ...... 315 8.3.5 代码合井、压缩 、 重命名任务....... . .…… . ..... . ...... . . . . . ... . . . . . . . ............. . .. . ............... 317 8.3.6 监昕文件变化自动构建 . . . . . . . . . . . .. . . . ... ... . . . . . . . . ...................................... . ........ . ......... 31 8 8.4 实战演练:使用 W e bpack 构建一个 React 应用. .. . . .. .. ... . .... . . .....… . .. . .... . . ... .. .. . … … . . . . .. . .. 320 8.4.2 常用的加载器和插件..................…… . .... . ..... . ...…·…….... . ...... . ... . . . ... . ..... . ......... . .... 32 3 8.4.3 缓存控制.... . . . ......... . . . .....…........…. . ................. . ...... . .. . .. . ....…· · ….. . ... .… ............. . . . . 32 7 8.4.4 简化模块引用. . .... . ... … ... . . . .. . ….... . ... . ........... . .. . . .… . .. . . . .… .. . .... . .. .. ... . . . ... . . ... . . ... . . . . . . . . 330 8.4 5 异步模块加载..........…··…. . .....… . . . ... . …. . . . . . . . . . . . . . . . .. .. . . . . . . .. . .. .. . . . . . . . ... . . ... . . . . . .... . .... . .. 33 2 8.4.6 使用 S o urce M ap 调试代码 . ...... ... . .…… . . . . . .. .. …. . . . . . . . … ... ... . ... .. . . . . ... . . . .. .. ... ... . ... . . . .. 335 8.5 本章小结. . ... . .….. . ... . ......... . ... . ........ . ..... . ... . .. .. . . . . . . ..... . ... .. .. . .. . . . . . . . . . . .. ... .. . . .. ... . .. .. . . . . ... .. .. .. . .... 338 第 9 章 移动 Web 常用开发方式实战...... . ..…. . . . .....… . . . ..... . .............. . ............... . ... . . . . . ... . . . . . .. 339 9.1 基于 D O M 的开发方式............. . ...... . .........….......…… . ........… … ……....... .... ...........……... 339 9.1.1 使用 Ze p to 和前端模板开发简单 备 忘录. . . . ............ . . . . . . . . . . . ... .. ... .. . .... . ... . . ..….. ... . . 340 9.1.2 解决原生单击事件的缺陷..... . ........................……........….... . ..….......…··…........... 341 9.1.3 为何抛弃掉 Ze pto ..……............... ...... .. .... ............. ......…. .... ..….. ...... …...... ........... .. 343 9 .2 基于 React 的开发方式..........…….... . ....... . .......... . ... . ... . ......….. . .. . . . . . . . . . . . ... . .. . ..... . ...... . ....... 345 9.2.l 使用 JSX 语法创建 React 组件.... . .... . .....…..... . .….......... . ... . ....... .…. ......…........... 345 9.2.2 在实践中掌握 R e ac t 生命周期 . . . . . . . . .… . . . ... ... . . . . . . .….. .. .. ..... . . . .. .. . . ... . .. . .................. 34 8 9.2.3 实现组件间通信 . ... . .. . . . . . . .. ..……....................... … .........................….......…............ 35 3 9.2.4 实现组件关注分离 .. ... ... . . .... .… · · … .. . .... . .. . .. .. .. . ... . . . . . . . . . . . ... . ..... .... . . . . . . ... . . . . . . . . . . . ....... 355 9.2.5 实战演练 : 运用组件 化 方式开发一个备忘录. . .. . ..….. . ......… ……. ......…… .. . . ... 35 8 9.2.6 如何管理应用的状态................... .. ...... . . . . . . . . . ............ . ... . . . ................ . . . . . . . . . . . . . . . ... . . 364 9.2.7 添加动画效果.... . ... ..... . . .….... .. . .. .... . .. … ... . . . ......... . . .. .. . . .. .............. . ....... .. .. .... . . . . . . .... 3 66 9.2 . 8 提高 R eac t 组件性能.... . ....…........ . ........…........……··…...... . .. . .... . .…. .. .. .. ..…····· · · 369 9 .3 基于 Vue.J S 的开发方式.................... . ......... . . . . . . . …... . . . ...…................ ... ......…................... 37 2 9.3.l 实战演练:开发一个简单的备忘录应用( Vue.js 2. 0 ) ... ...... .. ....….... ............. 3 7 2 9.3.2 管理应用的状态及实现组件 间的 通信 . . . . . .…. ... . .. .. .. . . ... ... . . . . . ........ ... . . ..... . . . . . ... ... . 375 9 .3.3 添加动画效果..................……................. . .....…...... . .................….. . .. . .. . ... . ........ ... .. 379 9.4 打造单页应用 SP A ...... .... …..... .. ..........…. ........... ...... ...... .......…........…. .... ............…......... 3 8 1 9.4.1 单页应用的优势是什么.. . . . . . .. . ... . . . .... . . . . . . ......... . . . . . . . . . . . ....... .. . . . . .. . .... . .................. . . 3 82 • XIII • 移动 Web 前端高效开发实战 HTML 5 + CSS 3 +JavaScript+ Webpack + React Native+ Vue .j s + Node.js 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.l JavaScript 和 Native 互相调用.... .. ....…......................….......….......….......….... . .. 392 10.2.2 Cordova 介绍和安装 .. .... ..…. . . ... . .. ... . . . .. . ... . . . ... . .... . ........................................ . .. ... 394 10 .2 .3 Cordova 开发使用. .. . ..........……......….......…....... ........…. . ....................…...... ... 397 10.3 React Native 实战· ··· ····· ·· ··… …… ....... .. . . .. ... . .. ... ............. . …··· · ············….......… .. .... ..... ....... 400 10.3 . l 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 .4 实战演练 :用 React Native 开发新闻阅读应用..... .. ......………··············…................ ... 410 10.4.l 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 •XIV• 目录 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.2 iOS 模拟器调试...................…·川............ . ....... . . ................................................... 434 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 浏览器兼容性云端测试应用 Browsers tack ........... ........…........….. .................. . 444 11.6.2 Web 端移动设备管理控制工具 STF ................................. ... ............................. 446 11.6.3 多浏览器兼容性测试平台凹 e test.. ..........…….......…··….......….......................... 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 计算代码覆盖率......... . ............ . ..... .. ........................... .... .....................… .47 0 12.6 使用 Benchmark. 进行基准测试.........................….......….......….. . ... .….... .................... 473 12.7 实战演练: React 版备忘录项目的完整单元测试.......…................ ... . . .. .. ...... .. ............ 475 • xv. 目录 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.l 首页..........…. . .....…..............…............... . ........ . ……................……...................... .. 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 •XVII• 第 1 章 初识移动 Web 前端 移动 Web 开发属于前端开发中的一个子集,专指移动设备上的 Web 前端开发工作。顺应着互 联网和硬件的升级,以 iPhone 出现后的移动设备爆发为起点,用户每天的上网方式发生了很大改变。 原本固定地点的 PC (Personal Computer,个人计算机)互联变为了如今随时随地的移动互联,几乎 人人都拥有一台属于自己的智能手机, 时时刻刻与世界的任何一个角落发生着联系。 传统前端开发者的日常工作内容也悄悄地发生了变化,开始由 PC 战场迁移至移动战场,同时, 开发使用的技术也同步进行着一轮又一轮的升级换代, Web 前端领域尤其明显。本章将从移动 Web 的发展历史、现在和未来三个角度帮助读者对其形成一个基本的认识 。 1.1 移动 Web 前端史 移动 Web 前端虽然兴起时间不长,发展却非常迅速,作为一名 Web 前端开发者,了解移动 Web 前端的发展是很有必要的。 • 1 • 移动 Web 前端高效开发实战 HTML 5 + CSS 3 +JavaScript+ Webpack + React Native+ Vue.js + Node.is 1.1.1 Web 开发的变迁 Web 的应用架构最早是在 1989 年由英国人 Tim Berners-Lee 提 出的, 在提 出的第二年,第一 台 Web 服务器诞生。此时的 Web 浏览器,只能展示静态的 HTML 内 容, 包含简单的文本和图像 。 1995 年, Java 语言问世, Web 端静态内容大批量地向动态 内 容迁移 , 这个变革是巨大的。随 后, Microso位发布了 Internet Explorer 4.0 ,其使用的 DHTML 技术 , 可 以使浏览器获得更好的展 示效果。 下面通过一组苹果官网不同时间节点的截图来对比 Web 早期的发展变化, 分别为 1 992 年 、 1997 年、 2000 年和 2017 年,如图 1.1 、图 1.2 、图 1.3 和图 1.4 所示。 图 1.1 1992 年的苹果网站 帽’”’* I 阳瞄 I iC施,由 。刷;.T’”· ιτZ飞 Apple Power ?-.但cG4. 气WM!Jz1101c ami以各le …y ( .. l剧……γ 马尚凶品阳岛牛牛牛牛二4山司司 I ·描”阳”帽-嘈叫.. ……嗣 - - 图 1.3 2000 年的苹果网站 Web 开发基本上可以分为三大阶段: • 2. p,嗡时曲, Ml< 。” 陆W H浏阳”班回回辄到鹏 侃品.但ll
还剩35页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 10 金币 [ 分享pdf获得金币 ] 0 人已下载

下载pdf

pdf贡献者

mozai

贡献于2018-06-28

下载需要 10 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf