《前端跨界开发指南》重磅来袭!

谨以此书献给相信“努力有用”的你

image.png

先讲个故事

2019年,我和机械工业出版社签了协议,约定用1年半时间交付一本15万字的前端技术书籍,起名为《我是前端-JavaScript工程师的自我修养》;

2022年,书稿终于写完了,但编辑老师似乎觉得原书名不太严肃,和出版社气质不符,几经商议最终将新书定名为 《前端跨界开发指南-JavaScript工具库原理解析与实战》 ,正式出版发行,历时3年,共计28万字。

我高估了自己的产能,也低估了自己的耐心。今天,我想和你聊聊关于这本书的故事。

再做个自我介绍

大家好,我是大史不说话,是一名前端工程师,曾经因为一篇《10000小时后,我从外包走进了字节跳动》而出圈,被朋友们戏称为“万时大佬”😂。我2017年走进前端领域,2018年开始技术写作,除了产出上百篇技术博客外,大概每年会有一个小爆款,或许你也曾经读过其中的一些:

有的文章点赞多,有的文章喷子多,但从标题里也许能够拼凑出一个我的样子:

一个相信“努力有用”的、不太聪明的、行动力还可以的程序员

是的,这就是我。

看完本书能收获什么

这是一本致力于拓展前端技术广度的书籍,我在书中挑选了30多个经典的JavaScript工具库,对它们进行了详细地解析,从基本的使用方式到设计原则,从原理源码到周边知识,希望为读者呈现出一个有深度、有广度的立体的JavaScript世界。全书分为6个大的部分,内容涵盖基础工具、图形学、多媒体、跨端开发、游戏开发、人工智能、物联网:

第一部分 基础篇(第1~10章)

笔者挑选了前端工程师日常开发中经常用到的工具,内容主要涉及编写Mock数据、服务端开发、静态代码检查、模块管理工具、实用工具库、函数式编程等内容,帮助初级前端工程师了解日常使用工具的原理和最佳实践,提升开发能力。

第二部分 图形学篇(第11~15章)

主要介绍前端如何实现流程图绘制、Canvas技术使用、数据可视化、SVG技术及3D渲染相关的知识及实战指南,帮助读者了解2D/3D渲染相关的知识,为进军元宇宙打好基础。

第三部分 多媒体篇(第16~20章)

主要介绍如何在网页中绘制PPT、做高性能动画、音频处理和视频处理相关的知识和应用,在短视频技术流行的当下,一线互联网公司中有很多前端工程师专门从事音视频相关领域的研发工作,本章的内容能够帮助你建立对这个细分领域的基本了解。

第四部分 跨端开发篇(第21~25章)

主要介绍如何使用JavaScript编写命令行工具、shell自动化脚本、跨端Hybrid应用、桌面应用,以及如何发送二进制消息或通过控制反转来实现代码解耦,这部分内容旨在帮助读者提升工程化能力和基本的跨端跨界开发能力。

第五部分 游戏开发篇(第26~28章)

主要介绍游戏开发相关的基本知识、开发技巧以及物理引擎相关的知识和实践,每一章都提供了完整的可运行代码和美术素材。

第六部分 跨界实践篇(第29~31章)

主要介绍如何使用JavaScript来实现人工神经网络,利用工具库实现了一个可以语音控制的“吃豆人”游戏,并讲解了如何使用JavaScript来进行物联网的开发。

希望你能够看到,前端技术不仅仅是一个需要持续优化打磨的生产工具,更是一个能够陪你一起探索技术世界的万花筒。

浏览器,并不是前端的边界。

为什么想写这本书

一半好奇心,一半强迫症

