Ketahui corak keadaan kemahiran reka bentuk JavaScript patterns_javascript

Kunci kepada model keadaan adalah untuk membezakan keadaan dalaman sesuatu. Perubahan dalam keadaan dalaman sesuatu selalunya membawa kepada perubahan dalam tingkah laku sesuatu.

Apabila lampu menyala dan anda menekan suis, lampu akan bertukar kepada keadaan mati; Suis yang sama berkelakuan berbeza dalam keadaan berbeza.

1. Mesin keadaan terhingga

• Jumlah bilangan negeri (negeri) adalah terhad.
• Pada bila-bila masa, anda hanya berada dalam satu keadaan.
• Di bawah syarat tertentu, akan berlaku peralihan dari satu negeri ke negeri yang lain.
  

Membenarkan objek menukar kelakuannya apabila keadaan dalamannya berubah, menjadikan objek kelihatan mengubah suai kelasnya.
Penjelasan:
(1) Merangkum keadaan ke dalam kelas bebas dan mewakilkan permintaan kepada objek keadaan semasa Apabila keadaan dalaman objek berubah, perubahan tingkah laku yang berbeza akan berlaku.
(2) Objek yang digunakan mempunyai tingkah laku yang sama sekali berbeza (kesan perwakilan) dalam keadaan yang berbeza

Mengenai pengkapsulan, keutamaan biasanya diberikan kepada merangkum gelagat objek dan bukannya keadaan objek.
Tetapi dalam corak keadaan, ia adalah sebaliknya. Kunci kepada corak keadaan adalah untuk merangkum setiap keadaan sesuatu ke dalam kelas yang berasingan.

2. Contoh

Kitaran program pencahayaan (cahaya malap –> cahaya kuat –> cahaya padam)

// 关灯
var OffLightState = function(light) {
  this.light = light;
};
// 弱光
var OffLightState = function(light) {
  this.light = light;
};
// 强光
var StrongLightState = function(light) {
  this.light = light;
};

var Light = function(){
  /* 开关状态 */
  this.offLight = new OffLightState(this);
  this.weakLight = new WeakLightState(this);
  this.strongLight = new StrongLightState(this);
  /* 快关按钮 */
  this.button = null;
};
Light.prototype.init = function() {
  var button = document.createElement("button"),
    self = this;
  this.button = document.body.appendChild(button);
  this.button.innerHTML = '开关';
  this.currentState = this.offLight;
  this.button.click = function() {
    self.currentState.buttonWasPressed();
  }
};
// 让抽象父类的抽象方法直接抛出一个异常（避免状态子类未实现buttonWasPressed方法）
Light.prototype.buttonWasPressed = function() {
  throw new Error("父类的buttonWasPressed方法必须被重写");
};
Light.prototype.setState = function(newState) {
  this.currentState = newState;
};

/* 关灯 */
OffLightState.prototype = new Light(); // 继承抽象类
OffLightState.prototype.buttonWasPressed = function() {
  console.log("关灯！");
  this.light.setState(this.light.weakLight);
}
/* 弱光 */
WeakLightState.prototype = new Light();
WeakLightState.prototype.buttonWasPressed = function() {
  console.log("弱光！");
  this.light.setState(this.light.strongLight);
};
/* 强光 */
StrongLightState.prototype = new Light();
StrongLightState.prototype.buttonWasPressed = function() {
  console.log("强光！");
  this.light.setState(this.light.offLight);
};

PS: Penjelasan tambahan
Pembina OffLightState, WeakLightState, StrongLightState mestilah maju.

new A("a");
var A = function(a) {
  console.log(a)
}

new B("b");
function B(b) {
  console.log(b);
}

Pengisytiharan fungsi akan dinaikkan sebelum pembolehubah biasa.

3. Mata pengoptimuman prestasi

(1) Bagaimana untuk menguruskan penciptaan dan pemusnahan objek negeri?
Yang pertama hanya dibuat apabila objek keadaan diperlukan dan kemudian dimusnahkan (objek keadaan agak besar, lebih disukai),
Yang lain adalah untuk mencipta semua objek keadaan pada mulanya dan jangan sekali-kali memusnahkannya (keadaan berubah dengan kerap).
(2) Gunakan mod flyweight untuk berkongsi objek keadaan.

4. Versi JavaScript mesin keadaan

(1) Mewakilkan permintaan secara langsung kepada objek literal untuk dilaksanakan melalui kaedah Function.prototype.call

// 状态机
var FSM = {
  off: {
    buttonWasPressed: function() {
      console.log("关灯");
      this.button.innerHTML = "下一次按我是开灯";   // 这是Light上的属性！！！
      this.currState = FSM.on;            // 这是Light上的属性！！！
    }
  },
  on: {
    buttonWasPressed: function() {
      console.log("开灯");
      this.button.innerHTML = "下一次按我是关灯";
      this.currState = FSM.off;
    }
  },
};

var Light = function() {
  this.currState = FSM.off;  // 设置当前状态
  this.button = null;
};

Light.prototype.init = function() {
  var button = document.createElement("button");
  self = this;

  button.innerHTML = "已关灯";
  this.button = document.body.appendChild(button);
  this.button.onclick = function() {
    // 请求委托给FSM状态机
    self.currState.buttonWasPressed.call(self);
  }

}

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

(2) Gunakan fungsi perwakilan

var delegate = function(client, delegation) {
  return {
    buttonWasPressed: function() {
      return delegation.buttonWasPressed.apply(client, arguments);
    }
  };
};

// 状态机
var FSM = {
  off: {
    buttonWasPressed: function() {
      console.log("关灯");
      this.button.innerHTML = "下一次按我是开灯";
      this.currState = this.onState;
    }
  },
  on: {
    buttonWasPressed: function() {
      console.log("开灯");
      this.button.innerHTML = "下一次按我是关灯";
      this.currState = this.offState;
    }
  },
};

var Light = function() {
  this.offState = delegate(this, FSM.off);
  this.onState = delegate(this, FSM.on);
  this.currState = this.offState; // 设置当前状态
  this.button = null;
};

Light.prototype.init = function() {
  var button = document.createElement("button");
  self = this;

  button.innerHTML = "已关灯";
  this.button = document.body.appendChild(button);
  this.button.onclick = function() {
    // 请求委托给FSM状态机
    self.currState.buttonWasPressed();
  }
}

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

Saya harap artikel ini akan membantu semua orang yang mempelajari pengaturcaraan JavaScript.