JavaScript设计模式:代理模式

177 阅读1分钟

代理模式:当客户不方便直接访问一个对象或者不满足需要的时候,提供一个替身对象来控制对这个对象的访问,实际上访问的是替身对象。替身对象对请求做出一些处理之后,再把请求转交给本体。

小明追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