早在正式成为前端工程师之前,我就以个人开发者的身份利用框架和第三方服务实现过完整的产品交付,这样的经历带给我极大的成就感,以至于在刚成为前端工程师的时候,其他同学都致力于讨论框架、源码和前端工程化的时候,只有我像个孩子似的乐此不疲地到处搜罗“JavaScript工具库”,想知道前端除了开发页面以外还能做哪些有趣的事情,渐渐地我才知道,原来世界各地的前端工程师早就在尝试把JavaScript应用在跨平台开发、桌面应用开发、命令行工具、AR、VR、音视频、游戏开发、神经网络、物联网等等各种不同的领域,这时我才知道把“前端”等同于“页面工程师”这种观点真的是有些无知。当周围的同事大多都在努力提升自己的“技术深度”时,我却秉持着“好读书,不求甚解”的精神在技术世界里玩得不亦乐乎,感觉这个也好神奇,那个也好有趣。我在自己的技术博客开了一个专栏——《一统江湖的大前端》(也就是本书的前身),希望在这里记录并分享自己在探索 JavaScript 的花花世界时的反思和收获,在那时的意识形态里,前端技术首先应该是带给我快乐的,其次才是谋生的手段。 当连载写到第7篇的时候,不知道怎么就被编辑老师发现了,于是才有了今天的这本书。

写书的另一半原因大概是轻度的强迫症吧,在学习的过程中免不了需要查资料,那时优秀的前端博主并不多,网上很多文章也都是抄来抄去的,你经常会发现那些比较简单的知识在很多文章里被翻来覆去地讲,但那些真正令自己困惑的细节却很难找到答案,同类的事情发生得多了,反而容易让人变得自我怀疑,不知道那些细节真的是“不言自明的常识”,还是很多博客作者自己压根都没弄明白,以至于看了很多博文后,不知道的东西还是不知道,这令我觉得非常沮丧;另一个现象就是那时前端的沙箱技术并不是很普及,很多博客作者只会在文章里展示一些代码片段(现在可以直接接沙箱程序去运行,就方便多了),而当你尝试把这些代码粘贴下来去运行时,可能就会得到各种各样莫名其妙的报错,初学者往往很难搞清楚到底是博主提供的代码有问题,还是某个工程配置或是插件导致了错误,结果就变成了“道理都懂,就是Run不起来”的尴尬境地。这种“一知半解”的体验对我来说真的太难受了,于是给自己立了Flag,下定决心对常见的前端技术进行深入学习,并在后续的写作中都尽量提供完整可运行的示例代码。我一直相信,那些困扰自己的问题,绝不可能只困扰着我一个人。

为什么敢写这本书

提到写书或是技术博客,很多人可能会觉得,自己需要先成为一名专家,然后才“有资格”去写书,这种认知模式通常被称为“HAVE-BE-DO”模式,我们来举个例子:如果我有(have)很多钱,那么我就会成为(be)一个有钱人,这样我就可以像富人那样去做(do)事情。看起来顺理成章,没毛病,同理可知:如果我有(have)足够的知识,那么我就会成为(be)一名专家,这样我就可以尝试对外做(do)知识输出了,比如写书。它们之间的区别是什么呢?或许你已经有所察觉,对于“拥有更多知识”这个前提而言,实现路径是相对清晰的,但对于“拥有很多钱”这个前提,大多数人并不知道如何实现,这就形成了一个悖论,因为如果你知道如何实现的话,实现的过程就可以直接跳到do的环节了,压根不需要经过HAVE-BE-DO的流程。

事实上,HAVE-BE-DO这三件事并不是线性关系,而是一个反馈循环。 也就是说,DO通常会对HAVE产生增益或减益的效果,继而让这个循环持续下去。于是有人提出,BE-DO-HAVE或许会是一种更有效的认知模式 也就是先拥有身份认同,继而去做与这个身份相符合的事情,最终拥有与这个身份相匹配的回报,这份回报又会帮助你强化自己的身份认同,从而形成循环。

以写作这件事为例,它的实现路径就变成了,我先要相信自己能够像作家一样写出好的作品(这可能本身源自于自己写博客时获得的正反馈),然后不断地尝试不断地写,如果内容优质,那么最终我会拥有自己的读者粉丝。这种认知模式的好处在于它能够让你把注意力集中在“如何做有效的事情” 上,而不仅仅是看着远方的目标不知所措,而最简单的行动方式,就是找一个榜样去模仿,先动起来再优化。事实证明写博客和写书完全是两码事,我确实也没有什么写作的天赋,交付的28万字书稿背后,是大约2~3倍字数的底稿删删改改才得到的。

