ステータスモード
状態モードにより、オブジェクトは内部状態が変更されたときに動作を変更でき、オブジェクトはクラスを変更するように見えます。
ステータスモードの使用シナリオも特に明確で、次の2つのポイントがあります。
1.オブジェクトの動作はその状態に依存し、実行時にその状態に応じてその動作を変更する必要があります。 （通常、一部のオブジェクトにはいくつかの状態があります。各状態では、現在の状態ができることのみを行うことができますが、他の州でできることはできません）
2.操作には多数のブランチステートメントが含まれており、これらのブランチステートメントはオブジェクトの状態に依存します。状態は通常、1つ以上の列挙定数の表現です。
1。有限状態マシン
1.州の総数（州）は限られています。
2。いつでも、あなたは1つの状態にすぎません。
3。特定の条件下では、ある状態から別の状態に移行します。
一般的な慣行：状態を独立したクラス（状態マシン）にカプセル化し、リクエストを現在の状態オブジェクトに委任します。オブジェクトの内部状態が変更されると、異なる動作が変化します。
2。パフォーマンスの最適化ポイント
1.状態オブジェクトの作成と破壊を管理する方法は？ 1つ目は、必要な場合にのみ状態オブジェクトを作成して破壊することです（状態オブジェクトは巨大で好まれています）、もう1つは最初からすべての状態オブジェクトを作成し、それらを破壊しないことです（状態は頻繁に変化します）。
2。元のオブジェクトを共有するには、Yuanモードをお楽しみください。
わずかに複雑な例を挙げると、誰もがロールプレイゲームをプレイしていると思います。その中のキャラクターには多くの状態（駅、ウォーキング、ランニング、ジャンプ、スクワットなど）があります。さまざまな状態間の切り替えが指定されており、それらはいつでも1つの状態にあることができます。各州では、キャラクターは現在の状態で許可された行動のみを実行できます（通常の攻撃、さまざまなスキル攻撃、防御など）
これが私が書いた動くボールの例です：
<！doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script> window.onload = function（）{var fsm = {show1：{clickbtn：function（key）{change.call（this、key）; }}、show2：{clickbtn：function（key）{change.call（this、key）; }}、show3：{clickbtn：function（key）{change.call（this、key）; }}、show4：{clickbtn：function（key）{change.call（this、key）; }}}}; var ball = function（）{this.curentstate = fsm.show1; this.div = null; }; ball.prototype.init = function（）{var self = this; this.div = document.getElementById（ 'go'）; document.body.onkeydown = function（event）{var key = event.keycode; self.curentstate.clickbtn.call（self、key）; }};関数の変化（key）{var styles = window.getComputedStyle（this.div）、parentStyles = window.getcomputedStyle（this.div.parentnode）、top = parseint（styles.top）、left = parseint（styles.left）; if（key === 40）{top +=（top +parseint（styles.height））<parseint（parentstyles.height）？ 10：0; this.div.style.top = top+'px'; this.currentstate = fsm.show3; } if（key === 38）{top =（top> 0？10：0）; this.div.style.top = top+'px'; this.curentstate = fsm.show4; } if（key === 37）{左 - =（左> 0？10：0）; this.div.style.left = left+'px'; this.curentState = fsm.show1; } if（key === 39）{this.curentState = fsm.show2;左 +=（左 +parseint（styles.width））<parseint（parentstyles.width）？ 10：0; this.div.style.left = left+'px'; }} var a = new ball（）; a.init（）; } </script> <style> #div {position：absolute;幅：80％;高さ：80％;上：0;下：0;左：0;右：0;マージン：自動;国境：1px Solid Darkcyan; } #go {position：absolute;幅：50px;高さ：50px;左：10px;トップ：20px;ボーダー：1pxソリッドグレー; -webkit-border-radius：50px; -moz-border-radius：50px;ボーダーラジウス：50px;背景画像：radial骨勾配（円、白い5％、黒100％）; } </style> </head> <body> <div id = "div">矢印キーを押して正方形を移動します<div id = "go"> </div> </div> </body> </html>3.ステートマシンのJavaScriptバージョン（単純なスイッチライトを例にとる）
1. function.prototype.callメソッドを使用して、リクエストをリテラルオブジェクトに直接委任して実行します
// State Machine var fsm = {off：{buttonwaspressed：function（）{console.log（ "downlight"）; this.button.innerhtml = "次に押して、光をオンにします"; //これは光のプロパティです！ ！ ！ this.currstate = fsm.on; //これは光のプロパティです！ ！ ！ }}、on：{buttonwaspressed：function（）{console.log（ "light on"）; this.button.innerhtml = "次に押して、私は光をオフにします"; this.currstate = fsm.off; }}、}; var light = function（）{this.currstate = fsm.off; //現在の状態this.button = null;}; light.prototype.init = function（）{var button = document.createelment（ "button"）; self = this; button.innerhtml = "light off"; this.button = document.body.appendChild（ボタン）; this.button.onclick = function（）{// fsm state machine self.currstate.buttonwaspressed.call（self）; }} var light = new light（）; light.init（）;2.デリゲート機能を使用します
var Delegate = function（client、dederigation）{return {buttonwaspressed：function（）{return delegation.buttonwaspress.apply（client、arguments）; }};}; // State Machine var fsm = {off：{buttonwaspressed：function（）{console.log（ "off"）; this.button.innerhtml = "次に押して、光をオンにします"; this.currstate = this.onstate; }}、on：{buttonwaspressed：function（）{console.log（ "on the light"）; 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.createelment（ "button"）; self = this; button.innerhtml = "light off"; this.button = document.body.appendChild（ボタン）; this.button.onclick = function（）{// fsm state machine self.currstate.buttonwaspressed（）; }} var light = new light（）; light.init（）;状態モードとポリシーモードは非常に似ています。どちらも、一連のアルゴリズムまたは動作をカプセル化します。それらはすべて、カプセル化されたクラス（ポリシークラス、州のマシン）にリクエストを委任するためのコンテキストオブジェクトを持っていますが、その意図は異なります。
1.ポリシークラスのさまざまな属性も同様に並行しており、それらの間には関係がありません。
2。州のマシンのさまざまな状態間の相互の切り替えがあり、指定されています。
参照： 「JavaScriptパターン」「JavaScriptのデザインパターンと開発の実践」
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。