前端开发设计模式——状态模式

目录

一、状态模式的定义和特点

二、状态模式的结构与原理

1.结构：

2.原理：

三、状态模式的实现方式

四、状态模式的使用场景

1.按钮的不同状态：

2.页面加载状态：

3.用户登录状态：

五、状态模式的优点

1.提高代码的可维护性：

2.增强代码的可读性：

3.更好的处理动态变化：

六、状态模式的缺点

1.增加了代码的复杂性：

2.可能会增加内存占用：

七、状态模式的注意事项

1.状态的划分要合理：

2.状态的转换要清晰：

3.注意性能问题：

---

一、状态模式的定义和特点

        定义：状态模式允许一个对象在其内部状态改变时改变它的行为。对象看起来似乎修改了它的类。

        特点：

                将状态的行为封装在独立的状态类中，使得状态的转换更加清晰、可维护。

                减少了条件判断语句，使代码更加简洁、易于理解。

                实现了状态与行为的解耦，使得状态的变化不会影响到对象的其他部分。

二、状态模式的结构与原理

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.注意性能问题：

        如果状态的切换非常频繁，可能会影响性能，可以考虑优化状态的管理方式。

关于状态模式的介绍就到此结束，如果对于其他设计模式感兴趣的话，可以看看下方的专栏目录，里面有其他设计模式的文章。码字不易，点个赞再走吧