代理模式

代理英文是proxy，就像经纪人一样，如果有通告需要找到明星，不能直接和明星直接接触，而是要找经纪人，经纪人进行筛选后，然后在和明星进行沟通。经纪人的所作就是代理类的作用

比如小明想送花给小红

下面的代码没有进行任何代理，而是小明直接送给了小红

   <script>
          function Flower(name) {
        this.name = name
    }
    var xiaoming = (function() {
        var flower = new Flower('玫瑰花');
        return {
            name: '小明',
            sendFlower: function(target) {
                // 送的目标
                target.getFlower(flower, this)
            }
        }
    })()
    var xiaohong = {
        getFlower: function(flower, person) {
            console.log("小红收到了" + person.name + '的' + flower.name)
    }
}
xiaoming.sendFlower(xiaohong)
    </script>

 

 

突然有一天，小红和小明生气了，小明为了哄小红开心，想送小红礼物，但是此时小红由于还在生小明的气，所以不会搭理小明。此时小明想到了小红的闺蜜，让她做代理，然后把礼物送给小红的闺蜜，让闺蜜适时送给小红

 <script>
         function Flower(name) {
            this.name = name
        }
        var xiaoming = (function() {
            var flower = new Flower('玫瑰花');
            return {
                name: '小明',
                sendFlower: function(target) {
                    // 送的目标
                    target.getFlower(flower, this)
                }
            }
        })();

        var guimi = (function() {
            return {
                name: "闺蜜",
                flower: null,
                sendPerson: null,
                // 获取小红心情的状态
                getState: function(state) {
                    // 如果此时小红的心情比较好，送花
                    if (this.flower && state == "心情很好") {
                        xiaohong.getFlower(this.flower, this.sendPerson)
                    }
                },
                getFlower: function(flower, person) {
                    // 得到小明的信息和礼物
                    this.flower = flower.name;
                    this.sendPerson = person.name;
                    console.log("闺蜜收到了" + person.name + '的' + flower.name)
                }
            }
        })();

        var xiaohong = (function() {
            var state;
            var timer = setInterval(function() {
                if (Math.random() > 0.5) {
                    state = '心情很好'
                } else {
                    state = '心情不好'
                }
                guimi.getState(state)
            }, 1000)
            return {
                getFlower: function(flower, person) {
                    // 接收自闺蜜转接的礼物
                    console.log("小红收到了来自闺蜜转接自" + person + "的" + flower)
                }
            }
        })()
        xiaoming.sendFlower(guimi)
    </script>

 

 

上面的代码中guimi处于一个代理状态，代理的是对小红的事件过程

 

缓存代理

我们可以使用代理模式进行缓存处理，也叫做缓存代理

缓存代理就是记录已经进行的进行（结果），然后再次执行的时候和代理类进行比对，然后判断是抛出已有的，还是执行新的功能

比如我们下面是计算数字的阶乘，已有的计算，我们直接抛出缓存，没有的执行阶乘函数

 

  <script>
       function factorial(number) {
        console.log("对" + number + "的阶乘计算");
        for (var i = number, result = 1; i >= 1; i--) {
            result *= i;
        }
        return result;
    } 
    console.log(factorial(5))
    </script>

 

 此时我们多输出几个结果会发现

 

 每次都会进行调用函数

    <script>
      function factorial(number) {
    console.log("对" + number + "的阶乘计算");
    for (var i = number, result = 1; i >= 1; i--) {
        result *= i;
    }
    return result;
}
// 设置一个代理类，缓存已经计算过的信息
var factorialProxy = (function() {
    var note = {};
    return function(number) {
        // 对已有内容的判断
        return note[number] ? note[number] : note[number] = factorial(number)
    }
})()
console.log(factorialProxy(5))
console.log(factorialProxy(5))
console.log(factorialProxy(5))
console.log(factorialProxy(6))
    </script>

此时我们设置一个代理类会发现，已经进行过的不在输出

 

 

代理类实现图片loading

我们可以通过代理类来实现图片的loading状态显示

    <script>
   function MyImage(src) {
    // 创建节点
    this.oImg = document.createElement("img");
    // 节点上树
    document.body.appendChild(this.oImg);
}
MyImage.prototype.setSrc = function(src) {
    this.oImg.src = src;
};
// 代理类
function MyImageProxy(src) {
    this.myImage = new MyImage();
    // 给图片设置初始的loading状态，防止如果图片不能预期加载，或者图片加载缓慢的时候的替换状态
    this.myImage.setSrc("images/loading.gif");
    // image就是一个 钩子，作用是用来表示当图片加载完毕之后，让MyIamge的实例进行渲染
    var image = new Image();
    image.src = src;
    var self = this;
    // onload表示当图片加载完毕之后，此时的图片是整张图的状态，而不是部分渲染
    image.onload = function() {
        self.myImage.setSrc(src)
    }
}
new MyImageProxy("images/0.jpg")
new MyImageProxy("images/1.jpg")
new MyImageProxy("images/2.jpg")
    </script>

此时我们降低网速可以看到loading效果