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")

巴特西

js设计模式-代理模式

1.什么是设计模式？

2.应用场景：

最新文章

热门文章