พูดง่ายๆคือมีสามลักษณะ:
การคัดลอกรหัสมีดังนี้:
* จำนวนรัฐทั้งหมด (รัฐ) มี จำกัด
* ได้ทุกเวลาคุณอยู่ในรัฐเดียวเท่านั้น
* ภายใต้เงื่อนไขบางประการมันจะเปลี่ยนจากรัฐหนึ่งไปอีกรัฐหนึ่ง
ความหมายของ JavaScript คือวัตถุจำนวนมากสามารถเขียนเป็นเครื่องจักรสถานะ จำกัด
ตัวอย่างเช่นมีองค์ประกอบเมนูบนหน้าเว็บ เมื่อเมาส์โฉบเมนูจะปรากฏขึ้น เมื่อเมาส์ถูกย้ายไปเมนูจะถูกซ่อนไว้ หากคุณใช้คำอธิบายของเครื่อง Finite State เมนูนี้มีเพียงสองสถานะ (แสดงและซ่อน) และเมาส์จะกระตุ้นการเปลี่ยนแปลงของรัฐ
รหัสสามารถเขียนได้ดังนี้:
การคัดลอกรหัสมีดังนี้:
var menu = {
// สถานะปัจจุบัน
CurrentState: 'ซ่อน'
// เหตุการณ์ที่มีผลผูกพัน
เริ่มต้น: function () {
var self = this;
self.on ("โฮเวอร์", self.transition);
-
// การเปลี่ยนสถานะ
การเปลี่ยนแปลง: ฟังก์ชั่น (เหตุการณ์) {
สวิตช์ (this.currentstate) {
กรณี "ซ่อน":
this.currentState = 'show';
Dosomething ();
หยุดพัก;
กรณี "แสดง":
this.currentState = 'ซ่อน';
Dosomething ();
หยุดพัก;
ค่าเริ่มต้น:
console.log ('สถานะไม่ถูกต้อง!');
หยุดพัก;
-
-
-
จะเห็นได้ว่าวิธีการเขียนของเครื่องจักรสถานะ จำกัด มีความชัดเจนในตรรกะและแข็งแกร่งในการแสดงออกซึ่งเอื้อต่อการห่อหุ้มเหตุการณ์ ยิ่งมีรัฐมากเท่าไหร่วัตถุก็ยิ่งมีเหตุการณ์มากขึ้นเท่าไหร่ก็ยิ่งใช้วิธีการเขียนเครื่อง จำกัด สถานะ จำกัด
นอกจากนี้ JavaScript เป็นภาษาที่มีการดำเนินการแบบอะซิงโครนัสจำนวนมาก โซลูชันที่ใช้กันทั่วไปคือการระบุฟังก์ชั่นการโทรกลับ แต่สิ่งนี้จะทำให้เกิดปัญหาเช่นโครงสร้างรหัสที่สับสนยากต่อการทดสอบและการดีบัก เครื่อง Finite State เป็นวิธีที่ดีกว่า: การดำเนินการแบบอะซิงโครนัสด้วยการเปลี่ยนแปลงสถานะของวัตถุ เมื่อการดำเนินการแบบอะซิงโครนัสเสร็จสิ้นการเปลี่ยนแปลงสถานะที่สอดคล้องกันเกิดขึ้นดังนั้นจึงเป็นการกระตุ้นการดำเนินการอื่น ๆ สิ่งนี้มีเหตุผลมากกว่าการแก้ปัญหาของฟังก์ชั่นการโทรกลับการฟังเหตุการณ์เผยแพร่/สมัครสมาชิก ฯลฯ และง่ายต่อการลดความซับซ้อนของรหัส
ต่อไปนี้เป็นไลบรารีเครื่องจักรสถานะ จำกัด JavaScript Finite State Machine ห้องสมุดนี้เข้าใจง่ายมากและสามารถช่วยให้เราเข้าใจลึกซึ้งยิ่งขึ้นและฟังก์ชั่นของมันไม่อ่อนแอเลย
ไลบรารีนี้จัดเตรียม statemachine วัตถุทั่วโลกซึ่งใช้วิธีการสร้างของวัตถุเพื่อสร้างอินสแตนซ์ของเครื่องสถานะ จำกัด
การคัดลอกรหัสมีดังนี้:
var fsm = statemachine.create ();
เมื่อสร้างวัตถุพารามิเตอร์จะต้องมีให้เพื่ออธิบายคุณสมบัติของอินสแตนซ์ ตัวอย่างเช่นสัญญาณไฟจราจร (สัญญาณไฟจราจร) สามารถอธิบายได้ดังนี้:
การคัดลอกรหัสมีดังนี้:
var fsm = statemachine.create ({
เริ่มต้น: 'สีเขียว',
กิจกรรม: [
{ชื่อ: 'เตือน', จาก: 'สีเขียว', ถึง: 'เหลือง'},
{ชื่อ: 'หยุด', จาก: 'เหลือง', ถึง: 'สีแดง'},
{ชื่อ: 'พร้อม' จาก: 'สีแดง' ถึง: 'เหลือง'}
{ชื่อ: 'go', จาก: 'Yellow', ถึง: 'Green'}
-
-
สถานะเริ่มต้นของสัญญาณไฟจราจรเป็นสีเขียว แอตทริบิวต์เหตุการณ์คือเหตุการณ์ต่าง ๆ ที่ก่อให้เกิดการเปลี่ยนแปลงของรัฐเช่นเหตุการณ์เตือนที่ทำให้สถานะสีเขียวกลายเป็นสถานะสีเหลืองเหตุการณ์หยุดทำให้สถานะสีเหลืองกลายเป็นสถานะสีแดง ฯลฯ ฯลฯ
หลังจากสร้างอินสแตนซ์คุณสามารถสืบค้นสถานะปัจจุบันได้ตลอดเวลา
การคัดลอกรหัสมีดังนี้:
* fsm.current: ส่งคืนสถานะปัจจุบัน
* fsm.is (s): ส่งคืนค่าบูลีนระบุว่าสถานะ S เป็นสถานะปัจจุบันหรือไม่
* FSM.CAN (E): ส่งคืนค่าบูลีนระบุว่าเหตุการณ์ E สามารถเรียกใช้ในสถานะปัจจุบันได้หรือไม่
* fsm.cannot (e): ส่งคืนค่าบูลีนที่ระบุว่าเหตุการณ์ E ไม่สามารถถูกทริกเกอร์ในสถานะปัจจุบันได้หรือไม่
เครื่อง JavaScript Finite State อนุญาตให้ระบุฟังก์ชั่นการโทรกลับสองรายการสำหรับแต่ละเหตุการณ์โดยใช้เหตุการณ์เตือนเป็นตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
* OnBeforewarn: เกิดขึ้นก่อนเหตุการณ์เตือนเกิดขึ้น
* onafterwarn (สามารถย่อเป็น onwarn): ถูกกระตุ้นหลังจากเหตุการณ์เตือนเกิดขึ้น
ในขณะเดียวกันก็อนุญาตให้ระบุฟังก์ชั่นการโทรกลับสองรายการสำหรับแต่ละรัฐโดยใช้สถานะสีเขียวเป็นตัวอย่าง:
การคัดลอกรหัสมีดังนี้:
* OnleaveGreen: ทริกเกอร์เมื่อออกจากสถานะสีเขียว
* onentergreen (สามารถย่อเป็น ongreen): ถูกกระตุ้นเมื่อเข้าสู่สถานะสีเขียว
สมมติว่าเหตุการณ์เตือนเปลี่ยนสถานะจากสีเขียวเป็นสีเหลืองฟังก์ชั่นการเรียกกลับสี่ประเภทข้างต้นเกิดขึ้นในลำดับต่อไปนี้: onbeforewarn → onleavegreen → onenteryellow → onafterwarn
นอกเหนือจากการระบุฟังก์ชั่นการโทรกลับสำหรับแต่ละเหตุการณ์และสถานะแยกกันแล้วคุณยังสามารถระบุฟังก์ชั่นการโทรกลับทั่วไปสำหรับเหตุการณ์และสถานะทั้งหมด
การคัดลอกรหัสมีดังนี้:
* onbeforevent: ทริกเกอร์ก่อนเกิดเหตุการณ์ใด ๆ
* Onleavestate: ทริกเกอร์เมื่อออกจากสถานะใด ๆ
* OnEnterstate: ทริกเกอร์เมื่อเข้าสู่สถานะใด ๆ
* onafterevent: ทริกเกอร์หลังจากเหตุการณ์ทั้งสองสิ้นสุดลง
หากมีการดำเนินการแบบอะซิงโครนัสในฟังก์ชั่นการโทรกลับของเหตุการณ์ (เช่นการสื่อสาร AJAX กับเซิร์ฟเวอร์) เราอาจต้องการรอจนกว่าการดำเนินการแบบอะซิงโครนัสจะสิ้นสุดลงก่อนที่สถานะการเปลี่ยนแปลงจะเกิดขึ้น สิ่งนี้ต้องใช้วิธีการเปลี่ยนแปลง
การคัดลอกรหัสมีดังนี้:
fsm.onwarn = function () {
Light.fadeout ('slow', function () {
fsm.transition ();
-
กลับ Statemachine.async;
-
ในฟังก์ชั่นการโทรกลับในรหัสด้านบนมีการดำเนินการแบบอะซิงโครนัส (Light.fadeout) หากคุณไม่ต้องการให้สถานะเปลี่ยนแปลงทันทีคุณต้องปล่อยให้ฟังก์ชั่นการโทรกลับส่งคืนวัตถุ statemachine.async ซึ่งระบุว่าสถานะจะไม่เปลี่ยนแปลงตลอดเวลา รอจนกว่าการดำเนินการแบบอะซิงโครนัสจะเสร็จสมบูรณ์จากนั้นเรียกใช้วิธีการเปลี่ยนแปลงเพื่อให้สถานะเปลี่ยนแปลง
เครื่อง JavaScript Finite State ยังอนุญาตให้ระบุฟังก์ชั่นการจัดการข้อผิดพลาดที่ถูกเรียกใช้โดยอัตโนมัติเมื่อเหตุการณ์ที่เป็นไปไม่ได้ที่จะเกิดขึ้นในสถานะปัจจุบัน
การคัดลอกรหัสมีดังนี้:
var fsm = statemachine.create ({
-
ข้อผิดพลาด: ฟังก์ชั่น (EventName, จาก, to, args, errorcode, errorMessage) {
ส่งคืน 'Event' + EventName + ':' + ErrorMessage;
-
-
-
ตัวอย่างเช่นสถานะปัจจุบันเป็นสีเขียวและในทางทฤษฎีมีเพียงเหตุการณ์เตือนเท่านั้นที่อาจเกิดขึ้นในเวลานี้ หากเหตุการณ์หยุดเกิดขึ้นในเวลานี้ฟังก์ชั่นการจัดการข้อผิดพลาดข้างต้นจะถูกเรียกใช้