第 15 本《现代 JavaScript 库开发：原理、技术与实战》

简介

开发JavaScript库是入门前端领域的重要一步。《现代JavaScript库开发：原理、技术与实战》旨在帮助前端开发者掌握现代JavaScript库的开发技术，让每个人都可以开源自己的现代JavaScript库。本书系统介绍了现代JavaScript库开发涉及的技术、原理和最佳实践，以及将库开源后如何做好维护工作。在最佳实战部分，本书选取了9个典型库作为案例，展示开发流程，代码清晰、完善。

《现代JavaScript库开发：原理、技术与实战》既适合对现代JavaScript库开发及开源感兴趣的前端开发者阅读，也适合想要学习前端项目开发技术的初学者阅读。

阅读笔记

《现代JavaScript库开发：原理、技术与实战》 颜海镜 侯策 38个笔记

◆ 点评

2023/8/6 认为好看 很不错的一本前端书籍📖，成为一个 JavaScript 库开发者需要了解掌握哪些技能，怎么实现开发，整个流程发展样子，作者讲解很详细，也有很多案例说明，让我对开源世界有了更好的了解。也鼓励了自己踏出第一步去做这件事情。 最后一章节，作者提供的知识全景图和技术全景图给了我很大的惊喜，因为我也在根据前面所有的阅读整理需要的知识和技术点，结果作者直接整理出来了，比我整理的更加分明，清晰。总的来说，真的开阔的技术视野和学习到了开源相关的知识，值得阅读

◆ 推荐序1

2023/7/16 发表想法 加油💪🏻，吭哧吭哧向前冲吧

希望大家能够通过这本书掌握更多的JavaScript库开发技巧，并通过刻意练习自我提高，成为自己想成为的人——技术大牛！

◆ 推荐序2

2023/7/16 发表想法 原来写一个开源库要做这么多的东西，不过真的可以学习到非常多东西。在公司所做的开发，不管是开发公共组件库还是内部的npm包，都没有这么多流程及规范，看来是不够严谨了。很喜欢这句话：为了技术交流和价值共创。是的，我们做的东西虽然很希望被别人认可，但是更重要的才是彼此之间的技术交流，吸引更多志同道合的人参与进来，发挥更大的价值创造，并传承下去

你要考虑稳定性、可维护性、安全性，编写一些攻击性测试用例，还要注重代码的可读性、易理解性。如果想扩大影响力，希望更多人参与项目维护，你必须重视库的架构设计、接囗设计、文档撰写、注释情况、代码风格等。不仅如此，你所用的工具也必须是当前最主流、最酷的。你要为库的使用者提供开发、调试、测试、构建和提交等多方面的顺滑体验。如果你能把上述一切都做得很到位，那么别人一定能从中学到很多东西，也就愿意为你的项目贡献代码了。团队内部的技术共建也是类似的，并非为了彰显什么，而是为了技术交流和价值共创。

2023/7/16 发表想法 代码只是桥梁，与此同时，建立的人与人之间的表达交流，互相学习，共同进步，对一个人的成长是非常大的。努力成为一个贡献者和创造者路上，加油，相信自己可以的

通过代码与工程师交流能加速自身成长，进而创造个人价值。作为一名开发者，不能只是开源库的使用者，要成为贡献者，甚至创造者。

，如果你能透过工具表面的用法进一步去追究其背后的哲学，你将会有更多的收获。

就像做产品要考虑用户体验一样，库的作者要时刻考虑使用者的体验，要时刻提醒自己站在使用者的角度进行设计。所有恰到好处的设计都是打磨出来的，也是独具匠心的。一个库其实也是一个技术产品，如果你能够做好它，其价值将远远超越解决问题本身。

◆ 推荐语

2023/7/16 发表想法 感觉我第一个层次都没搞明白了，离第二个层次就更远了，哈哈哈。不过临摹和实践确实很重要，不懂的时候，刚入门的时候，都是这样过来的，多思考为什么这样做，还有没有其他解法说不定会有其他不同的收获呢

在前端领域，学习的层次有两个：一个是以使用者的角度去掌握知识和技能，用心的话能融汇贯通；而更深的层次是从根本原理上彻底理解知识和技能，不仅做到融汇贯通，更能达到根据当前应用场景“创造”最优解的境界。这是工匠和大师的区别，达到第二个层次无疑能让你的前端工程师之路走得更远。学习和掌握根本原理的一个较为简单的办法就是临摹和实践，这也是本书选择的道路。通过跟随作者的思路由浅入深地进行实践，你能切身体会到开源库的创作精髓，这种临摹和实践无疑会帮你扎实基础，让你在不知不觉间有所收获，得到提高。

在前端领域，学习的层次有两个：一个是以使用者的角度去掌握知识和技能，用心的话能融汇贯通；而更深的层次是从根本原理上彻底理解知识和技能，不仅做到融汇贯通，更能达到根据当前应用场景“创造”最优解的境界。这是工匠和大师的区别，达到第二个层次无疑能让你的前端工程师之路走得更远。学习和掌握根本原理的一个较为简单的办法就是临摹和实践，这也是本书选择的道路。通过跟随作者的思路由浅入深地进行实践，你能切身体会到开源库的创作精髓，这种临摹和实践无疑会帮你扎实基础，让你在不知不觉间有所收获，得到提高。

◆ 前言

2023/7/16 发表想法 迫不及待的想看完这本书，看看自己的收获有多大呢

