前端跨界开发指南

【为什么要写这本书】

笔者学习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来进行物联网的开发。

由于篇幅的原因，关于成长和职场反思的文章以及部分代码未能放在书中，笔者将其发表在个人的掘金博客（掘金账号：大史不说话）和本书代码仓库中，具体内容包括：

《写作那些事儿》讲述笔者写技术博客的收获、心得并针对读者的写作给出了建议。

《学习那些事儿》介绍笔者对于“图像记忆”“快速阅读”和“思维导图”等高效学习法的理解与使用建议。

《职场那些事儿》讲述笔者如何从个人开发者视角转变为团队管理者视角，并进行了反思和总结。

《面试那些事儿》为准备面试大厂的候选人提供了结构化备战的建议。

勘误和支持

由于笔者水平有限，书中难免会出现一些错误或者不准确的地方，恳请读者批评指正。如果大家在阅读过程中遇到问题，可以在本书的Github仓库里提issue，笔者将尽量提供满意的解答。如果你有更多的宝贵意见，也欢迎发送邮件至邮箱dashnowords@qq.com。期待听到你们的真挚反馈。

致谢

感谢机械工业出版社华章分社编辑杨绣国的耐心指导，她的鼓励和帮助引导我顺利完成全部书稿，她认真仔细的工作风格给我留下了非常深刻的印象。

感谢京程一灯的创始人志佳老师在我接触前端领域之初就为我极大地拓宽了视野，让我喜欢上前端这个领域并不断深入探索，不断进步。

感谢前端早早聊的创始人Scott老师在我职业生涯面临关键选择时提供宝贵且专业的建议和方向指引。

感谢所有在本书创作过程中给予我中肯建议的朋友。

感谢我的家人，我的爸爸、妈妈和妻子，他们在我写作的过程中给予了足够的鼓励和支持。

最后要感谢自己，即使花费了比预期长2倍的时间，也没有轻言放弃，最终完成了本书的创作。

谨以此书，献给所有热爱前端的朋友。

史文强（大史不说话）

2022年6月于北京

本书是字节跳动资深前端工程师呕心沥血之作，也是目前市场上少有的从原理到实战深度剖析JavaScript生态中经典工具库的技术图书。

全书共有6篇，分别是基础篇、图形学篇、多媒体篇、跨端开发篇、游戏开发篇和跨界实践篇，书中不仅详细介绍了JavaScript语言在浏览器页面之外的不同应用场景，更从实用技巧、设计理念、原理源码等角度对精心挑选的30多个工具库进行了全方位的解析，希望读者在领略JavaScript代码之美的同时，也能拓宽技术视野。为了帮助读者更好地理解书中所讲述的内容，随书代码仓库里提供了大量可运行的源码，包括精简版的库重写和完整的代码示例。

精选30 经典JavaScript工具库 

从实战应用到底层原理进行深度剖析

提供大量完整可运行的示例代码

展现多元有趣的JavaScript应用场景