溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“JavaScript設計模式之命令模式和狀態模式怎么實現”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
命令模式(Command)的定義是：用于將一個請求封裝成一個對象，從而使你可用不同的請求對客戶進行參數化；對請求排隊或者記錄請求日志，以及執行可撤銷的操作。
也就是說改模式旨在將函數的調用、請求和操作封裝成一個單一的對象，然后對這個對象進行一系列的處理。此外，可以通過調用實現具體函數的對象來解耦命令對象與接收對象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cmd-demo</title>
</head>
<body>
<div>
<button id="btn1">按鈕1</button>
<button id="btn2">按鈕2</button>
</div>
<script>
var btn1 = document.getElementById('btn1')
var btn2 = document.getElementById('btn2')
// 定義一個命令發布者(執行者)的類
class Executor {
setCommand(btn, command) {
btn.onclick = function() {
command.execute()
}
}
}
// 定義一個命令接收者
class Menu {
refresh() {
console.log('刷新菜單')
}
addSubMenu() {
console.log('增加子菜單')
}
}
// 定義一個刷新菜單的命令對象的類
class RefreshMenu {
constructor(receiver) {
// 命令對象與接收者關聯
this.receiver = receiver
}
// 暴露出統一的接口給命令發布者Executor
execute() {
this.receiver.refresh()
}
}
// 定義一個增加子菜單的命令對象的類
class AddSubMenu {
constructor(receiver) {
// 命令對象與接收者關聯
this.receiver = receiver
}
// 暴露出統一的接口給命令發布者Executor
execute() {
this.receiver.addSubMenu()
}
}
var menu = new Menu()
var executor = new Executor()
var refreshMenu = new RefreshMenu(menu)
// 給按鈕1添加刷新功能
executor.setCommand(btn1, refreshMenu)
var addSubMenu = new AddSubMenu(menu)
// 給按鈕2添加增加子菜單功能
executor.setCommand(btn2, addSubMenu)
</script>
</body>
</html>狀態模式（State）允許一個對象在其內部狀態改變的時候改變它的行為，對象看起來似乎修改了它的類。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state-demo</title>
</head>
<body>
<button id="btn">開關</button>
<script>
// 定義一個關閉狀態的類
class OffLightState {
constructor(light) {
this.light = light
}
// 每個類都需要這個方法，在不同狀態下按都需要觸發這個方法
pressBtn() {
this.light.setState(this.light.weekLightState)
console.log('開啟弱光')
}
}
// 定義一個弱光狀態的類
class WeekLightState {
constructor(light) {
this.light = light
}
pressBtn() {
this.light.setState(this.light.strongLightState)
console.log('開啟強光')
}
}
// 定義一個強光狀態的類
class StrongLightState {
constructor(light) {
this.light = light
}
pressBtn() {
this.light.setState(this.light.offLightState)
console.log('關閉電燈')
}
}
class Light {
constructor() {
this.offLightState = new OffLightState(this)
this.weekLightState = new WeekLightState(this)
this.strongLightState = new StrongLightState(this)
this.currentState = null
}
setState(newState) {
this.currentState = newState
}
init() {
this.currentState = this.offLightState
}
}
let light = new Light()
light.init()
var btn = document.getElementById('btn')
btn.onclick = function() {
light.currentState.pressBtn()
}
</script>
</body>
</html>通過定義不同的狀態類，根據狀態的改變而改變對象的行為，
不必把大量的邏輯都寫在被操作對象的類中，而且容易增加新的狀態
符合開放封閉原則
“JavaScript設計模式之命令模式和狀態模式怎么實現”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
