JavaScript设计模式 | 11-代理模式

1、模式定义

代理模式，当一个对象不能直接引用另一个对象时，此时就需要通过代理对象在这两个对象之间起到中介作用。代理模式，在解决跨域问题时应用较为广泛。

2、代理模式 举例之 站长统计

// 代理模式之 站长统计
var Count = (function(){
    var _img = new Image();
    return function(param){
        var str = 'http://www.count.com/a.gif?';
        for(var i in param){
            str += i + '=' + param[i];
        }
        _img.src = str;
    }
})();

// 测试用例
Count({num:10});

3、代理模式 举例之 JSONP

// 代理模式之 jsonp
function jsonpCallBack(res,req){
    console.log(res,req);
}

<script src='http://localhost/jsonp.php?callback=jsonpCallBack&data=getJsonpData'></script>

// 服务端配置
<?php
    $data = $_GET['jsonpCallBack'];
    $callback = $_GET['getJsonpData'];
    echo $callback.$data;
?>

4、代理模式 举例之 代理模板

// X域中被代理的页面A
function callback(data){
    console.log('成功接收数据',data);
}

<iframe src="" name="proxyIframe"></iframe>
<form action="proxy.php" method="post" target="proxyIframe">
    <input type="text" name="callback" value="callback">
    <input type="text" name="proxy" value="http://localhost:8080/proxy.html">
    <input type="submit" value="submit">
</form>

// X域中代理页面B
window.onload = function(){
    if(top == self) return;
    var arr = location.search.substr(1).split('&');
    var fn, args;
    for(var i=0, len=arr.length, item; i<len; i++){
        item = arr[i].split('=');
        if(item[0] == 'callback'){
            fn = item[1];
        }else if(item[0] == 'arg'){
            args = item[1];
        }
    }
    try {
        eval('top.'+fn+'("'+args+'")');
    }catch(e){
        console.log(e);
    };
}

// 在Y域中配置请求解析逻辑和Header
<?php
    $proxy = $_POST['proxy'];
    $callback = $_POST['callback'];
    header('Location:'.$proxy.'?callback='.$callback.'&arg=success');
?>

5、小结

本章主要讲解了JavaScript中，运用代理模式解决跨域问题的相关知识。代理对象可以完全解决被代理对象和外界对象之间的耦合关系。同时，对被代理的对象来讲，这种代理模式也是对自身的一种保护。从服务器的角度看，这又是一种远程代理。

---

完！！！