代理模式:当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,实际上访问的是替身对象。替身对象对请求做出一些处理之后,再把请求转交给本体。
小明追MM:小明将花转交给mm的朋友,当mm心情好的时候再给mm
var Flower = function(){}
var xiaoming = {
sendFlower:function(target){
var flower = new Flower()
target.receiveFlower(flower)
}
}
var friend = {
receiveFlower:function(flower){
mm.listenGoodMood(function(flower){ //将函数作为参数传入listenGoodMood
mm.receiveFlower(flower)
})
}
}
var mm ={
receiveFlower:function(flower){
console.log('收到花'+flower)
},
listenGoodMood:function(fn){
setTimeout(()=>{
fn()
},1000)
}
}
xiaoming.sendFlower(friend)
现实意义:代理实现图片预加载
var myImage = (function(){
var imgNode = document.createElement('img');
document.body.appendChild(imgNode);
return{
setSrc:function(src){
imgNode.src = src
}
}
})()
var proxyImage = (function(){
console.log(1)
var img = new Image()
img.onload=function(){
console.log(2)
myImage.setSrc(this.src)
//this指向img,等待img的onload读取,重新调用myImage,并将img的src:a传递给imgNode
}
return {
setSrc:function(src){ //src:a,赋值给img.src,myImage设置b照片
console.log(3)
//设置预加载的图片
myImage.setSrc('http://127.0.0.1:8848/study/img/loading.gif')//b
img.src = src
}
}
})()
//设置要展示的图片
proxyImage.setSrc('http://127.0.0.1:8848/study/img/23_iso100_14mm.jpg')//a
//执行顺序1,3,2
缓存代理
var mult = function(){
console.log('开始计算乘积')
var a = 1;
for(let i = 0;i<arguments.length;i++){
a=a*arguments[i] //mult的fn参数
}
return a
}
mult(2,3)//6
mult(2,3,4)//24
var proxyMult = (function(){
var cache = {}
console.log(arguments,'arguments')
console.log(typeof(arguments)) //object
return function(){
var args = Array.prototype.join.call(arguments,',')
//arguments是伪数组,需要借用array的方法变成数组
if(args in cache){
return cache[args]
}
return cache[args] = mult.apply(this,arguments) //调用mult方法
}
})()
console.log(proxyMult(1,2,3,4))//24
console.log(proxyMult(1,2,3,4))//24