js动态代理

最近公司的产品陆续跟其他网站有合作，麻烦的是每个网站都有个性化的需求，有的需要自己的logo，有的需要定制的广告。

例如默认我们显示的是Google广告 http://www.wangchao.net.cn/bbsdetail_1950471.html

但是此站需要专门显示旅游类广告 http://www.wangchao.net.cn/bbsdetail_1950471.html

产品的UI相当复杂，hard code 当然是不能接受的。此时我很怀念我当年在.net用的Windsor，于是马上弄了个动态代理出来（对动态语言来说是小菜一碟），让我能给特定的宿主网站通过添加额外的js文件注入自己定制的代码

 

 

( function (){
     var  interceptors  =  {};
    $.intercept  =   function (name, func){
         var  parts  =  name.split( ' . ' );
         var  owner  =  window;
         for  ( var  i  =   0 ; i  <  parts.length  -   1 ; i ++ ){
            owner  =  owner[parts[i]];
             if  ( ! owner)  break ;
        }
         if  (owner){
             var  funcName  =  parts[parts.length  -   1 ];
             var  target  =  owner[funcName];
        }
         if  ( ! (owner  &&  target)){
            interceptors[name]  =  func;
             return ;
        }
        owner[funcName]  =   function (){
             this .__invocation__  =  target;
            func.apply( this , arguments)
        }
    }
    
    $._  =   function (name, func, scope, args){
         var  interceptor  =  interceptors[name];
         if  (interceptor){
            scope  =  scope  ||  window;
            scope.__invocation__  =  func;
             return  interceptor.apply(scope, args  ||  []);
        }
         else  {
             return  func.apply(scope, args  ||  []);
        }
    }
})()

 

 要拦截函数很简单，以被拦截的函数名和用于拦截的函数为参数

$.intercept  =   function ( ' objectName.methodName ' ,  function (){
// do something
// and invoke the original method if needed
    this .__invocation();
})

 

当然现实中我的代码里的函数几乎都是私有或匿名的（这是避免命名冲突的最佳实践），并且我通常只想修改其中的一两行代码。于是我再写多了个方法，实现实时包装和调用。

原本是这样

$( ' #clickMe2 ' ).click( function (){
     alert( ' 这是匿名函数，休想跨作用域追捕 ' );
     alert($( ' #content ' ).text());
});

 

 改成这样，就可以照样用 intercept() 插一脚了，虽然原来的代码也需要修改，但是至少它不包含自定义的逻辑

$( ' #clickMe2 ' ).click( function (){
    $._( ' fuck_them_up ' ,  function (){
        alert( ' 这是匿名函数，休想跨作用域追捕 ' );
        alert($( ' #content ' ).text());
    });
});

 

Demo，看看点intercept me之前和之后点 click me 会有什么不同？

function  fuckThemUp(s){
    alert(s);
}
$( ' #clickMe ' ).click( function (){
    fuckThemUp($( ' #content ' ).text());
});
$( ' #interceptMe ' ).click( function (){
    $.intercept( ' fuckThemUp ' ,  function (s){
        alert( ' 河蟹来了! ' );
        s  =  s.replace( / 修脚刀 / ,  ' 水果刀 ' );
        s  =  s.replace( / 特殊服务 / ,  ' 异性洗浴服务 ' );
        s  =  s.replace( / 按倒 / ,  ' 推坐 ' );
         this .__invocation__(s);
    });
});
$( ' #clickMe2 ' ).click( function (){
    $._( ' fuck_them_up ' ,  function (){
        alert( ' 这是匿名函数，休想跨作用域追捕 ' );
    });
});
$( ' #interceptMe2 ' ).click( function (){
    $.intercept( ' fuck_them_up ' ,  function (s){
        alert( ' 还不抓到你? ' );
    });
});

 

 2009年5月10日，湖北巴东县野三关镇政府招商协调办公室主任邓贵大、黄德智等人在镇雄风宾馆梦幻城消费，要求女服务员（邓玉娇）提供“特殊服务”， 拿出一叠钱炫耀并朝头、肩部搧击，还两次将按倒在沙发上。邓玉娇用修脚刀将对方两人刺伤，邓贵大被刺伤喉部，经抢救无效死亡。

       匿名函数的拦截：

转载于:https://www.cnblogs.com/Yok/archive/2009/05/23/js_dynamic_proxy.html