前端进阶之路freeCodeCampWeb前端之路

代理模式--替别人把妹

2017-09-12  本文已影响95人  Ricoywang

前段时间我一个很怂的朋友说希望我给他介绍一个女朋友,简称songHai,我就托朋友帮忙物色了一个。那么怎么让这个怂货开始的时候不尬聊,那不得让双方有一个初步的了解。这个时候就需要代理模式。

定义

顾名思义就是帮别人做(zuo)事(mei)、解(la)决(pi)问(tiao)题,

代理模式(Proxy),为其他对象提供一种代理以控制这个对象的访问。
首先songHai需要知道对方的名字,为了一个好印象,开局送了辆宝马,不差钱。

// 先声明美女对象
var girl = function (name) {
    this.name = name;
};

// 这是怂海
var songHai= function (girl) {
    this.girl = girl;
    this.sendGift= function (gift) {
        alert("Hi " + girl.name + ", 怂逼送你一个礼物:" + gift);
    }
};

// 好人是为代理
var proxyGoodMen = function (girl) {
    this.girl = girl;
    this.sendGift = function (gift) {
        (new songHai(girl)).sendGift(gift); // 替songHai送宝马过去喽
    }
};


在songHai 和proxyGoodMen 之间,属性和方法是很相近的,不同的是,对象songHai因为某种原因,不方便去直接执行sendGift,需要proxyGoodMen去代为执行。

执行方式

var proxy = new proxyTom(new girl("知名网红小妹"));
proxy.sendGift("宝马");

代理模式常用场景

代理模式其实就是在访问对象时引入一定程度的间接性,因为这种间接性,可以附加多种用途。

用虚拟代理实现图片loading

看下面一段代码

var myImage = (function(){
    var imgNode = document.createElement("img");
    imgNode.alt='imgNode'
    document.body.appendChild(imgNode);
    return {
        setSrc: function(src){
            imgNode.src = src;
            console.log('1')
        } 
    }
}());

var proxyImage = (function(){
    /**用来检测图片地址变化的对象img,并不会添加到界面中,只当做为与
    被代理图片有相同src属性的对象。
    **/
    var img = new Image();
    img.onload = function(){
        console.log('4')
        myImage.setSrc( this.src );
        console.log('5')
    }
    return {
    setSrc: function(src){
        console.log('2')
        myImage.setSrc( "loading.gif" );
        console.log('3')
        img.src = src;
    }
  }
})();

proxyImage.setSrc("load.jpg");

打印出的结果:

1
3
/**img.src = src  修改img 属性,图片加载完毕后触发img.onload函数**/
4
1
5

proxyImage对象首先调用了myImage.setSrc方法,加载一个加载速度快或者常用缓存好的图片,将将要加载的图片src赋值给 img对象,通过img.onload监测将要加载图片是否加载完成,然后再次调用myImage.setSrc方法。

es6中的proxy

在支持 Proxy 的浏览器环境中,Proxy是一个全局对象,可以直接使用。 Proxy(target, handler)是一个构造函数, target是被代理的对象 handlde是声明了各类代理操作的对象,最终返回一个代理对象。外界每次通过代理对象访问 target对象的属性时,就会经过 handler对象,从这个流程来看,代理对象很类似 middleware(中间件)。那么 Proxy 可以拦截什么操作呢?最常见的就是 get(读取)set(修改)对象属性等操作,完整操作

总结:

当你想用代理模式时,你可能会想要:

  • 拦截或控制访问一个对象
  • 简化模糊的规则或辅助逻辑方法/类的复杂性
  • 没有验证/准备之前,防止重-资源动作。

待完成,其他应用代码未补充,反正没人看.gif

上一篇下一篇

猜你喜欢

热点阅读