在 Javascript / jQuery 中包装函数

Question

如果我有一个任意函数myFunc，我的目标是用一个包装调用替换这个函数，该调用在它执行之前和之后运行代码，例如

// note: psuedo-javascript

var beforeExecute = function() { ... }
var afterExecute = function() { ... }

myFunc = wrap(myFunc, beforeExecute, afterExecute);

但是，我没有所需的wrap 函数的实现。像这样的jQuery中是否已经存在任何东西（我已经很好地浏览了文档但看不到任何东西）？或者，是否有人知道这是一个很好的实现，因为我怀疑如果我尝试自己编写它，我会错过很多边缘情况？

（顺便说一句 - 这样做的原因是对功能进行一些自动检测，因为我们在 Javascript 分析器等不可用的封闭设备上做了很多工作。如果有比这更好的方法，那么我会很感激答案也是如此。）

Answer 1

这是一个wrap 函数，它将使用完全相同的参数调用before 和after 函数并且，如果提供了相同的this 值：

var wrap = function (functionToWrap, before, after, thisObject) {
    return function () {
        var args = Array.prototype.slice.call(arguments),
            result;
        if (before) before.apply(thisObject || this, args);
        result = functionToWrap.apply(thisObject || this, args);
        if (after) after.apply(thisObject || this, args);
        return result;
    };
};

myFunc = wrap(myFunc, beforeExecute, afterExecute);

Answer 2

接受的实现不提供有条件地调用包装（原始）函数的选项。

这是包装和解包方法的更好方法：

  /*
    Replaces sMethodName method of oContext with a function which calls the wrapper 
    with it's list of parameters prepended by a reference to wrapped (original) function.

    This provides convenience of allowing conditional calls of the 
    original function  within the wrapper,

    unlike a common implementation that supplies "before" and "after" 
    cross cutting concerns as two separate methods.

    wrap() stores a reference to original (unwrapped) function for 
    subsequent unwrap() calls.

    Example: 
    =========================================

    var o = {
        test: function(sText) { return sText; }
    }

    wrap('test', o, function(fOriginal, sText) {
        return 'before ' + fOriginal(sText) + ' after';
    });
    o.test('mytext')  // returns: "before mytext after"

    unwrap('test', o);
    o.test('mytext')  // returns: "mytext"

    =========================================
*/
function wrap(sMethodName, oContext, fWrapper, oWrapperContext) {
    var fOriginal = oContext[sMethodName];

    oContext[sMethodName] = function () {
        var a = Array.prototype.slice.call(arguments);
        a.unshift(fOriginal.bind(oContext));
        return fWrapper.apply(oWrapperContext || oContext, a);
    };
    oContext[sMethodName].unwrapped = fOriginal;
};

/*
    Reverts method sMethodName of oContext to reference original function, 
    the way it was before wrap() call
*/
function unwrap(sMethodName, oContext) {
    if (typeof oContext[sMethodName] == 'function') {
        oContext[sMethodName] = oContext[sMethodName].unwrapped;
    }
};

Answer 3

这是我将使用的示例

<script type="text/javascript">
  var before = function(){alert("before")};
  var after = function(param){alert(param)};
  var wrap = function(func, wrap_before, wrap_after){
    wrap_before.call();
    func.call();
    wrap_after.call();
  };
  wrap(function(){alert("in the middle");},before,function(){after("after")});
</script>

Answer 4

你可以这样做：

var wrap = function(func, pre, post)
{
  return function()
  {
    var callee = arguments.callee;
    var args = arguments;

    pre();    
    func.apply(callee, args);    
    post();
  };
};

这将允许您这样做：

var someFunc = function(arg1, arg2)
{
    console.log(arg1);
    console.log(arg2);
};

someFunc = wrap(
    someFunc,
    function() { console.log("pre"); },
    function() { console.log("post"); });

someFunc("Hello", 27);

这给了我在 Firebug 中的输出：

pre
Hello
27
post

以这种方式包装的重要部分是将您的参数从新函数传递回原始函数。

Answer 5

也许我错了，但我认为你可以直接创建一个匿名函数并将其分配给 myFunc：

我的函数 = 函数（）{ 前函数（）； 我的函数（）； 后功能（）； }

这样你可以控制每个函数的参数。