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