开发者

JavaScript decorators HOWTO?

开发者 https://www.devze.com 2022-12-13 10:58 出处:网络
I need to decorate a 3rd party function that I can\'t modify so I will need to decorate it in any way. I found that in Prototype there is something to do it easily [1].

I need to decorate a 3rd party function that I can't modify so I will need to decorate it in any way. I found that in Prototype there is something to do it easily [1].

Is there a开发者_如何转开发ny alternative to that in jQuery or in plain JavaScript?

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


What about your scenario requires a library? It seems that with native javascript, you could simply:

  • Save a copy of the original function
  • Create a modified version of the function which uses the original
  • Store a reference to the modified version where the original was originally stored.


With jquery, it would be pretty easy to just add in another function to use. Try something like:

//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'); } 
        }
    );
}

Try adding that to your page, and something like this to test it out:

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

Hope this helps you.


I like the wrap functions provided by libraries: Prototype has the wrap function. In ExtJS, one might use createDelegate or createInterceptor. Dojo has declarative AOP. Sans framework, one might do this:

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


You could do it with the jquery AOP plugin: http://code.google.com/p/jquery-aop/

Code would look like:

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


I will go for Frank Schwieterman solution:

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

精彩评论

暂无评论...
验证码 换一张
取 消