وضع الحالة
يتيح وضع الحالة للكائن تغيير سلوكه عندما يتغير حالته الداخلية ، ويبدو أن الكائن يعدل فئته.
سيناريوهات الاستخدام لوضع الحالة واضحة أيضًا بشكل خاص ، مع النقطتين التاليتين:
1. يعتمد سلوك كائن ما على حالته ، ويجب أن يغير سلوكه وفقًا لحالته في وقت التشغيل. (عادة ما يكون لبعض الكائنات عدة حالات ، في كل ولاية ، يمكنك فقط فعل ما يمكن أن تفعله الحالة الحالية ، ولكن ليس ما يمكن أن تفعله الدول الأخرى)
2. تحتوي العملية على عدد كبير من عبارات الفرع ، وتعتمد هذه العبارات الفرعية على حالة الكائن. عادة ما تكون الدولة تمثيلًا لثوابت تعداد واحدة أو أكثر.
1. آلة الحالة المحدودة
1. إجمالي عدد الحالات (الدولة) محدود.
2. في أي لحظة ، أنت فقط في ولاية واحدة.
3. في ظل ظروف معينة ، سوف ينتقل من ولاية إلى أخرى.
الممارسة الشائعة: قم بتغليف الحالة في فئة مستقلة (آلة الولاية) وتفويض الطلب إلى كائن الحالة الحالية. عندما تتغير الحالة الداخلية للكائن ، فإنها ستتسبب في تغييرات سلوك مختلفة.
2. نقاط تحسين الأداء
1. كيفية إدارة خلق وتدمير كائنات الدولة؟ الأول هو إنشاء كائنات الحالة ثم تدميرها فقط عند الحاجة (كائنات الدولة ضخمة ، مفضلة) ، والآخر هو إنشاء جميع كائنات الحالة من البداية ولا تدمرها أبدًا (تتغير الدولة بشكل متكرر).
2. استخدم وضع الاستمتاع باليوان لمشاركة كائن الدولة.
لإعطاء مثال معقد بعض الشيء ، أعتقد أن الجميع لعبوا ألعاب لعب الأدوار ، والشخصيات الموجودة فيها بها العديد من الولايات (المحطة ، المشي ، الجري ، القفز ، القرفصاء ، إلخ). تم تحديد التحول بين الحالات المختلفة ، ويمكن أن يكون فقط في ولاية واحدة في أي وقت. في كل ولاية ، لا يمكن للشخصيات القيام بالسلوكيات المسموح بها إلا في الحالة الحالية (مثل: الهجمات العادية ، وهجمات المهارات المختلفة ، والدفاعات ، وما إلى ذلك)
فيما يلي مثال على الكرة المتحركة التي كتبتها:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </itlect> <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.Ondy.onkeydown = function (event) {var key = event.keycode ؛ self.curentState.clickbtn.call (الذات ، المفتاح) ؛ }} ؛ تغيير الوظيفة (مفتاح) {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) {left -= (left> 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 {الموضع: Absolute ؛ العرض: 80 ٪ ؛ الارتفاع: 80 ٪ ؛ أعلى: 0 ؛ أسفل: 0 ؛ اليسار: 0 ؛ اليمين: 0 ؛ الهامش: السيارات ؛ الحدود: 1 بكسل Solid Darkcyan ؛ } #go {الموضع: absolute ؛ العرض: 50 بكسل ؛ الارتفاع: 50 بكسل ؛ اليسار: 10 بكسل ؛ أعلى: 20 بكسل ؛ الحدود: 1 بكسل رمادي صلب. -webkit-border-Radius: 50px ؛ -Moz-Border-Radius: 50px ؛ الحدود الراديوس: 50 بكسل ؛ صورة الخلفية: الدرجات الشعاعية (الدائرة ، الأبيض 5 ٪ ، أسود 100 ٪) ؛ } </style> </head> <body> <div id = "div"> اضغط على مفتاح السهم لتحريك المربع <div id = "go"> </viv> </viv> </body> </html>3. إصدار JavaScript من آلة الحالة (أخذ مصابيح التبديل البسيطة كمثال)
1. قم بتفويض الطلب مباشرة إلى كائن حرفي من خلال طريقة type.prototype.call للتنفيذ
// state machine var fsm = {Off: {buttonwaspression: function () {console.log ("downlight") ؛ هذا. // هذه خاصية على الضوء! ! ! this.currstate = fsm.on ؛ // هذا هو الخاصية على الضوء! ! ! }} ، on: {buttonwaspression: function () {console.log ("Light on") ؛ هذا. this.currstate = fsm.off ؛ }} ،} ؛ var light = function () {this.currstate = fsm.off ؛ // اضبط الحالة الحالية this.button = null ؛} ؛ Light.prototype.init = function () {var button = document.createElement ("button") ؛ الذات = هذا ؛ button.innerhtml = "Light Off" ؛ this.button = document.body.appendChild (button) ؛ هذا. }} var light = new light () ؛ light.init () ؛2. استخدم وظيفة المندوب
var depegate = function (client ، devation) {return {buttonwaspression: function () {return delegation.buttonwaspression.apply (client ، ediuments) ؛ }} ؛} ؛ // state machine var fsm = {OFF: {buttonwaspression: function () {console.log ("OFF") ؛ هذا. this.currstate = this.onstate ؛ }} ، on: {buttonwaspression: function () {console.log ("on the light") ؛ هذا. this.currstate = this.offstate ؛ }} ،} ؛ var light = function () {this.offState = depigate (this ، fsm.off) ؛ this.onstate = مندوب (هذا ، fsm.on) ؛ this.currstate = this.offstate ؛ // اضبط الحالة الحالية this.button = null ؛} ؛ Light.prototype.init = function () {var button = document.createElement ("button") ؛ الذات = هذا ؛ button.innerhtml = "Light Off" ؛ this.button = document.body.appendChild (button) ؛ this.button.onclick = function () {// request للتفويض إلى آلة FSM Self.currstate.buttonwaspression () ؛ }} var light = new light () ؛ light.init () ؛أوضاع الدولة وأنماط السياسة متشابهة للغاية. كلاهما يتغلف سلسلة من الخوارزميات أو السلوكيات. لديهم جميعًا كائن سياق لتفويض الطلبات إلى الفئات المغطاة (فئات السياسة ، وآلات الحالة) ، لكن نواياها مختلفة:
1. السمات المختلفة لفئة السياسة متوازية بنفس القدر ، ولا يوجد صلة بينهما.
2. هناك تبديل متبادل بين الحالات المختلفة في آلة الحالة ويتم تحديده.
المراجع: "نمط جافا سكريبت" "نمط تصميم جافا سكريبت وممارسة التطوير"
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.