代理模式，状态模式

代理模式：

由于一个对象不能直接应用另一个对象，所以需要通过代理对象在这两个对象之间起到中介作用。

在生活中，代理模式的场景是十分常见的，例如我们现在如果有租房、买房的需求，更多的是去找链家等房屋中介机构，而不是直接寻找想卖房或出租房的人谈。此时，链家起到的作用就是代理的作用。链家和他所代理的客户在租房、售房上提供的方法可能都是一致的（收钱，签合同），可是链家作为代理却提供了访问限制，让我们不能直接访问被代理的客户。

面向对象的编程中，代理模式的合理使用能够很好的体现下面两条原则:

单一职责原则: 面向对象设计中鼓励将不同的职责分布到细粒度的对象中，要使其功能职责单一纯碎，Proxy 在原对象的基础上进行了功能的衍生而又不影响原对象，符合高内聚，低耦合的设计理念。

开放-封闭原则：代理可以随时从程序中去掉，而不用对其他部分的代码进行修改，在实际场景中，随着版本的迭代可能会有多种原因不再需要代理，那么就可以容易的将代理对象换成原对象的调用

ES6中的代理模式：

ES6所提供Proxy构造函数能够让我们轻松的使用代理模式:

语法：

let p = new Proxy(target, handler);

//target：表示所要代理的对象，第二个参数handler也是一个对象用来设置对所代理的对象的行为。

//handler：一个对象，其属性是当执行一个操作时定义代理的行为的函数。

1.缓存代理

缓存代理可以为一些开销大的运算结果提供暂时的存储，在下次运算时，如果传递进来的参数跟之前的一致，则可以直接返回前面存储的运算结果，提供效率以及节省开销。

var mult = function(){
    console.log('开始计算乘机');
    var a = 1;
    for(var i = 0, l = arguments.length;i < l;i++){
        a = a*arguments[i];
    }
    return a;
};
 
var proxyMult = (function(){
   var cache = {};  //创建缓存
   return function(){
       var args = Array.prototype.join.call( arguments, ',');  //把方法添加为属性
       if(args in cache){
           return cache[args]; //直接返回
       }
        return cache[args] = mult.apply( this, arguments);
   }
})();
 
proxyMult( 1,2,3,4);  //输出：24
proxyMult( 1,2,3,4);  //输出：24

当我们第二次调用proxyMult()时，mult函数并没有被调用，而是直接从cache中返回了之前被缓存好的计算结果。通过加入缓存代理的方式，mult只需要专注于自己计算斐波那契数列的职责，缓存的功能使由Proxy对象实现的。这实现了我们之前提到的单一职责原则。

 

 

2.验证代理

Proxy构造函数第二个参数中的set方法，可以很方便的验证向一个对象的传值。我们以一个传统的登陆表单举例，该表单对象有两个属性,分别是account和password，每个属性值都有一个简单和其属性名对应的验证方法，验证规则如下：

const userForm = {
  account: '',
  password: '',
}

// 验证方法
const validators = {
  account(value) {
    // account 只允许为中文
    const re = /^[\u4e00-\u9fa5]+$/;
    return {
      valid: re.test(value),
      error: '"account" is only allowed to be Chinese'
    }
  },

  password(value) {
    // password 的长度应该大于6个字符
    return {
      valid: value.length >= 6,
      error: '"password "should more than 6 character'
    }
  }
}

下面我们来使用Proxy实现一个通用的表单验证器

const getValidateProxy = (target, validators) => {
  return new Proxy(target, {
    _validators: validators,
    set(target, prop, value) {
      if (value === '') {
        console.error(`"${prop}" is not allowed to be empty`);
        return target[prop] = false;
      }

      const validResult = this._validators[prop](value);
      if(validResult.valid) {
        return Reflect.set(target, prop, value);
      } else {
        console.error(`${validResult.error}`);
        return target[prop] = false;
      }

    }
  })
}
const userFormProxy = getValidateProxy(userForm, validators);
userFormProxy.account = '123'; // "account" is only allowed to be Chinese
userFormProxy.password = 'he'; // "password "should more than 6 character

getValidateProxy方法去生成了一个代理对象userFormProxy，该对象在设置属性的时候会根据validators的验证规则对值进行校验。这我们使用的是console.error抛出错误信息。

 

3.总结

ES6提供的Proxy可以让JS开发者很方便的使用代理模式。虽然代理模式很方便，但是在业务开发时应该注意使用场景，不需要在编写对象时就去预先猜测是否需要使用代理模式，只有当对象的功能变得复杂或者我们需要进行一定的访问限制时，再考虑使用代理。

 

状态模式

定义：将事物内部的每个状态分别封装成类，内部状态改变会产生不同行为。

主要解决：对象的行为依赖于它的状态（属性），并且可以根据它的状态改变而改变它的相关行为。