如果你觉得生活中有什么不如意的地方,也可以试试BE-DO-HAVE的思考方式,没准就能够找到改变的契机。

推动我决定写书的另一个关键词叫做 “知识诅咒” 。第一次听到这个词语是在樊登老师推荐的《可复制的领导力》一书中。 “知识诅咒”是指一旦我们知道了某样东西后,就很难想象自己不知道它时会是什么样子。 随着工程师技术水平的增加,越来越多的知识在他们的意识里变得“理所当然”,当你向他们咨询的时候,他提供的答案可能确实是对的,但初学者听不懂可能也确实是真的,越是资深的专家,或许越难理解“为什么初学者连这么显而易见的道理都不明白”,但事实上他们自己当年可能也面临过这样的尴尬境地,对于刚刚涉足一个领域的初学者而言,很多事情其实并没有那么“显而易见”。从自己技术博客的阅读量上就可以看到,很多自己觉得写的非常值得思考的技术剖析文章,评论区可能更多的只是点赞,而一些科普性质的文章,反而会引发更多的讨论,作为一个转行进入前端领域的大龄程序员,也许我更容易理解初学者所需要的东西是什么。我想,如果现在不写,当自己有一天真的成为技术专家时,可能就写不出真正对初学者友好的内容了。我知道成长的路有多难走,只希望能留下一些可供参考的路标,给那些仍然愿意前行的朋友。

编辑说:书太厚了

本书的原稿是有附录的,其中分享了我关于成长和职场总结的四篇文章,对于初级工程师来说,它们可能比技术本身更重要,但厚度直逼500页的书籍遭到了编辑老师的嫌弃,最终还是决定将这些复盘笔记直接发表在个人掘金博客(掘金账号:大史不说话)以及【随书代码仓】 ,内容包括:

  • 写作那些事儿- 讲述笔者技术博客写作的收获、心得和建议
  • 学习那些事儿 - 讲述笔者对于“图像记忆”、“快速阅读”和“思维导图”等高效学习法的看法和建议;
  • 职场那些事儿 - 讲述笔者如何从个人开发者视角转变为团队管理者视角的反思和总结;
  • 面试那些事儿 - 为准备面试大厂的候选人提供结构化备战建议。
  • 我的技术博客 - 分享框架之外的前端知识

观点是有待验证的假设,而不是一成不变的原则。既然是个人笔记,就不免会带有主观性和局限性,只希望能够为初学者带来一些启发。

致谢

再次感谢机械工业出版社的各位老师!

也感谢所有在本书创作过程中给予我关注、鼓励和反馈的朋友和家人!

硬广时间

如果你是一名前端初学者:那么我真诚地向你推荐这本书,相信它能够有效地帮助你扩展技术视野,进一步提升技术能力;

如果你是一名资深前端人:希望你能把它推荐给其他需要的朋友,帮助他们在肉眼可见的就业低潮期厚积薄发,静待花开;

如果你不是前端工程师:这本书或许也适合你,因为只需要基本的JS知识,就可以快速了解前端技术的应用场景,做好跨界知识储备;

如果你只是单纯觉着我这人还行:那就直接扫码买它就完事了~


大史住在大前端
野生码农的鄙视链攀爬指南。

字节跳动前端 | 《前端跨界开发指南》作者

81 声望
27 粉丝
0 条评论
推荐阅读
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs40阅读 4.7k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图
学会这些 Web API 使你的开发效率翻倍
随着浏览器的日益壮大,浏览器自带的功能也随着增多,在 Web 开发过程中,我们经常会使用一些 Web API 增加我们的开发效率。本篇文章主要选取了一些有趣且有用的 Web API 进行介绍,并且 API 可以在线运行预览。C...

九旬13阅读 1.5k

封面图
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.5k评论 2

封面图

字节跳动前端 | 《前端跨界开发指南》作者

81 声望
27 粉丝
宣传栏