前段时间我一个很怂的朋友说希望我给他介绍一个女朋友,简称songHai,我就托朋友帮忙物色了一个。那么怎么让这个怂货开始的时候不尬聊,那不得让双方有一个初步的了解。这个时候就需要代理模式。
定义
顾名思义就是帮别人做(zuo)事(mei)、解(la)决(pi)问(tiao)题,
代理模式(Proxy),为其他对象提供一种代理以控制这个对象的访问。
首先songHai需要知道对方的名字,为了一个好印象,开局送了辆宝马,不差钱。
// 先声明美女对象
var girl = function (name) {
this.name = name;
};
// 这是怂海
var songHai= function (girl) {
this.girl = girl;
this.sendGift= function (gift) {
alert("Hi " + girl.name + ", 怂逼送你一个礼物:" + gift);
}
};
// 好人是为代理
var proxyGoodMen = function (girl) {
this.girl = girl;
this.sendGift = function (gift) {
(new songHai(girl)).sendGift(gift); // 替songHai送宝马过去喽
}
};
在songHai 和proxyGoodMen 之间,属性和方法是很相近的,不同的是,对象songHai因为某种原因,不方便去直接执行sendGift,需要proxyGoodMen去代为执行。
执行方式
var proxy = new proxyTom(new girl("知名网红小妹"));
proxy.sendGift("宝马");
代理模式常用场景
1、远程代理,也就是为了一个对象在不同的地址空间提供局部代表,这样可以隐藏一个对象存在于不同地址空间的事实,就像web service里的代理类一样。
2、虚拟代理,根据需要创建开销很大的对象,通过它来存放实例化需要很长时间的真实对象,这样就可以达到性能的最优化,比如说你打开一个很大的HTML网页时,里面可能有很多的文字与图片,整个网页很快就可以打开,但你此时看到的是所有的文字,图片是一张张加载后才能看到,那些未下载的图片替代区域就是通过虚拟代理代替了真实的图片,
3、安全代理,用来控制真实对象访问时的权限,一般用于对象应该有不同的访问权限。
4、智能指引 ,是指当调用真实的对象时,代理处理另外一些事。
代理模式其实就是在访问对象时引入一定程度的间接性,因为这种间接性,可以附加多种用途。
用虚拟代理实现图片loading
看下面一段代码
var myImage = (function(){
var imgNode = document.createElement("img");
imgNode.alt='imgNode'
document.body.appendChild(imgNode);
return {
setSrc: function(src){
imgNode.src = src;
console.log('1')
}
}
}());
var proxyImage = (function(){
/**用来检测图片地址变化的对象img,并不会添加到界面中,只当做为与
被代理图片有相同src属性的对象。
**/
var img = new Image();
img.onload = function(){
console.log('4')
myImage.setSrc( this.src );
console.log('5')
}
return {
setSrc: function(src){
console.log('2')
myImage.setSrc( "loading.gif" );
console.log('3')
img.src = src;
}
}
})();
proxyImage.setSrc("load.jpg");
打印出的结果:
1
3
/**img.src = src 修改img 属性,图片加载完毕后触发img.onload函数**/
4
1
5
proxyImage对象首先调用了myImage.setSrc方法,加载一个加载速度快或者常用缓存好的图片,将将要加载的图片src赋值给 img对象,通过img.onload监测将要加载图片是否加载完成,然后再次调用myImage.setSrc方法。
es6中的proxy
在支持 Proxy 的浏览器环境中,Proxy
是一个全局对象,可以直接使用。 Proxy(target, handler)
是一个构造函数, target
是被代理的对象 handlde
是声明了各类代理操作的对象,最终返回一个代理对象。外界每次通过代理对象访问 target
对象的属性时,就会经过 handler
对象,从这个流程来看,代理对象很类似 middleware
(中间件)。那么 Proxy
可以拦截什么操作呢?最常见的就是 get(读取)
、 set(修改)
对象属性等操作,完整操作。
总结:
当你想用代理模式时,你可能会想要:
- 拦截或控制访问一个对象
- 简化模糊的规则或辅助逻辑方法/类的复杂性
- 没有验证/准备之前,防止重-资源动作。
待完成,其他应用代码未补充,反正没人看.gif