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

       匿名函数的拦截：