js设计模式-代理模式

1.什么是设计模式？

设计模式：在软件设计过程中常用的代码规范，针对特定的场景

2.应用场景：

麦当劳点餐  观察者模式   规定的代码格式

花店送花  ：代理模式

真实对象（男同学）-----代理对象（花店人员）----用户（女同学）

 //声明女孩对象（用户）

 var girl = function(name){

　　 this.name = name;

　　 console.log(this);

 }

//声明男同学(真实对象)
var boy = function(girl){
    //女同学
    this.girl = girl;
    //送花 行为
    this.sendCift = function(gift){
        console.log("hi"+this.girl.name+",送你一个礼物"+gift);//hi小芳,送你一个礼物999朵玫瑰
    }
}

//代理对象 花店员工(代理对象)
var ProxyObj = function(girl){
    this.girl = girl;//需要知道女孩信息
    this.sendCift = function(gift){
        (new boy(this.girl)).sendCift(gift);//替人送花
    }
}
//调用
var girl = new girl("小芳");
var proxy = new ProxyObj(girl);
proxy.sendCift("999朵玫瑰")

图片懒加载 ：代理模式

真实图片（较大，加载慢）---代理图片（较小，加载快）---浏览器

window.onload = function(){
     var myImage = (function(){ //自执行函数
     var imgNode = document.createElement("img"); //创建图片节点
     document.body.appendChild(imgNode); //把创建的图片加入到body
     var img = new Image(); //代理对象，先展示等待图片 接着负责拉取真实图片
     img.onload = function(){ //当真实图片加载完毕后触发
         setTimeout(()=>{
             imgNode.src = this.src; //最后 将用真实图片把展示的等待图片替换
         },2000)
     }
     return { //返回一个对象 myImage
         setSrc:function(src){
         　　　　//先展示等待的图片 小图片
         　　　　imgNode.src = "http://img.lanrentuku.com/img/allimg/1212/5-121204193R0.gif";
                img.src = src; //把真实图片给代理对象
         }
     }
     })()
     //把真实图片给到myImage对象
      myImage.setSrc("https://www.baidu.com/img/bd_logo1.png") //真实图片地址
}    

使用代理模式重构图片懒加载

//真实对象
var myImage = (function(){
    var imgNode = document.createElement("img"); //创建图片节点
    document.body.appendChild(imgNode); //把创建的图片加入到body
    return { 
         //返回一个对象 myImage
          setSrc:function(src){
                imgNode.src = src;
          }
     }
})()
   
//代理对象
var ProxyImage = (function(){
    var img = new Image();
    img.onload = function(){
          setTimeout(()=>{
               myImage.setSrc(this.src); //最后 将用真实图片把展示的等待图片替换
          },2000)
    }
    return { 
          //返回一个对象 myImage
          setSrc:function(src){
          //先展示等待的图片 小图片
          myImage.setSrc("http://img.lanrentuku.com/img/allimg/1212/5-121204193R0.gif");
                 mg.src = src;
          }
    }
})();

//用户
ProxyImage.setSrc("https://www.baidu.com/img/bd_logo1.png")