用 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：

myFunc = function(){
             BeforeFunction();
             myFunc();
             AfterFunction();
         }

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