前端开发设计模式—

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

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

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

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();
});