JavaScript 中 Monkey Patching 的实用用途

sara356317

本文由Moritz Kröger和Tom Greco进行了同行评审。感谢所有 SitePoint 的同行评审者使 SitePoint 内容达到最佳状态！ 您是否曾经使用过运行良好的第三方代码，除了一件小事让您抓狂之外？为什么创建者忘记删除那些讨厌的控制台日志？如果 API 调用还可以多做一件事，那不是很好吗？如果是这样，那么您就知道维护者可能很难（或不可能）实施您的更改。但是自己更改代码怎么样？如果您没有来源并且不想自己托管它们，您怎么能做到这一点呢？欢迎来到 JavaScript 中的 Monkey Patching 世界之旅！ 在本文中，我们将了解 Monkey Patching 是什么，并通过一些不同的示例进行工作，使用它来更改第三方小部件的功能以满足我们的要求。 什么是猴子补丁？（以下简称MP）是一种在不改变原始源代码的情况下覆盖、扩展甚至抑制代码段默认行为的技术。这是通过用固定版本替换原始行为来完成的。 本文将使用现有的反馈框小部件，它显示一个简单的可滑动弹出窗口，如下图所示，其中包含反馈表单。



个反馈表单小部件，将被猴子修补 源代码经过修改以包含充当 MP 目标的用例。我所说的目标是指我们要修补的特定功能、特性或最低级别的方法。 我所做的另一个修改是删除代码周围的立即调用函数表达式 (IIFE)。这样做是为了专注于 MP 的技术。 您可以找到整个示例，包括 富人人数数据 本文中讨论的猴子补丁，作为 Plunker。 猴子补丁不是一种不好的做法吗？ 在深入讨论业务之前，让我们先弄清楚一件事：是的，MP 被认为是一种不好的做法- 邪恶的eval、命令式编程、可变数据结构、双向绑定等也是如此。 如果你使用其中任何一个，可能会有一个相当规模的小组告诉你你做错了，应该改变这个或那个以适应更好的条件。但与往常一样，有不同的工具和技术可用，它们对某些场景的适用性有所不同。有时看似极端、疯狂或根本糟糕的事情可能是特定情况下的最后手段。不幸的是，因为有些做法被认为是不好的，所以您甚至找不到很多描述如何以正确的方式做错误的事情的文章。



这里描述的情况可能是一种不自然的情况，用假小部件驱动到极端，以显示您的选择是什么。作为读者，你必须决定是否喜欢你所看到的内容。不出意外的话，读完这篇文章你就会对反对议员有更好的理解。 Learn to Code with JavaScript 猴子修补的目标 在我们深入研究这些技术之前，让我们首先检查一下我们想要实现的目标。修改后的小部件有一些我们想要解决的代码味道。 硬编码背景颜色 第一个是一个名为的方法，toggleError该方法应该根据布尔参数更改元素的背景颜色正如您所看到的，它通过 jQuery 方法设置背景颜色属性css。这是一个问题，因为我们希望通过样式表规则来指定它。 讨厌的控制台日志 在开发小部件时，使用控制台日志向开发人员提供有关当前正在执行的内容的提示。在开发过程中可能是一个不错的方法，但在生产使用中肯定不是最好的方法。因此，我们需要找到一种方法来删除所有这些调试语句。 拦截广告服务器调用 这个小部件很棒，但它有一个奇怪的行为。每次初始化脚本时，它都会向奇怪的广告服务器发出请求，并在我们的页面上显示不必要的膨胀。