七、代理模式(Proxy Pattern)

1.概念介绍

代理模式(Proxy Pattern) 为其他对象提供一种代理，来控制这个对象的访问，代理是在客户端和真实对象之间的介质。

7.代理模式(Proxy) - 图1

简单的理解：如我们需要请明星来做广告，我们会先通过联系Ta的经纪人，谈好条件才会给明星签合同。

2.优缺点和应用场景

2.1优点

  • 职责单一且清晰。
  • 保护真实对象。
  • 开闭原则，高拓展性。

2.2缺点

  • 由于在客户端和真实对象间添加代理对象，导致请求处理速度变慢。
  • 实现代理模式需要额外工作，有些代理模式实现起来非常复杂。

2.3应用场景

  • 需要隐藏或保护某个类，则为这个类添加代理。
  • 需要给不同访问者提供不同权限，则在代理类上做判断。
  • 需要为某个类添加功能，如添加日志缓存等，我们可以在代理的类做添加，而不管去改原来封装好的类。

3.基本案例

这里我们以吃午饭问题来学习代理模式。通常情况下，我们会有两种方式解决午饭问题：“去餐厅吃”和“叫外卖”。
去餐厅吃的话，我们就是自己过去吃饭了呗，如果是叫外卖，我们就会通过外卖小哥来拿到午饭才能吃起来。

  • 去餐厅吃（没有使用代理模式）
  1. // 定义午饭类 参数 菜名
  2. let Lunch = function(greens){
  3.     this.greens = greens;
  4. }
  5. Lunch.prototype.getGreens = function(){
  6.     return this.greens;
  7. }
  8. // 定义我这个对象
  9. let leo = {
  10.     buy: function(greens){
  11.         console.log(`午饭吃${greens.getGreens()}`);
  12.     }
  13. }
  14. // 去餐厅吃
  15. leo.buy(new Lunch('青椒炒肉')); // 午饭吃青椒炒肉
  • 叫外卖（有使用代理模式）
  1. // 定义午饭类 参数 菜名
  2. let Lunch = function(greens){
  3.     this.greens = greens;
  4. }
  5. Lunch.prototype.getGreens = function(){
  6.     return this.greens;
  7. }
  8. // 定义外卖小哥这个对象
  9. let brother = {
  10.     buy: function(lunch){
  11.         leo.buy(lunch.getGreens());
  12.     }
  13. }
  14. // 定义我这个对象
  15. let leo = {
  16.     buy: function(greens){
  17.         console.log(`午饭吃${greens}`);
  18.     }
  19. }
  20. // 叫外卖
  21. brother.buy(new Lunch('青椒炒肉')); // 午饭吃青椒炒肉

并且外卖小哥还会帮我们做一些其他事，比如帮我们带瓶可乐，我们改造brother和leo这2个对象，再看看效果：

  1. let brother = {
  2.     buy: function(lunch){
  3.         if(leo.needCola) leo.buyCola();
  4.         leo.buy(lunch.getGreens());
  5.     }
  6. }
  8. let leo = {
  9.     needCola: true,
  10.     buy: function(greens){
  11.         console.log(`午饭吃${greens}`);
  12.     },
  13.     buyCola: function(){
  14.         console.log(`顺手买瓶可乐！`);
  15.     }
  16. }
  17. brother.buy(new Lunch('青椒炒肉'));
  18. // 顺手买瓶可乐！
  19. // 午饭吃青椒炒肉

4.保护代理

还是借用 3.基本案例 的叫外卖的例子，我们现在要实现保护代理，而我们需要外卖小哥为了我们的身体健康，超过晚上9点，就不帮我们买可乐。
还是改造上面买可乐的brother对象代码：

  1. let brother = {
  2.     buy: function(lunch){
  3.         let nowDate = new Date();
  4.         if(nowDate.getHours() >= 21){
  5.             console.log('亲，这么晚不要喝可乐哟！');
  6.         }else{
  7.             if(leo.needCola) leo.buyCola();
  8.             leo.buy(lunch.getGreens());
  9.         }
  10.     }
  11. }
  12. brother.buy(new Lunch('青椒炒肉'));
  13. // 顺手买瓶可乐！
  14. // 午饭吃青椒炒肉

5.虚拟代理

虚拟代理能把一些开销大的对象，延迟到真正需要的时候才去创建和执行。
我们这里举个图片懒加载的例子：
这个案例参考自JS设计模式-代理模式.

  1. // 图片加载
  2. let ele = (function(){
  3.     let node = document.createElement('img');
  4.     document.body.appendChild(node);
  5.     return{
  6.         setSrc : function(src){
  7.             node.src = src;
  8.         }
  9.     }
  10. })()
  12. // 代理对象
  13. let proxy = (function(){
  14.     let img = new Image();
  15.     img.onload = function(){
  16.         ele.setSrc(this.src);
  17.     }
  18.     return {
  19.         setSrc : function(src){
  20.             img.src = src;
  21.             ele.setSrc('loading.png');
  22.         }
  23.     }
  24. })()
  26. proxy.setSrc('example.png');

6.缓存代理

缓存代理是将一些开销大的运算结果提供暂存功能，当下次计算时，参数和之前一直，则将缓存的结果返回：
这个案例参考自JS设计模式-代理模式.

  1. //计算乘积
  2. let mult = function(){
  3.     let result = 1;
  4.     for(let i = 0; i<arguments.length; i++){
  5.         result *= arguments[i];
  6.     }
  7.     return result;
  8. }
  10. // 缓存代理
  11. let proxy = (function(){
  12.     let cache = {};
  13.     return function(){
  14.         let args = Array.prototype.join.call(arguments, '',);
  15.         if(args in cache){
  16.             return cache[args];
  17.         }
  18.         return cache[args] = mult.apply(this,arguments);
  19.     }
  20. })();

参考资料

  1. 《JavaScript Patterns》