人人都可以开发自己的JavaScript库

我现身说法，开发和开源库不仅可以帮助他人解决问题，也能给自己带来很多成长。开发库的特殊要求，极大提升了我的技术深度；开发库涉及的技术非常多，极大拓宽了我的知识面；开源库使我融入了开源社区，在那里获得了很多技术之外的东西。总之，开发和开源现代JavaScript库可以带来非常大的收获，我希望每一个前端开发者都不要错过这个机会。

2023/7/16 发表想法 确实如此，虽然身处业务世界，但我也更向往开源世界，因为充满未知、好奇、学习等动力，但也希望可以贡献自己微不足道的力量

每一个前端开发者都身处两个世界，即业务世界和开源世界。大部分人熟悉业务世界，但对开源世界了解不多。所谓“技多不压身”，多了解开源世界，融入开源世界，你一定会有更多收获。

◆ 第2章 构建

JavaScript社区则选择了模块方案。一个合格的模块方案需要满足以下特性：● 独立性——能够独立完成某个功能，隔绝外部环境的影响。● 完整性——能够完成某个特定功能。● 可依赖——可以依赖其他模块。● 被依赖——可以被其他模块依赖。简而言之，模块就是一个独立的空间，能引用其他模块，也能被其他模块引用。

AMD是一种异步模块加载规范，专为浏览器端设计，其全称是Asynchronous Module Definition，中文名称是异步模块定义

浏览器并不支持AMD模块，在浏览器端，需要借助RequireJS才能加载AMD模块。RequireJS是使用最广泛的AMD模块加载器，但目前的新系统基本不再使用RequireJS，因为大部分库都会提供对AMD模块的支持

CommonJS是一种同步模块加载规范，目前主要用于Node.js环境中

UMD想要解决的问题和其名称所传递的意思是一致的，它并不是一种新的规范，而是对前面介绍的3种模块规范（原始模块、AMD、CommonJS）的整合，支持UMD规范的库可以在任何模块环境中工作

ECMAScript 2015带来了原生的模块系统——ES Module。目前，部分浏览器已经支持直接使用ES Module，而不兼容的浏览器则可以通过构建工具来使用

webpack方案的问题在于会生成很多冗余代码，这对于业务代码来说问题不大，但是对于库来说就不太友好了

对于打包的代码，rollup.js巧妙地通过将被依赖的模块放在依赖模块前面的方法来解决模块依赖问题

statcounter统计的不同浏览器的占比情况

CMAScript 2015及后续版本的兼容性情况还不容乐观，不过每一个ECMAScript 2015的特性都可以用ECMAScript 5实现，最简单的方法就是直接使用ECMAScript 5来实现库代码

core-js是一个ECMAScript 2015+的polyfill库，提供了不污染全局环境的使用方式

◆ 第3章 测试

单元测试比较适合库开发场景，其提倡边写测试边写代码，通过测试来保证和提升代码质量

stateofjs网站统计的常用测试框架排行榜

◆ 第4章 开源

一般的库建议选择MIT协议，如果涉及专利技术，则可以选择Apache协议

◆ 第7章 安全防护

在JavaScript中，实现继承有多种方式，但是万变不离其宗，所有继承方式的背后，原理都是原型

JavaScript世界的设计是基于原型的，所有的系统对象也是基于原型设计的。在JavaScript中，所有的对象都是继承自Object.prototype，如果我们给Object.prototype添加属性，就会影响所有的对象

2023/7/29 发表想法 😂有点意思

一定不要扩展原型属性，这是非常错误的做法。让我们一起保卫原型，保卫JavaScript生态

一定不要扩展原型属性，这是非常错误的做法。让我们一起保卫原型，保卫JavaScript生态

npm v3修复了这个问题，如果两个库的版本能够复用，就会只安装一份。图7-10所示为npm v2和npm v3安装依赖的区别

对于dependencies和peerDependencies中的版本号，建议使用“^”作为前缀，这样用户在使用我们的库时，可以避免重复安装依赖；对于devDependencies，建议使用固定版本号，这样可以避免每次安装时版本可能不一致的问题

◆ 第9章 命令行工具

npm在v3版本时做了一些大的改动，其中最大的改动是将node_modules目录扁平化。在npm v2中，会把每个库的依赖都安装到自己的node_modules目录中，这带来了两个较大的问题：一个是会造成层级非常深；另一个是当一个库被多个库依赖时，会存在多个副本

如果包名中包含@，则表示这个包位于用户名下，位于用户名下的包默认是私有的，只有用户自己能访问。如果想让其他人也能访问，那么在发布时需要给npm命令添加参数--access=public

◆ 第10章 工具库实战

Object.create(null)创建的对象上没有hasOwnProperty方法

◆ 第12章 未来之路

SWC是基于Rust语言开发的JavaScript Compiler，其对应的工具是Babel。SWC和Babel命令可以相互替换，并且大部分的Babel插件在SWC中都可以找到对应功能

esbuild是基于Go语言开发的JavaScript Bundler，其对应的工具是webpack等打包工具，其最大的特点也是性能

其本地开发使用的是Bundless方案，在生产环境使用rollup.js打包，在底层使用esbuild单文件构建性能提升

在本地开发时，Vite可以做到修改文件时不需要重新打包，只重新构建修改的文件。对于大型项目来说，其性能提升是肉眼可见的。