在 JavaScript 中将的icode9命令模式与状态模式相结合
作者：互联网
icode9是JavaScript 一种流行的语言，以其灵活性而闻名。正是由于这一点，使得命令模式等模式更容易在我们的应用程序中实现。
当有一种设计模式与状态模式很好地配合时，它可以说是命令模式。
如果你读过我之前一篇关于状态模式的博客文章，你可能会记得这句话：“状态模式确保对象根据应用程序的当前”状态“以可预测、协调的方式运行。
在命令模式中，主要目标是分离两个重要参与者之间的通信：
- 发起方（也称为调用方）
- 处理程序
我们将在本文中将命令模式与状态模式合并在一起。如果您正在学习两者中的任何一个，为了充分利用这篇文章，我给您的最佳建议是确保您在继续命令模式实现之前了解状态模式的流程，以便更好地感受代码的行为如何在功能保持正常的情况下发生巨大变化。
让我们从一个使用状态模式的示例开始，以便我们可以更清晰地看到这一点：
let state = { backgroundColor: 'white', profiles: [] }
let subscribers = []
function notifySubscribers(...args) {
subscribers.forEach((fn) => fn(...args))
}
function setBackgroundColor(color) {
setState((prevState) => ({
...prevState,
backgroundColor: color,
}))
}
function setState(newState) {
let prevState = state
state =
typeof newState === 'function'
? newState(prevState)
: { ...prevState, ...newState }
notifySubscribers(prevState, state)
}
function subscribe(callback) {
subscribers.push(callback)
}
function addProfile(profile) {
setState((prevState) => ({
...prevState,
profiles: prevState.profiles.concat(profile),
}))
}
subscribe(
(function () {
function getColor(length) {
if (length >= 5 && length <= 8) return 'blue' // Average
if (length > 8 && length < 10) return 'orange' // Reaching limit
if (length > 10) return 'red' // Limit reached
return 'white' // Default
}
return (prevState, newState) => {
const prevProfiles = prevState?.profiles || []
const newProfiles = newState?.profiles || []
if (prevProfiles.length !== newProfiles.length) {
setBackgroundColor(getColor(newProfiles.length))
}
}
})(),
)
console.log(state.backgroundColor) // 'white'
addProfile({ id: 0, name: 'george', gender: 'male' })
addProfile({ id: 1, name: 'sally', gender: 'female' })
addProfile({ id: 2, name: 'kelly', gender: 'female' })
console.log(state.backgroundColor) // 'white'
addProfile({ id: 3, name: 'mike', gender: 'male' })
addProfile({ id: 4, name: 'bob', gender: 'male' })
console.log(state.backgroundColor) // 'blue'
addProfile({ id: 5, name: 'kevin', gender: 'male' })
addProfile({ id: 6, name: 'henry', gender: 'male' })
console.log(state.backgroundColor) // 'blue'
addProfile({ name: 'ronald', gender: 'male' })
addProfile({ name: 'chris', gender: 'male' })
addProfile({ name: 'andy', gender: 'male' })
addProfile({ name: 'luke', gender: 'male' })
console.log(state.backgroundColor) // 'red'
在上面的例子中，我们有aandobject。该对象包含回调函数的集合。