前言
前端开发在日常的业务开发中，常常需要对原有代码进行修改或者扩展，这时我们可以使用 monkey patching 的技术来实现。
Monkey Patching 指的是在运行时对一段已有的代码进行修改或者添加。而 npm 包 @jeefo/monkey_patcher 就提供了一种可行的解决方案。
本文将着重介绍如何使用 @jeefo/monkey_patcher 来实现这一技术，并给出一些实际应用的场景。
安装 & 引入
可以通过 npm install 命令来安装：
npm install @jeefo/monkey_patcher --save-dev
安装完毕后，可以使用 require() 或 import 的方式来引入该包：
const {MonkeyPatcher} = require('@jeefo/monkey_patcher'); // 或 import {MonkeyPatcher} from '@jeefo/monkey_patcher';
基本用法
@jeefo/monkey_patcher 的核心是 MonkeyPatcher 类，使用它可以对函数、类、对象原型进行修改。
替换函数
我们来看一个最简单的案例，使用 MonkeyPatcher.patch() 方法来修改一个已经存在的函数：
-- -------------------- ---- ------- -------- --------------- - ------------------- --------------- - -- --------- ------ --------------- ----- -- - --- ---------------- ---------------- -------- -- -- - ----------------------- --- -- ---------- ---------------展开代码
可见，使用 MonkeyPatcher.patch() 方法，我们成功地修改了原来的 sayHi() 函数，改为输出新的消息。
截获函数执行前 & 执行后
要实现更加复杂的修改，也可以通过截获函数执行前和执行后的方法，分别来实现各种逻辑。
-- -------------------- ---- ------- -------- --------------- - ------------------- --------------- - ----- -- - --- ---------------- ----------------- -------- ---------- -- - ------------------ -- --- ----- -- --------------- --- ---------------- -------- ---------- -- - ---------------- ------ ----- -- --------------- --- -- --- -- ----- -- --- ----- -- ------ -- ------ ------ -- --- ------ ----- -- ------ ---------------展开代码
修改类
上面的修改方法同样适用于类及成员函数。
-- -------------------- ---- ------- ----- --- - ----- - ----------------- -------- - - ----- -- - --- ---------------- ------------- ------ -- -- - ----------------- -------- --- ----- --- - --- ------ -- ------- ----- ----------展开代码
替换对象原型
修改对象原型，则可以修改对象实例上的属性和方法。
-- -------------------- ---- ------- -------- -------- - -------- - ---------- - -------------------- ------ - - ----- -- - --- ---------------- ----- -------- - --- --------- ------------------ ------ -- -- - ---------------------- --- --- ------- --- -- ------------ --- --- ---- ---------------展开代码
执行恢复
如果在执行过程中，出现了意外或需要撤销我们所做的修改，在 MonkeyPatcher 中同样提供了对应的方法。
-- -------------------- ---- ------- -------- --------------- - ------------------- --------------- - ----- -- - --- ---------------- -- ---------- ----- ------- - ----------------- -------- ---------- -- - ------------------ -- --- ----- -- --------------- -- ---- ------------------------------- --- -- ------------------ ----------------- -- --- ------- --------------- -- --------- ----------- ------ ---------------------------- -- --------- ------ ---------------展开代码
应用示例
上述修改方式，相信读者已经掌握，这里给出一些实际的应用场景。
监听 & 干涉全局事件
假设我们需要在页面上添加一个 “Back to Top" 的按钮，并在用户点击之后，使页面回滚到顶端。
我们可以首先封装一个滚动页面函数：
function backToTop() { window.scrollTo({ top: 0, behavior: 'smooth', // 在一定时间内缓慢回滚 }); }
接下来，我们需要监听 window 对象的 scroll 事件，并判断页面是否到达了一定高度。如果达到了，则显示 “Back to Top" 按钮；否则隐藏按钮。
-- -------------------- ---- ------- --------------------------------- -- -- - ----- ------------ - --------------------------------------- -- ------------- -- --------------- - ---- - -------------------------- - -------- - ---- - -------------------------- - ------- - ---展开代码
最后，我们需要在按钮被点击时调用 backToTop() 函数来回滚页面：
document.querySelector('#back-to-top').addEventListener('click', backToTop);
至此，Back to Top 按钮的功能就实现了！但是我们发现，如果用户连续点击按钮，页面会一直回滚，这并不是我们所期望的结果。
我们期望的是，当页面正在回滚时，用户不能再次点击按钮；仅当回滚结束，按钮才变为可用状态。
显然，我们需要针对 backToTop() 函数来添加一些检查，以实现上述的需求。
这时候，就可以使用 @jeefo/monkey_patcher 来实现：在 backToTop() 函数执行前和执行后做出常识判断，达到目标效果。
-- -------------------- ---- ------- ----- -- - --- ---------------- -- ------------- --- ----------- - ------ -- ------- ----------------- ------------ -- -- - -- ------------- - -------------- ----------- -- ---------- ------ -------- ------ ------ - -- -------- ----------- - ----- --- -- ------- ---------------- ------------ -- -- - -- --------------- ----------- - ------ ---展开代码
扩展类方法
假设我们需要扩展线上代码中某个组件的功能。在不改变组件本身的代码的前提下，给它添加一个新的方法 getVersion()，其作用是返回组件当前的版本号。
那么，我们可以使用 @jeefo/monkey_patcher 来实现这一需求。
假设组件代码是这样的：
-- -------------------- ---- ------- ----- -------- - ------------- - ------------ - -------- - -------- - -- --- - -------- - -- --- - -展开代码
我们需要添加的新方法是 getVersion()，可以这样写：
// 创建新的扩展方法 function getVersion() { return this.version; } // 挂载到原型链上 mp.patch(MyWidget, 'getVersion', getVersion);
现在就可以愉快地在项目中使用该扩展方法了！
const widget = new MyWidget(); console.log(widget.getVersion()); // 输出：1.0.0
总结
@jeefo/monkey_patcher 是一个十分有用的 npm 包，在遇到需要在运行时动态修改代码的时候，可以派上用场。
但是，monkey patching 技术并不建议在生产环境中使用，因为它可能会造成一些无法预料的问题。如果有这方面的需求，建议使用更为安全和可预测的技术来实现。
以上就是 @jeefo/monkey_patcher 的基本用法和应用示例，希望可以对读者有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedbe22b5cbfe1ea0611b24
