代理模式精讲-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44746132/article/details/105627132

模式切入：

何为代理模式
代理模式的使用场景
使用js实现一个简单的代理模式
列举代理模式的几种实例

何为代理模式：
比较正式一点的定义是：代理模式是为一个对象提供一个代理品或者占位符，以便于对它进行访问控制
通俗点来说，代理模式就是为一个对象添加一个中间代理层，所有对于该对象的操作都需要经由这个代理层，代理层需要提供和原本对象一样的方法，让使用者使用时感觉上和直接操作该对象是一样的。这就好比我们使用代理访问一个国外的网站时我们访问的URL地址是一样的，而不会因为使用了代理而改变.
代理模式的使用场景：

当需要对一个对象进行保护时，使用代理去过滤掉一些带有危害性的操作以及拦截操作
使用代理实现请求的转发：常说的使用nodejs作为代理请求的中间层，当一个http请求到来的时候代理到具体的网络请求地址
…

使用js实现一个简单的代理模式:
这是代理模式中最常见的一个例子：图片预加载

var loadImage = (function() {
    var imgNode = document.createElement('img');     
    document.body.appendChild(imgNode);
    return {
        setSrc: function(src) {
             imgNode.src = src; 
        }
    } 
})();

var proxyImage = (function() { 
    var img = new Image; 
    img.onload = function() { // 图片加载完设置真实图片src
        loadImage.setSrc(this.src); 
    }
    return {
        setSrc: function(src) {
             loadImage.setSrc('./loading.gif'); // 预先设置图片src为loading图 
             img.src = src;  
        }
    } 
})();

proxyImage.setSrc('./loadImg.jpg');

列举代理模式的几种实例

js中的事件代理的机制：

// 有这样一个html标签：
<div id="app">
	<a href="#">a1</a>
</div>

// 使用js的时间代理获取到a点击事件
var div = document.getElementById("#app");
// 通过事件冒泡的机制实现的事件代理
div.addEventListener("click", function(e){
	var ele = e.target;
	console.log(ele.innerHTML)  // a1
})

jquery中的$.proxy

// 同样是这样一个html标签：
<div id="app">
	<a href="#">a1</a>
</div>

// 使用jquery进行事件绑定:
$("#app").click(function(e){
	// 执行setTimeout这样的异步处理后，使用$(this)得到的是window对象，而不再是当前的这个节点元素的jquery对象了
	// 如果需要异步处理后仍然可以获取到当前的节点对象，除了传统的将当前的this对象赋值保留之外，可以使用$.proxy()进行代理: 如下所示
	setTimeout($.proxy(function(){
		$(this).css("background", "pink")
	}, this), 1000)
})

ES6中的Proxy对象实现代理：
注：这里以一个明星和经纪人的例子来演示：经纪人是明星的代理，通过经纪人了解明星信息:

// 定义一个明星对象：
const star = {
    name: "陈XXX",
    age: 25,
    height: 170,
    weight: 110,
    phone: "11111111111"
}
// 使用Proxy对象实现经纪人：
const agent = new Proxy(star, {
	// get方法中接收的两个参数： 1.target为代理的对象  star
	//						 2. key为获取对象的属性值的名称
    get: function (target, key) {
    	// 做一些信息获取的拦截
        if (key === "phone") {
            // 返回经济人的电话
            return "00000000000"
        }
        if (key === "age" || key === "height" || key === "weight") {
            return "信息保密"
        }
        if (key === "price") {
            return 120000;
        }
        return target[key]
    },
    // 为对象属性赋值的方法： 参数target为当前代理对象， key为属性的名称， val为设置的属性的值
    set: function (target, key, val) {
        if (key === "price") {
            if (val < 100000) {
                throw new Error("价格太低，免谈！")
            } else {
                target[key] = val;
                return true;
            }
        }
        return false;
    }
})

// 测试可以实现相应的代理效果。。。