前端代理模式

在实际开发中，有的时候图片可能会很大，这个时候我们可能需要先将图片的位置用loading图片来占位，然后我们再去替换为真正要展示的图片。也就是我们看到正在loading的图片的时候，背后却在加载图片，等到图片加载好之后放上去。在这个例子中代理就是用来在后面加载图片，等到加载好之后就可以直接替换了。

let myImage = (function(){
    let img = new Image
    document.body.appendChild(img)
    return {
        setSrc:(src)=>{
            img.src = src
        }
    }
})()
let imgProxy =(function(){
    let imgProxy = new Image
    // 这个地方我使用了setTimeout来增强演示效果，否则本地加载太快，根本看不到。
    imgProxy.onload=function(){
        setTimeout(()=>{
            myImage.setSrc(this.src)
        },2000)
    }
    
    return (src)=>{
        myImage.setSrc("loading.jpg")  // 先加载默认图片
        imgProxy.src=src
    }
})()

imgProxy("../../img/background-cover.jpg")

• 使用代理就可以实现对于页面的背后加载，这个是对于图片加载很慢的时候使用的方法，但是如果我们发现图片直接加载的速度很高的时候我可以直接使用myImg中的方法。

• 其实我们也是解耦的思想，如果没有代理，原来的方法依然可以正常使用。对于上面那个送花的一样道理，就是说如果A一直处于心情好的状态，那么我们就不需要进行心情的监督了，所以说就可以直接将target定位A了。