何时使用：代码中包含大量与对象状态有关的条件语句。

如何解决：将各种具体的状态类抽象出来。

初识状态模式：

想象这样一个场景：有一个电灯，电灯上面只有一个开关。当电灯开着的时候，此时按下开关，电灯会切换到关闭状态；再按一次开关，电灯又将被打开。同一个开关按钮，在不同的状态下，表现出来的行为是不一样的

首先定义一个Light类，可以预见，电灯对象light将从Light类创建而出，light对象将拥有两个属性，用state来记录电灯当前的状态，用button表示具体的开关按钮

不用状态模式的电灯程序实现：

var Light = function(){
    this.state = 'off'; // 给电灯设置初始状态off
    this.button = null; // 电灯开关按钮
};

接下来定义Light.prototype.init方法，该方法负责在页面中创建一个真实的button节点，假设这个button就是电灯的开关按钮，当button的onclick事件被触发时，就是电灯开关被按下的时候，代码如下：

Light.prototype.init = function(){
    var button = document.createElement( 'button' ),
    self = this;
    button.innerHTML = '开关';
    this.button = document.body.appendChild( button );
    this.button.onclick = function(){
        self.buttonWasPressed();
    }
};

　　当开关被按下时，程序会调用self.buttonWasPressed方法，开关按下之后的所有行为，都将被封装在这个方法里，代码如下：

Light.prototype.buttonWasPressed = function(){
    if ( this.state === 'off' ){
        console.log( '开灯' );
        this.state = 'on';
    }else if ( this.state === 'on' ){
        console.log( '关灯' );
        this.state = 'off';
    }
};

var light = new Light();
light.init();

这个有些种类的判断并非只有一种。许多酒店里有另外一种电灯，这种电灯也只有一个开关，但它的表现是：第一次按下打开弱光，第二次按下打开强光，第三次才是关闭电灯。现在必须改造上面的代码来完成这种新型电灯的制造：

Light.prototype.buttonWasPressed = function(){
    if ( this.state === 'off' ){
        console.log( '弱光' );
        this.state = 'weakLight';
    }else if ( this.state === 'weakLight' ){
        console.log( '强光' );
        this.state = 'strongLight';
    }else if ( this.state === 'strongLight' ){
        console.log( '关灯' );
        this.state = 'off';
    }
};

缺点：

1. 违反开放——封闭原则的，次新增或者修改light的状态，都需要改动buttonWasPressed方法中的代码，非常不稳定
2. 所有跟状态有关的行为，都被封装在buttonWasPressed方法里，如果以后这个电灯又增加了强强光、超强光和终极强光，那将无法预计这个方法将膨胀到什么地步。
3. 状态的切换非常不明显，仅仅表现为对state变量赋值，比如this.state='weakLight'。没有办法一目了然地明白电灯一共有多少种状态，除非耐心地读完buttonWasPressed方法里的所有代码。当状态的种类多起来的时候，就会是一个鸡肋
4. 状态之间的切换关系，不过是往buttonWasPressed方法里堆砌if、else语句，增加或者修改一个状态可能需要改变若干个操作，这使buttonWasPressed更加难以阅读和维护

状态模式：

借助于 JavaScript 的委托机制，可以像如下实现状态模式：

const obj = {
  'weakLight': {
    press: function() {
      console.log('打开强光')
      this.currentState = obj.strongLight
    }
  },

  'strongLight': {
    press: function() {
      console.log('关灯')
      this.currentState = obj.offLight
    }
  },

  'offLight': {
    press: function() {
      console.log('打开弱光')
      this.currentState = obj.weakLight
    }
  },
}

const Light = function() {
  this.currentState = obj.offLight
}

Light.prototype.init = function() {
  const btn = document.createElement('button')
  btn.innerHTML = '按钮'
  document.body.append(btn)
  const self = this
  btn.addEventListener('click', function() {
  self.currentState.press.call(self) // 通过 call 完成委托
  })
}

const light = new Light()
light.init()

js状态模式优点： 

1. 封装了转换规则。
2. 枚举可能的状态，在枚举状态之前需要确定状态种类。
3. 将所有与某个状态有关的行为放到一个类中，并且可以方便地增加新的状态，只需要改变对象状态即可改变对象的行为。
4. 允许状态转换逻辑与状态对象合成一体，而不是某一个巨大的条件语句块。
5. 可以让多个环境对象共享一个状态对象，从而减少系统中对象的个数。

js状态模式缺点： 

1. 状态模式的使用必然会增加系统类和对象的个数。
2. 状态模式的结构与实现都较为复杂，如果使用不当将导致程序结构和代码的混乱。
3. 状态模式对"开闭原则"的支持并不太好，对于可以切换状态的状态模式，增加新的状态类需要修改那些负责状态转换的源代码，否则无法切换到新增状态，而且修改某个状态类的行为也需修改对应类的源代码。