在前端的开发过程中，我们经常需要对已有的函数进行一些特殊处理，例如打印函数调用的耗时，或者记录函数的输入输出参数等等。这时候，一个强大的npm包 method-wrap 就能够很好的帮助我们实现这些功能。
本篇文章将详细介绍 method-wrap 的使用方法，并结合实际的示例代码，向读者展示其深度和学习以及指导意义。
安装npm包
使用npm或者yarn都可以很方便地安装 method-wrap:
npm install method-wrap
或者，
yarn add method-wrap
使用方法
method-wrap 主要提供了两个API:
- wrap(object: Object, method: string, callback: Function, options?: WrapOptions): void;
- unwrap(object: Object, method: string): void;
1. wrap方法
wrap方法用于包装一个对象上的某个方法。例如下面的代码：
-- -------------------- ---- -------
----- - ---- - - -----------------------
-------- ------ -
------------------- ---------------
-
---------- ----------- ------------------ -
------ ---------- -
------ ------------- - ------------------------
-
---
---------------------------- -- --------- ------ - ------- ----- --执行上述代码后，我们会发现test.toString()返回的结果被改为了 "test + function test() { [native code] }"，这是因为我们使用 wrap 将 toString 方法进行了封装，在 toString 方法被调用时执行了自定义的回调函数。
wrap方法的四个参数说明：
- object: 需要包装的对象。
- method: 需要包装的方法名。
- callback: 自定义的回调函数，该函数接受被包装方法原有的实现作为第一个参数，通过执行这个函数并返回新的实现，即可替换被包装方法。
- options: 可选参数，一些额外的配置选项。
下面我们结合一个实际的例子来说明 wrap API 的用法：
-- -------------------- ---- -------
----- - ---- - - -----------------------
----- ---------- -
------------- -
------------ - ---
----------- - --
-
------ -- -
------------------- ------- ------ ----- --- --- ------- - - - ---
----------- - - - --
------ ------------
-
----------- -- -
------------------- ------- ----------- ----- --- --- ------- - - - ---
----------- - - - --
------ ------------
-
------- -
------------ - ---
----------- - --
-
-
-------------------------- ------ --------------------- -
------ ----------- -- -
----- ------ - ---------------------- -- ---
------------------- ---- --- ---- ------ -- ------------
------ -------
-
---
-------------------------- ----------- -------------------------- -
------ ----------- -- -
----- ------ - --------------------------- -- ---
--------------------- ---- ---- ---- ------ -- ------------
------ -------
-
---
----- ---------- - --- -------------
----------------- --- -- -
---------------------- --- -- -执行以上代码，我们会发现在执行加法和减法时，控制台打印了相应的信息。这样的话，我们就可以在调试代码过程中更加清楚地了解每个方法的具体执行情况。
2. unwrap方法
用于解除对一个对象某个方法的包装。示例如下：
-- -------------------- ---- -------
----- - ----- ------ - - -----------------------
----- ---------- -
------------- -
------------ - ---
----------- - --
-
------ -- -
------------------- ------- ------ ----- --- --- ------- - - - ---
----------- - - - --
------ ------------
-
----------- -- -
------------------- ------- ----------- ----- --- --- ------- - - - ---
----------- - - - --
------ ------------
-
------- -
------------ - ---
----------- - --
-
-
-------------------------- ------ --------------------- -
------ ----------- -- -
----- ------ - ---------------------- -- ---
------------------- ---- --- ---- ------ -- ------------
------ -------
-
---
----- ---------- - --- -------------
----------------------------- ---- -- -
---------------------------- -------
----------------------------- ---- -- -运行上面的代码后，我们会发现第一次调用 add 方法时控制台打印 "adding 2 and 3 result is 5"，第二次调用时没有任何输出。这是因为我们在第一次调用 add 方法时，在其前面添加了自定义的回调函数，并打印了一些信息，而当我们执行了 unwrap(Calculator.prototype, 'add') 之后，add 方法的包装就被解除了。
Options参数
wrap 函数还接受一个可选的 options 参数，用于指定一些包装方法的行为。下面介绍一些常见的选项参数：
shouldRestore
该属性指定了是否在包装时保存原有的方法实现，以便在解除包装时恢复原有的行为。当该值为 true 时，方法被包装时，原有的方法实现将保存在一个属性中，当解除包装时，这个值将被用于回复原有方法。示例如下：
-- -------------------- ---- -------
----- - ----- ------ - - -----------------------
----- ---------- -
------------- -
------------ - ---
----------- - --
-
------ -- -
------------------- ------- ------ ----- --- --- ------- - - - ---
----------- - - - --
------ ------------
-
----------- -- -
------------------- ------- ----------- ----- --- --- ------- - - - ---
----------- - - - --
------ ------------
-
------- -
------------ - ---
----------- - --
-
-
-------------------------- ------ --------------------- -
------ ----------- -- -
----- ------ - ---------------------- -- ---
------------------- ---- --- ---- ------ -- ------------
------ -------
-
-- - -------------- ---- ---
----- ---------- - --- -------------
----------------------------- ---- -- -
---------------------------- -------
----------------------------- ---- -- -
-------------------------- ------ --------------------- -
------ ----------- -- -
----- ------ - ---------------------- -- ---
-------------------- ------ ---- --- ---- ------ -- ------------
------ -------
-
-- - -------------- ---- ---
----------------------------- ---- -- -
---------------------------- -------
----------------------------- ---- -- -
运行上述代码后，我们会发现在调用同一个方法多次，不同的包装函数数会进入先后顺序，并且最后的结果是由最后的一个包装函数计算的，这是因为我们将 shouldRestore 参数设置为 true，所以原有的方法实现被保存下来了。
earlyAPI
该属性可以通过在构造函数的第二个参数传递 { earlyAPI: true }，使得在内部的代码执走之前，回调函数就被预处理好，而不是等到方法调用时才生成它。例如下面这个例子：
-- -------------------- ---- -------
----- - ----- ------ - - -----------------------
----- ---------- -
------------- -
------------ - ---
----------- - --
-
------ -- -
------------------- ------- ------ ----- --- --- ------- - - - ---
----------- - - - --
------ ------------
-
----------- -- -
------------------- ------- ----------- ----- --- --- ------- - - - ---
----------- - - - --
------ ------------
-
------- -
------------ - ---
----------- - --
-
-
-------------------------- ------ --------------------- -
-------------------- ---------
------ ----------- -- -
------------------- ---- --- -------
----- ------ - ---------------------- -- ---
------------------- -- ------------
------ -------
-
-- - --------- ---- ---
----- ---------- - --- -------------
----------------------------- ----执行上述代码后，我们会发现在实例化 Calculator 时，并没有打印出 Wrapped add()! 这一条信息，相反，它被延迟到了调用该方法时开始执行。
总结
本文介绍了 npm包 method-wrap 的使用方法以及相关的 API 及参数，我们可以看到 method-wrap 在函数包装上给我们带来了很多的便捷，特别是在一些调试的情境中，我们可以迅速了解到函数的运行情况，从而优化我们的代码。实际项目开发中我们可以根据实际情况使用 method-wrap，提高我们的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557ee81e8991b448d501b