Mode status
Mode status memungkinkan suatu objek untuk mengubah perilakunya ketika keadaan internalnya berubah, dan objek tampaknya memodifikasi kelasnya.
Skenario penggunaan mode status juga sangat jelas, dengan dua poin berikut:
1. Perilaku suatu objek tergantung pada keadaannya, dan ia harus mengubah perilakunya sesuai dengan keadaannya pada waktu berjalan. (Beberapa objek biasanya memiliki beberapa negara bagian, di setiap negara bagian, Anda hanya dapat melakukan apa yang dapat dilakukan oleh keadaan saat ini, tetapi tidak apa yang dapat dilakukan oleh negara lain)
2. Suatu operasi berisi sejumlah besar pernyataan cabang, dan pernyataan cabang ini tergantung pada keadaan objek. Negara biasanya merupakan representasi dari satu atau lebih konstanta enumerasi.
1. Mesin negara yang terbatas
1. Jumlah total negara (negara) terbatas.
2. Setiap saat, Anda hanya dalam satu negara.
3. Dalam kondisi tertentu, itu akan beralih dari satu negara ke negara lain.
Praktik Umum: Merangkum negara ke dalam kelas independen (mesin negara) dan mendelegasikan permintaan ke objek negara saat ini. Ketika keadaan internal objek berubah, itu akan menyebabkan perubahan perilaku yang berbeda.
2. Poin Optimalisasi Kinerja
1. Bagaimana mengelola penciptaan dan penghancuran benda -benda negara? Yang pertama adalah membuat dan kemudian menghancurkan objek negara hanya ketika diperlukan (objek negara bagian besar, lebih disukai), dan yang lainnya adalah membuat semua objek negara sejak awal dan tidak pernah menghancurkannya (sering berubah keadaan).
2. Gunakan mode nikmati yuan untuk berbagi objek negara.
Untuk memberikan contoh yang sedikit kompleks, saya percaya semua orang telah memainkan permainan peran, dan karakter di dalamnya memiliki banyak negara (stasiun, berjalan, berlari, melompat, jongkok, dll.). Pergantian antara berbagai negara ditentukan, dan mereka hanya dapat berada dalam satu keadaan kapan saja. Di setiap negara bagian, karakter hanya dapat melakukan perilaku yang diizinkan dalam keadaan saat ini (seperti: serangan biasa, berbagai serangan keterampilan, pertahanan, dll.)
Berikut adalah contoh bola bergerak yang saya tulis:
<! Doctype html> <html lang = "en"> <Head> <meta charset = "utf-8"> <itement> </iteme> <script> window.onload = function () {var fsm = {show1: {clickbtn: function (key) {change.call (ini, key); }}, show2: {clickbtn: function (key) {ubah.call (ini, key); }}, show3: {clickbtn: function (key) {ubah.call (ini, key); }}, show4: {clickbtn: function (key) {ubah.call (ini, 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, kunci); }}; function change (key) {var styles = window.getComputedstyle (this.div), parentStyles = window.getComputedStyle (this.div.parentnode), top = parseInt (styles.top), kiri = parseInt (styles.left); if (key === 40) {top += (top +parseInt (styles.height)) <parseInt (parseStyles.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) {kiri -= (kiri> 0? 10: 0); this.div.style.left = kiri+'px'; this.curentState = fsm.show1; } if (key === 39) {this.curentState = fsm.show2; Kiri += (kiri +parseInt (Styles.width)) <parseInt (Parentstyles.width)? 10: 0; this.div.style.left = kiri+'px'; }} var a = new bola (); A.init (); } </script> <tyle> #div {position: absolute; Lebar: 80%; Tinggi: 80%; TOP: 0; Bawah: 0; Kiri: 0; Kanan: 0; margin: otomatis; Perbatasan: 1px solid darkcyan; } #go {position: absolute; Lebar: 50px; Tinggi: 50px; Kiri: 10px; Atas: 20px; Perbatasan: 1px Solid Grey; -webkit-border-radius: 50px; -Moz-border-radius: 50px; Border-Radius: 50px; Latar Belakang-Image: Radial-Gradient (Circle, White 5%, Black 100%); } </tyle> </head> <body> <Div id = "Div"> Tekan tombol panah untuk memindahkan kuadrat <div id = "go"> </div> </div> </body> </html>3. Versi Javascript dari Mesin Negara (mengambil lampu sakelar sederhana sebagai contoh)
1. Langsung mendelegasikan permintaan ke objek literal melalui metode function.prototype.call untuk dieksekusi
// state machine var fsm = {off: {buttonWaspressed: function () {console.log ("downlight"); this.button.innerhtml = "Penekanan selanjutnya saya menyalakan lampu"; // Ini adalah properti yang ringan! Lai Lai this.currstate = fsm.on; // Ini adalah properti yang ringan! Lai Lai }}, on: {ButtonWasPressed: function () {console.log ("Light on"); this.button.innerhtml = "Penekanan selanjutnya aku mematikan lampu"; this.currstate = fsm.off; }},}; var light = function () {this.currstate = fsm.off; // atur status saat ini ini.button = null;}; Light.prototype.init = function () {var button = document.createElement ("tombol"); diri = ini; Button.innerHtml = "Light Off"; this.button = document.body.appendChild (tombol); this.button.onClick = function () {// Permintaan untuk mendelegasikan ke fsm state machine self.currstate.buttonwaspressed.call (self); }} var light = new light (); light.init ();2.Gunakan fungsi delegasi
var delegate = function (klien, delegasi) {return {ButtonWaspressed: function () {return delegation.buttonwaspressed.apply (klien, argumen); }};}; // state machine var fsm = {off: {buttonWaspressed: function () {console.log ("off"); this.button.innerhtml = "Penekanan selanjutnya saya menyalakan lampu"; this.currstate = this.onstate; }}, on: {ButtonWaspressed: function () {console.log ("on the light"); this.button.innerhtml = "Penekanan selanjutnya, saya mematikan lampu"; this.currstate = this.offstate; }},}; var light = function () {this.offState = delegate (this, fsm.off); this.onsstate = delegasi (ini, fsm.on); this.currstate = this.offstate; // atur status saat ini ini.button = null;}; Light.prototype.init = function () {var button = document.createElement ("tombol"); diri = ini; Button.innerHtml = "Light Off"; this.button = document.body.appendChild (tombol); this.button.onClick = function () {// Permintaan untuk mendelegasikan ke fsm state machine self.currstate.buttonwaspressed (); }} var light = new light (); light.init ();Mode dan mode kebijakan negara sangat mirip. Mereka berdua merangkum serangkaian algoritma atau perilaku. Mereka semua memiliki objek konteks untuk mendelegasikan permintaan ke kelas yang dienkapsulasi (kelas kebijakan, mesin negara), tetapi niat mereka berbeda:
1. Berbagai atribut kelas kebijakan sama -sama paralel, dan tidak ada hubungan di antara mereka.
2. Ada peralihan timbal balik antara berbagai negara dalam mesin negara dan ditentukan.
Referensi: "pola javascript" "pola desain javascript dan praktik pengembangan"
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.