前端开发设计模式——状态模式
目录
一、状态模式的定义和特点
定义：状态模式允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类。
特点：
将状态的行为封装在独立的状态类中，使得状态的转换更加清晰、可维护。
减少了条件判断语句，使代码更加简洁、易于理解。
实现了状态与行为的解耦，使得状态的变化不会影响到对象的其他部分。
二、状态模式的结构与原理
1.结构：
1.1 状态接口：
定义了一组方法，这些方法代表了对象在不同状态下的行为。
1.2 具体状态类：
实现状态接口，每个具体状态类代表对象的一种特定状态，并实现与该状态相关的行为。
1.3 上下文对象：
拥有一个对当前状态的引用，并将与状态相关的操作委托给当前状态对象。当上下文对象的内部状态发生变化时，它会切换到不同的具体状态类，从而改变其行为。
2.原理：
通过将对象的行为与状态分离，使得对象可以在不同的状态下表现出不同的行为。当对象的状态发生变化时，它会自动切换到相应的状态类，执行该状态下的行为。
三、状态模式的实现方式
步骤：
1.定义状态接口，明确在不同状态下需要实现的方法。
示例：
class State {
handleEvent() {
throw new Error('This method must be overridden.');
}
}2.创建具体状态类，实现状态接口，并在每个类中实现特定状态下的行为。
示例：
class StateA extends State {
handleEvent() {
console.log('In State A.');
// 执行状态 A 下的特定行为
}
}
class StateB extends State {
handleEvent() {
console.log('In State B.');
// 执行状态 B 下的特定行为
}
}3.在上下文对象中，维护一个对当前状态的引用，并提供方法来设置和切换状态。上下文对象将与状态相关的操作委托给当前状态对象执行。
示例：
class Context {
constructor() {
this.state = new StateA();
}
setState(state) {
this.state = state;
}
handleEvent() {
this.state.handleEvent();
}
}四、状态模式的使用场景
1.按钮的不同状态：
例如按钮有正常状态、禁用状态、鼠标悬停状态等，每个状态下的行为不同，可以使用状态模式来管理这些状态和行为。
2.页面加载状态：
页面在加载数据时可能处于不同的状态，如正在加载、加载成功、加载失败等，可以使用状态模式来处理不同状态下的显示和交互。
示例：
假设我们正在开发一个新闻资讯类的网页应用。当用户打开页面时，页面需要从服务器获取新闻数据并展示给用户。在这个过程中，页面会经历不同的状态：
（1）正在加载状态：页面刚打开时，显示一个加载动画，告知用户数据正在加载中。此时可以创建一个 “加载中” 的状态类，比如：
class LoadingState {
show() {
document.getElementById('content').innerHTML = '<div class="loader">Loading...</div>';
}
}（2）加载成功状态：当数据成功从服务器返回并渲染到页面上时，显示新闻列表。创建一个 “加载成功” 的状态类
class SuccessState {
show(data) {
let html = '';
data.forEach(item => {
html += `<div>${item.title}</div>`;
});
document.getElementById('content').innerHTML = html;
}
}（3）加载失败状态：如果数据加载过程中出现错误，显示错误提示信息。对应的状态类如下：
class ErrorState {
show() {
document.getElementById('content').innerHTML = '<div class="error">Failed to load data.</div>';
}
}然后创建一个上下文对象来管理这些状态：
class PageStateContext {
constructor() {
this.state = new LoadingState();
}
setState(state) {
this.state = state;
}
show() {
this.state.show();
}
}在实际使用中，可以根据不同的情况切换状态：
const context = new PageStateContext();
// 模拟数据加载
setTimeout(() => {
const isSuccess = Math.random() > 0.5;
if (isSuccess) {
const data = [
{ title: 'News 1' },
{ title: 'News 2' }
];
context.setState(new SuccessState());
context.show(data);
} else {
context.setState(new ErrorState());
context.show();
}
}, 2000);3.用户登录状态：
用户在未登录、登录中、已登录等状态下，页面的显示和功能会有所不同，可以使用状态模式来管理这些状态。
示例：
在一个社交类的前端应用中，用户的登录状态会影响页面的显示和功能。可以使用状态模式来管理用户的登录状态：
（1）未登录状态：显示登录按钮和注册链接。状态类如下：
class NotLoggedInState {
show() {
document.getElementById('userArea').innerHTML = '<button>Login</button><a href="#">Register</a>';
}
} （2） 登录中状态：显示加载动画，提示用户正在登录。状态类为：
class LoggingInState {
show() {
document.getElementById('userArea').innerHTML = '<div class="loader">Logging in...</div>';
}
}（3） 已登录状态：显示用户头像和用户名，以及退出登录按钮。状态类如下：
class LoggedInState {
show(user) {
document.getElementById('userArea').innerHTML = `<img src="${user.avatar}" alt="Avatar"><span>${user.username}</span><button>Logout</button>`;
}
}创建上下文对象来管理这些状态：
class UserStateContext {
constructor() {
this.state = new NotLoggedInState();
}
setState(state) {
this.state = state;
}
show() {
this.state.show();
}
}在实际应用中，可以根据用户的操作切换状态：
const context = new UserStateContext();
// 模拟用户点击登录按钮
document.getElementById('loginButton').addEventListener('click', () => {
context.setState(new LoggingInState());
context.show();
// 模拟登录成功
setTimeout(() => {
const user = { username: 'John', avatar: 'avatar.jpg' };
context.setState(new LoggedInState());
context.show(user);
}, 2000);
});
// 模拟用户点击退出登录按钮
document.getElementById('logoutButton').addEventListener('click', () => {
context.setState(new NotLoggedInState());
context.show();
});五、状态模式的优点
1.提高代码的可维护性：
状态和行为的分离使得代码更加清晰，易于修改和扩展。
2.增强代码的可读性：
通过将状态的行为封装在独立的类中，使得代码的逻辑更加清晰，易于理解。
3.更好的处理动态变化：
可以轻松地添加新的状态和行为，适应不断变化的需求。
六、状态模式的缺点
1.增加了代码的复杂性：
引入了更多的类和对象，可能会使代码结构变得更加复杂。
2.可能会增加内存占用：
每个状态都需要一个具体的状态类实例，可能会占用更多的内存。
七、状态模式的注意事项
1.状态的划分要合理：
根据实际需求合理划分状态，避免状态过多或过少。
2.状态的转换要清晰：
确保状态之间的转换逻辑清晰，避免出现混乱的状态转换。
3.注意性能问题：
如果状态的切换非常频繁，可能会影响性能，可以考虑优化状态的管理方式。
关于状态模式的介绍就到此结束，如果对于其他设计模式感兴趣的话，可以看看下方的专栏目录，里面有其他设计模式的文章。码字不易，点个赞再走吧
原文地址：https://blog.csdn.net/jxnd123456/article/details/142935533
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！