前端跨界开发指南：JavaScript工具库原理解析与实战
精选30+经典JavaScript工具库，从工具库实战应用到底层原理，层层深度剖析，提供大量完整可运行的示例代码，展现多元有趣的JavaScript应用场景
基本信息
【插图】
编辑推荐
●精选30+经典JavaScript工具库●从工具库实战应用到底层原理，层层深度剖析
●提供大量完整可运行的示例代码 ●展现多元有趣的JavaScript应用场景
内容简介
目录
前言
基础篇
第1章 Mock.js：如何与后端潇洒分手2
1.1 为什么你总是下不了班3
1.2 联调加速4
1.3 使用Mock.js4
1.3.1 Mock.js的语法规范5
1.3.2 Mock.js实战6
1.3.3 自定义扩展8
1.4 Mock.js的基本原理9
1.4.1 从模板到数据9
1.4.2 为Ajax请求提供Mock数据11
1.5 从Mock服务到API管理平台14
第2章 Node.js：连接16
2.1 大话Node.js16
2.1.1 Node.js是什么16
2.1.2 Node.js能做什么17
2.1.3 招黑的JavaScript全栈工程师19
2.2 业界用Node.js做什么19
2.2.1 前端工程化20
基础篇
第1章 Mock.js：如何与后端潇洒分手2
1.1 为什么你总是下不了班3
1.2 联调加速4
1.3 使用Mock.js4
1.3.1 Mock.js的语法规范5
1.3.2 Mock.js实战6
1.3.3 自定义扩展8
1.4 Mock.js的基本原理9
1.4.1 从模板到数据9
1.4.2 为Ajax请求提供Mock数据11
1.5 从Mock服务到API管理平台14
第2章 Node.js：连接16
2.1 大话Node.js16
2.1.1 Node.js是什么16
2.1.2 Node.js能做什么17
2.1.3 招黑的JavaScript全栈工程师19
2.2 业界用Node.js做什么19
2.2.1 前端工程化20
前言
为什么要写这本书
笔者学习JavaScript语言并在前端开发领域工作若干年以后，发现了一些有趣的现象。例如，很多不了解前端的开发者都认为前端很简单，因为主流的框架都提供了完备的脚手架工具，开发者很容易初始化一个前端项目，只要浏览一下官方文档，复制、粘贴一些示例代码并按照自己的业务逻辑进行相应的定制和修改就可以了，即使不是专业的前端工程师，也可以很快实现一个有模有样的网站或者应用程序，在他们的认知里，这就是前端的全部。对此，经验尚浅的前端工程师几乎无力反驳，因为他们日常工作里所做的事情大抵如此，看起来非常容易，这使得许多前端工程师在团队里没有话语权，成为真正意义上的“码农”，升职加薪的机会就更不用想了。
很多新人在社区里咨询如何实现个人技术的积累或突破瓶颈，有经验的工程师都会推荐新人在遇到瓶颈时阅读JavaScript领域的经典书籍来积累基础知识。部分新人对此并不理解，或者说只是人云亦云地觉得基础很重要，毕竟每个行业做到顶尖以后，比拼的都是基本功，巩固基础知识总是不会错的。于是，他们花了不少时间在JavaScript的基础知识上，然而这么做除了对这门语言的认知在不断增加以外，个人能力却似乎并没有什么变化。客观来讲，无论你是否清晰地理解自己所写的程序，对用户来说你所提供的价值几乎没有什么变化，即便你使用React或者Vue等流行的新技术重构了团队的“祖传代码”，提高了可维护性，也并不会成为用户买单的理由。2014年笔者刚接触编程的时候，在只了解基本JavaScript语法的情况下，只用了2个多月就自学并利用开发框架和第三方服务独立开发出了一款带有即时通信功能的App并成功交付。那时候Angularjs1在国内才刚刚起步，连中文资料都极少。这就是框架带来的可能性，即使编程经验不足，依旧能编写出界面优雅的可交付程序。从这个角度来看，花很多时间积累基础知识似乎只是一种个人的追求罢了。
我们常听到“技术深度”和“技术广度”这两个词语，基础知识的积累就属于加强“技术深度”的范畴，它提升的是开发者解决问题的能力，这种技术能力在面试、技术方案评审或定位并解决问题时才会表现出价值。如果你希望自己在常规的业务开发之外承担更多复杂度较高的工作，就需要不断加强“技术深度”。前端领域提升“技术深度”的路线是相对明朗的，就是不断阅读优秀的源码并深入原理，从JavaScript语言的基础知识到翻过“三座大山”—设计模式、数据结构、基础算法，再到开发框架的设计思想、核心原理和最佳实践，最后再在工程化或者更加综合的场景中应用自己所学。这是一个漫长且煎熬的过程，是每一个希望在行业里一直走下去的高级前端工程师必须经历的修行。行内常有人说“前端没有中级工程师，如果你觉得自己算不上高级工程师，那只能算是个新人”。前端领域的知识很庞杂，在积累“技术深度”的过程中，你能创造的价值或许跟之前没什么区别，但请一定保持耐心。
而提到“技术广度”，很多开发者都非常热衷于“全栈工程师”的概念，觉得那是比单纯的前端更高级的职业形态。许多前端工程师在拥有1~2年的开发经验后，将技术提升的路线转向了后端、数据库和运维等领域，梦想着有一天能够独立编写一个项目的各个组成部分，然后转岗成为“全栈工程师”或者“架构师”，走向人生巅峰。然而现实是残酷的，你会发现大多数奔着提升技术广度去的开发者，最终沦为了“全栈码农”，因为他们不得不在各个开发角色之间来回切换，但是大多数人只能做一些“搬砖”性质的低技术含量的工作。诚然，我们应该学习和了解其他开发角色所做的一些工作，拓宽知识储备，但这并不是为了抢谁的饭碗，而是为了借鉴、交流不同的思想和经验，也是为了更好地协作。
对于前端工程师来说，技术广度的拓宽其实另有途径，也就是笔者将在本书中展示的路线，即通过学习和应用优秀的第三方库来了解JavaScript除了用来写页面外还能做什么。很多时候，我们缺少的并不是与某个特定语言相关的知识，而是不了解编程语言之外的思想和领域知识。要知道并不是只有先学会Java或者Go才可能成为后端工程师，也不是不懂Python就无法涉足人工智能领域。通过本书你会发现世界各地的前端工程师正在用JavaScript做着各种有趣且生动的尝试，即便只了解JavaScript，你一样可以了解任何你想要了解的领域，做非常多有意思的事情。在一步步了解JavaScript带来的无限可能性以及它为你的职业规划和人生选择所带来的想象空间后，你一定会喜欢上“前端工程师”这个身份，这也是笔者编写本书的原因所在。
读者对象
本书适合拥有0～3年开发经验的JavaScript开发者、前端工程师、Node.js工程师以及所有对前端感到好奇或者感兴趣的读者阅读。
如何阅读本书
本书分为六篇，笔者挑选了图形学、多媒体、跨端开发、游戏开发、人工智能、物联网等领域的第三方JavaScript库，针对基本原理、领域相关知识、最佳实践等进行了详细的讲解，具体内容包含：
基础篇（第1～10章）挑选了前端工程师日常开发中经常用到的工具，主要涉及编写模拟数据、服务端开发、静态类型检查、模块管理工具、实用工具库、函数式编程等，旨在帮助初级前端工程师了解日常使用工具的原理和最佳实践，提升开发能力。
图形学篇（第11～15章）首先介绍前端工程师如何实现流程图的绘制，然后给出Canvas技术、数据可视化、SVG技术及3D渲染相关的知识及实战指南，帮助读者掌握2D/3D渲染相关技巧。
多媒体篇（第16～20章）主要介绍如何在网页中绘制PPT，以及高性能动画、音频处理和视频处理相关的知识与应用。在短视频技术流行的当下，一线互联网公司中有很多前端工程师专门从事音视频相关领域的研发工作，本篇能够帮助读者基本了解这个细分领域。
跨端开发篇（第21～25章）主要介绍如何使用JavaScript编写命令行工具、Shell自动化脚本、跨端Hybrid应用和桌面应用，以及如何发送二进制消息或通过控制反转来实现代码解耦，旨在帮助读者提升工程化能力和基本的跨端跨界开发能力。
游戏开发篇（第26～28章）主要介绍游戏开发相关的基本知识、开发技巧以及物理引擎相关的知识和实践，每一章都提供了完整的可运行代码和美术素材。
跨界实践篇（第29～31章）主要介绍如何使用JavaScript来实现人工神经网络，并利用工具库实现了一个可以语音控制的“吃豆人”游戏，最后讲解了如何使用JavaScript来进行物联网的开发。
由于篇幅的原因，关于成长和职场反思的文章以及部分代码未能放在书中，笔者将其发表在个人的掘金博客（掘金账号：大史不说话）和本书代码仓库中，具体内容包括：
《写作那些事儿》讲述笔者写技术博客的收获、心得并针对读者的写作给出了建议。
《学习那些事儿》介绍笔者对于“图像记忆”“快速阅读”和“思维导图”等高效学习法的理解与使用建议。
《职场那些事儿》讲述笔者如何从个人开发者视角转变为团队管理者视角，并进行了反思和总结。
笔者学习JavaScript语言并在前端开发领域工作若干年以后，发现了一些有趣的现象。例如，很多不了解前端的开发者都认为前端很简单，因为主流的框架都提供了完备的脚手架工具，开发者很容易初始化一个前端项目，只要浏览一下官方文档，复制、粘贴一些示例代码并按照自己的业务逻辑进行相应的定制和修改就可以了，即使不是专业的前端工程师，也可以很快实现一个有模有样的网站或者应用程序，在他们的认知里，这就是前端的全部。对此，经验尚浅的前端工程师几乎无力反驳，因为他们日常工作里所做的事情大抵如此，看起来非常容易，这使得许多前端工程师在团队里没有话语权，成为真正意义上的“码农”，升职加薪的机会就更不用想了。
很多新人在社区里咨询如何实现个人技术的积累或突破瓶颈，有经验的工程师都会推荐新人在遇到瓶颈时阅读JavaScript领域的经典书籍来积累基础知识。部分新人对此并不理解，或者说只是人云亦云地觉得基础很重要，毕竟每个行业做到顶尖以后，比拼的都是基本功，巩固基础知识总是不会错的。于是，他们花了不少时间在JavaScript的基础知识上，然而这么做除了对这门语言的认知在不断增加以外，个人能力却似乎并没有什么变化。客观来讲，无论你是否清晰地理解自己所写的程序，对用户来说你所提供的价值几乎没有什么变化，即便你使用React或者Vue等流行的新技术重构了团队的“祖传代码”，提高了可维护性，也并不会成为用户买单的理由。2014年笔者刚接触编程的时候，在只了解基本JavaScript语法的情况下，只用了2个多月就自学并利用开发框架和第三方服务独立开发出了一款带有即时通信功能的App并成功交付。那时候Angularjs1在国内才刚刚起步，连中文资料都极少。这就是框架带来的可能性，即使编程经验不足，依旧能编写出界面优雅的可交付程序。从这个角度来看，花很多时间积累基础知识似乎只是一种个人的追求罢了。
我们常听到“技术深度”和“技术广度”这两个词语，基础知识的积累就属于加强“技术深度”的范畴，它提升的是开发者解决问题的能力，这种技术能力在面试、技术方案评审或定位并解决问题时才会表现出价值。如果你希望自己在常规的业务开发之外承担更多复杂度较高的工作，就需要不断加强“技术深度”。前端领域提升“技术深度”的路线是相对明朗的，就是不断阅读优秀的源码并深入原理，从JavaScript语言的基础知识到翻过“三座大山”—设计模式、数据结构、基础算法，再到开发框架的设计思想、核心原理和最佳实践，最后再在工程化或者更加综合的场景中应用自己所学。这是一个漫长且煎熬的过程，是每一个希望在行业里一直走下去的高级前端工程师必须经历的修行。行内常有人说“前端没有中级工程师，如果你觉得自己算不上高级工程师，那只能算是个新人”。前端领域的知识很庞杂，在积累“技术深度”的过程中，你能创造的价值或许跟之前没什么区别，但请一定保持耐心。
而提到“技术广度”，很多开发者都非常热衷于“全栈工程师”的概念，觉得那是比单纯的前端更高级的职业形态。许多前端工程师在拥有1~2年的开发经验后，将技术提升的路线转向了后端、数据库和运维等领域，梦想着有一天能够独立编写一个项目的各个组成部分，然后转岗成为“全栈工程师”或者“架构师”，走向人生巅峰。然而现实是残酷的，你会发现大多数奔着提升技术广度去的开发者，最终沦为了“全栈码农”，因为他们不得不在各个开发角色之间来回切换，但是大多数人只能做一些“搬砖”性质的低技术含量的工作。诚然，我们应该学习和了解其他开发角色所做的一些工作，拓宽知识储备，但这并不是为了抢谁的饭碗，而是为了借鉴、交流不同的思想和经验，也是为了更好地协作。
对于前端工程师来说，技术广度的拓宽其实另有途径，也就是笔者将在本书中展示的路线，即通过学习和应用优秀的第三方库来了解JavaScript除了用来写页面外还能做什么。很多时候，我们缺少的并不是与某个特定语言相关的知识，而是不了解编程语言之外的思想和领域知识。要知道并不是只有先学会Java或者Go才可能成为后端工程师，也不是不懂Python就无法涉足人工智能领域。通过本书你会发现世界各地的前端工程师正在用JavaScript做着各种有趣且生动的尝试，即便只了解JavaScript，你一样可以了解任何你想要了解的领域，做非常多有意思的事情。在一步步了解JavaScript带来的无限可能性以及它为你的职业规划和人生选择所带来的想象空间后，你一定会喜欢上“前端工程师”这个身份，这也是笔者编写本书的原因所在。
读者对象
本书适合拥有0～3年开发经验的JavaScript开发者、前端工程师、Node.js工程师以及所有对前端感到好奇或者感兴趣的读者阅读。
如何阅读本书
本书分为六篇，笔者挑选了图形学、多媒体、跨端开发、游戏开发、人工智能、物联网等领域的第三方JavaScript库，针对基本原理、领域相关知识、最佳实践等进行了详细的讲解，具体内容包含：
基础篇（第1～10章）挑选了前端工程师日常开发中经常用到的工具，主要涉及编写模拟数据、服务端开发、静态类型检查、模块管理工具、实用工具库、函数式编程等，旨在帮助初级前端工程师了解日常使用工具的原理和最佳实践，提升开发能力。
图形学篇（第11～15章）首先介绍前端工程师如何实现流程图的绘制，然后给出Canvas技术、数据可视化、SVG技术及3D渲染相关的知识及实战指南，帮助读者掌握2D/3D渲染相关技巧。
多媒体篇（第16～20章）主要介绍如何在网页中绘制PPT，以及高性能动画、音频处理和视频处理相关的知识与应用。在短视频技术流行的当下，一线互联网公司中有很多前端工程师专门从事音视频相关领域的研发工作，本篇能够帮助读者基本了解这个细分领域。
跨端开发篇（第21～25章）主要介绍如何使用JavaScript编写命令行工具、Shell自动化脚本、跨端Hybrid应用和桌面应用，以及如何发送二进制消息或通过控制反转来实现代码解耦，旨在帮助读者提升工程化能力和基本的跨端跨界开发能力。
游戏开发篇（第26～28章）主要介绍游戏开发相关的基本知识、开发技巧以及物理引擎相关的知识和实践，每一章都提供了完整的可运行代码和美术素材。
跨界实践篇（第29～31章）主要介绍如何使用JavaScript来实现人工神经网络，并利用工具库实现了一个可以语音控制的“吃豆人”游戏，最后讲解了如何使用JavaScript来进行物联网的开发。
由于篇幅的原因，关于成长和职场反思的文章以及部分代码未能放在书中，笔者将其发表在个人的掘金博客（掘金账号：大史不说话）和本书代码仓库中，具体内容包括：
《写作那些事儿》讲述笔者写技术博客的收获、心得并针对读者的写作给出了建议。
《学习那些事儿》介绍笔者对于“图像记忆”“快速阅读”和“思维导图”等高效学习法的理解与使用建议。
《职场那些事儿》讲述笔者如何从个人开发者视角转变为团队管理者视角，并进行了反思和总结。
媒体评论
十年时间里，前端工程师从所谓的“页面仔”发展为“大前端工程师”，前端技术也从满足“兼容IE和页面交互”的基本应用场景延伸为跨越多端且涵盖Server、iOS、Android、PC、AR、VR、图形学、WebAI、IoT等领域的综合技术。WebGPU、WebAssembly、WebWorker、Node等技术的兴起更为前端工程师带来了许多的可能性。我相信，随着Web3.0时代的到来，前端工程师会有更广阔的发展空间。本书详细讲解了前端跨界的优秀工具库，让你一步到位、直接上手体验开发流程，是一本不可多得的好书。
袁志佳京程一灯CEO
这是一本详细解析前端工具库原理及实战技巧的图书，书中针对精选工具库的背景知识、设计理念、代码案例及特点进行了全方位的讲解，带你步入 JavaScript的神奇世界。多年之前，我也曾写下类似的大纲，打算出一套源码导读及实战的课程，但一直没有精力也缺乏毅力来做这件事。今天看到大史撰写了一系列精彩有趣的代码故事，十分钦佩他的执行力。书中内容由浅入深，与前端工程师的日常工作结合颇多，适合不同层次的读者。感谢大史为前端社区带来这样一本立意新颖的书，也帮我圆了多年前不曾实现的技术写作梦！
Scott前端早早聊大会创始人
近年来前端技术发展迅速，前端生态非常繁荣，随之而来的则是日渐庞杂的知识体系。大部分前端开发人员并非科班出身，在进入前端领域并掌握主流开发技术后，常常会因为不知道如何进一步提升自己的技能和视野而感到困惑。这本《前端跨界开发指南：JavaScript工具库原理解析与实战》从优秀的JavaScript工具库入手，对其使用方式、设计原则、底层原理和周边知识等进行了详细的剖析，为读者展现了一个丰富多彩的JavaScript世界。如果你对前端的理解也仅限于“使用框架还原页面”，那么请不要错过本书，它会带你领略JavaScript的无限可能。
杜文（wendux）前端技术专家、《Flutter实战》作者
看了这本“前端框架辞典”，很是感慨，要是2015年就有这样一本书，那我在开发公司的交易管理系统时，就不用在“哪个框架能实现某某功能”这类问题上花费大把时间了。而你是幸运的，有了这本书，你可以快速找到帮你解决问题的框架，大大提升工作效率。
安晓辉《职业复盘》《大话程序员》等图书作者
袁志佳京程一灯CEO
这是一本详细解析前端工具库原理及实战技巧的图书，书中针对精选工具库的背景知识、设计理念、代码案例及特点进行了全方位的讲解，带你步入 JavaScript的神奇世界。多年之前，我也曾写下类似的大纲，打算出一套源码导读及实战的课程，但一直没有精力也缺乏毅力来做这件事。今天看到大史撰写了一系列精彩有趣的代码故事，十分钦佩他的执行力。书中内容由浅入深，与前端工程师的日常工作结合颇多，适合不同层次的读者。感谢大史为前端社区带来这样一本立意新颖的书，也帮我圆了多年前不曾实现的技术写作梦！
Scott前端早早聊大会创始人
近年来前端技术发展迅速，前端生态非常繁荣，随之而来的则是日渐庞杂的知识体系。大部分前端开发人员并非科班出身，在进入前端领域并掌握主流开发技术后，常常会因为不知道如何进一步提升自己的技能和视野而感到困惑。这本《前端跨界开发指南：JavaScript工具库原理解析与实战》从优秀的JavaScript工具库入手，对其使用方式、设计原则、底层原理和周边知识等进行了详细的剖析，为读者展现了一个丰富多彩的JavaScript世界。如果你对前端的理解也仅限于“使用框架还原页面”，那么请不要错过本书，它会带你领略JavaScript的无限可能。
杜文（wendux）前端技术专家、《Flutter实战》作者
看了这本“前端框架辞典”，很是感慨，要是2015年就有这样一本书，那我在开发公司的交易管理系统时，就不用在“哪个框架能实现某某功能”这类问题上花费大把时间了。而你是幸运的，有了这本书，你可以快速找到帮你解决问题的框架，大大提升工作效率。
安晓辉《职业复盘》《大话程序员》等图书作者
