โหมดสถานะ
โหมดสถานะอนุญาตให้วัตถุเปลี่ยนพฤติกรรมเมื่อสถานะภายในเปลี่ยนแปลงและวัตถุจะปรากฏขึ้นเพื่อปรับเปลี่ยนคลาส
สถานการณ์การใช้งานของโหมดสถานะก็ชัดเจนเป็นพิเศษด้วยสองจุดต่อไปนี้:
1. พฤติกรรมของวัตถุขึ้นอยู่กับสถานะของมันและจะต้องเปลี่ยนพฤติกรรมตามสถานะของมันในเวลาทำงาน (วัตถุบางอย่างมักจะมีหลายรัฐในแต่ละรัฐคุณสามารถทำสิ่งที่สถานะปัจจุบันสามารถทำได้ แต่ไม่ใช่สิ่งที่รัฐอื่นสามารถทำได้)
2. การดำเนินการมีงบสาขาจำนวนมากและงบสาขาเหล่านี้ขึ้นอยู่กับสถานะของวัตถุ รัฐมักจะเป็นตัวแทนของค่าคงที่การแจงนับหนึ่งหรือมากกว่า
1.
1. จำนวนรัฐทั้งหมด (รัฐ) มี จำกัด
2. ได้ตลอดเวลาคุณอยู่ในรัฐเดียวเท่านั้น
3. ภายใต้เงื่อนไขบางประการมันจะเปลี่ยนจากรัฐหนึ่งไปอีกรัฐหนึ่ง
การปฏิบัติทั่วไป: ห่อหุ้มสถานะลงในคลาสอิสระ (เครื่องรัฐ) และมอบหมายคำขอไปยังวัตถุสถานะปัจจุบัน เมื่อสถานะภายในของวัตถุเปลี่ยนไปมันจะทำให้เกิดการเปลี่ยนแปลงพฤติกรรมที่แตกต่างกัน
2. จุดเพิ่มประสิทธิภาพประสิทธิภาพ
1. จะจัดการการสร้างและทำลายวัตถุของรัฐได้อย่างไร? สิ่งแรกคือการสร้างและทำลายวัตถุของรัฐเฉพาะเมื่อจำเป็น (วัตถุสถานะมีขนาดใหญ่มากต้องการ) และอีกอันคือการสร้างวัตถุสถานะทั้งหมดตั้งแต่ต้นและไม่ทำลายพวกเขา (การเปลี่ยนแปลงของรัฐบ่อยครั้ง)
2. ใช้โหมดสนุกเพื่อแชร์วัตถุสถานะ
เพื่อให้ตัวอย่างที่ซับซ้อนเล็กน้อยฉันเชื่อว่าทุกคนได้เล่นเกมสวมบทบาทและตัวละครในนั้นมีหลายรัฐ (สถานีเดินวิ่งวิ่งกระโดดนั่งยอง ฯลฯ ) มีการระบุการสลับระหว่างรัฐต่างๆและสามารถอยู่ในสถานะเดียวได้ตลอดเวลา ในแต่ละรัฐตัวละครสามารถดำเนินการพฤติกรรมที่อนุญาตในสถานะปัจจุบัน (เช่น: การโจมตีทั่วไปการโจมตีทักษะต่าง ๆ การป้องกัน ฯลฯ )
นี่คือตัวอย่างของลูกบอลเคลื่อนที่ที่ฉันเขียน:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <tite> <title> <title> <title> <title> }}, show2: {clickbtn: ฟังก์ชั่น (คีย์) {change.call (นี่, คีย์); }}, show3: {clickbtn: ฟังก์ชั่น (คีย์) {change.call (นี่, คีย์); }}, show4: {clickbtn: ฟังก์ชั่น (คีย์) {change.call (นี่, คีย์); - 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 = ฟังก์ชั่น (เหตุการณ์) {var key = event.keycode; self.curentstate.clickbtn.call (ตัวเอง, คีย์); - การเปลี่ยนแปลงฟังก์ชั่น (คีย์) {var styles = window.getComputedStyle (this.div), parentstyles = window.getComputedStyle (this.div.parentNode), top = parseInt (styles.top), ซ้าย = 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 = ซ้าย+'px'; this.curentstate = fsm.show1; } if (key === 39) {this.curentstate = fsm.show2; ซ้าย += (ซ้าย +parseint (styles.width)) <parseint (parentstyles.width)? 10: 0; this.div.style.left = ซ้าย+'px'; }} var a = ลูกใหม่ (); a.init (); } </script> <style> #DIV {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 80%; ความสูง: 80%; ด้านบน: 0; ด้านล่าง: 0; ซ้าย: 0; ขวา: 0; มาร์จิ้น: อัตโนมัติ; ชายแดน: 1px Darkcyan แข็ง; } #go {ตำแหน่ง: สัมบูรณ์; ความกว้าง: 50px; ความสูง: 50px; ซ้าย: 10px; ด้านบน: 20px; เส้นขอบ: 1px ของแข็งสีเทา; -webkit-Border-Radius: 50px; -MOZ-Border-Radius: 50px; แนวชายแดน: 50px; ภาพพื้นหลัง: เรเดียล-กราด (วงกลม, สีขาว 5%, ดำ 100%); } </style> </head> <body> <div id = "div"> กดปุ่มลูกศรเพื่อย้าย square <div id = "go"> </div> </div> </body> </html>3. JavaScript เวอร์ชันของเครื่องจักร (ใช้ไฟสวิตช์ง่าย ๆ เป็นตัวอย่าง)
1. มอบหมายคำขอโดยตรงไปยังวัตถุที่แท้จริงผ่านฟังก์ชันวิธีการเรียกร้องให้ดำเนินการเพื่อดำเนินการ
// สถานะเครื่อง var fsm = {ปิด: {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.createElement ("ปุ่ม"); self = this; button.innerhtml = "ไฟปิด"; this.button = document.body.appendchild (ปุ่ม); this.button.onclick = function () {// คำขอเพื่อมอบหมายไปยังเครื่อง FSM State Self.currstate.buttonwaspressed.call (self); }} var light = light ใหม่ (); light.init ();2. ใช้ฟังก์ชั่นตัวแทน
var delegate = function (ไคลเอนต์, การมอบหมาย) {return {buttonwaspressed: function () {return delegation.buttonwaspressed.apply (ไคลเอนต์, อาร์กิวเมนต์); - // สถานะเครื่อง var fsm = {ปิด: {buttonwaspressed: function () {console.log ("ปิด"); 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 = มอบหมาย (this, fsm.off); this.onstate = มอบหมาย (นี่, fsm.on); this.currstate = this.offState; // ตั้งค่าสถานะปัจจุบัน this.button = null;}; Light.prototype.init = function () {var button = document.createElement ("ปุ่ม"); self = this; button.innerhtml = "ไฟปิด"; this.button = document.body.appendchild (ปุ่ม); this.button.onclick = function () {// คำขอเพื่อมอบหมายให้เครื่อง FSM STATE Self.currstate.buttonwaspressed (); }} var light = new Light (); Light.init ();โหมดรัฐและโหมดนโยบายมีความคล้ายคลึงกันมาก พวกเขาทั้งสองห่อหุ้มชุดอัลกอริทึมหรือพฤติกรรม พวกเขาทั้งหมดมีวัตถุบริบทเพื่อมอบหมายคำขอให้กับคลาสที่ห่อหุ้ม (คลาสนโยบาย, เครื่องจักรของรัฐ) แต่ความตั้งใจของพวกเขาแตกต่างกัน:
1. คุณลักษณะต่าง ๆ ของคลาสนโยบายมีขนานกันอย่างเท่าเทียมกันและไม่มีการเชื่อมต่อระหว่างพวกเขา
2. มีการสลับกันระหว่างสถานะต่าง ๆ ในเครื่องรัฐและมีการระบุ
ข้อมูลอ้างอิง: "JavaScript Pattern" "JavaScript Design Pattern and Development Practice"
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น