有些网站仿出问题,网页的后台管理系统,中国十大财务软件,wordpress 插件 安装教程视频目录
一、状态模式的定义和特点
二、状态模式的结构与原理
1.结构#xff1a;
2.原理#xff1a;
三、状态模式的实现方式
四、状态模式的使用场景
1.按钮的不同状态#xff1a;
2.页面加载状态#xff1a;
3.用户登录状态#xff1a;
五、状态模式的优点
1.提…目录
一、状态模式的定义和特点
二、状态模式的结构与原理
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 classloaderLoading.../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 classerrorFailed 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 buttonLogin/buttona href#Register/a;}
} 2 登录中状态显示加载动画提示用户正在登录。状态类为
class LoggingInState {show() {document.getElementById(userArea).innerHTML div classloaderLogging in.../div;}
} 3 已登录状态显示用户头像和用户名以及退出登录按钮。状态类如下
class LoggedInState {show(user) {document.getElementById(userArea).innerHTML img src${user.avatar} altAvatarspan${user.username}/spanbuttonLogout/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.注意性能问题 如果状态的切换非常频繁可能会影响性能可以考虑优化状态的管理方式。 关于状态模式的介绍就到此结束如果对于其他设计模式感兴趣的话可以看看下方的专栏目录里面有其他设计模式的文章。码字不易点个赞再走吧
