JavaScript 装饰器如何？答案

【问题标题】：JavaScript decorators HOWTO?JavaScript 装饰器如何？
【发布时间】：2010-12-23 08:38:07
【问题描述】：

我需要装饰我无法修改的第 3 方功能，因此我需要以任何方式装饰它。我发现在 Prototype 中可以很容易地做到这一点 [1]。

在 jQuery 或纯 JavaScript 中是否有任何替代方法？

[1]http://api.prototypejs.org/language/Function/prototype/wrap/

【问题讨论】：

注意：需要用jquery或者plain js做，不能再添加js框架。

标签： javascript jquery prototype decorator

【解决方案1】：

你的场景需要一个库吗？似乎使用原生 javascript，您可以简单地：

保存原始函数的副本
创建使用原始函数的修改版本
在原始存储位置存储对修改版本的引用。

【讨论】：

保存原始副本是什么意思？像这样的东西？ new_func = originalFunc function myExtendedVersion() { // 做我的事情 new_func(); // 做我的事 }
是的，然后设置 originalFunc = myExtendedVersion。

【解决方案2】：

您可以使用 jquery AOP 插件：http://code.google.com/p/jquery-aop/

代码如下：

jQuery.aop.around( {target: window, method: 'originalFunc'}, 
  function(invocation) {
    // do your stuff
    invocation.proceed(); 
    // do your stuff
  }
);

【讨论】：

【解决方案3】：

我会选择 Frank Schwieterman 解决方案：

new_func = originalFunc
function myExtendedVersion()
{ 
  // do my stuff
  new_func();
  // do my stuff 
}

【讨论】：

【解决方案4】：

使用 jquery，只需添加另一个功能即可使用。尝试类似：

//Sample function you're wrapping around 
function say_hi(){
    alert('hi');
}

//quick jq plugin
jQuery.fn.functionWrap = function(arg,opts){
    if(opts.before && typeof(opts.before)=='function'){
        opts.before();
    }
    arg();
    if(opts.after && typeof(opts.after)=='function'){
        opts.after();
    }
};


//sample function to use the wrapper func
function btnPress(){
    $().functionWrap(
        say_hi,
        {
            before : function(){ alert('happens before'); }, 
            after : function(){ alert('happens after'); } 
        }
    );
}

尝试将其添加到您的页面中，并通过类似的方式对其进行测试：

<input type="button" value="asdf" onClick="btnPress();" />

希望这对您有所帮助。

【讨论】：

这样就可以了，谢谢。但我发现接受的答案更清晰。

【解决方案5】：

我喜欢库提供的 wrap 函数：Prototype 有 wrap 函数。在 ExtJS 中，可以使用 createDelegate 或 createInterceptor。 Dojo 具有声明性 AOP。 Sans 框架，可以这样做：

myFunction(){
   something();
   thirdParty.call();  // or apply
   perhapsSomethingElse();
}

【讨论】：