js设计模式-策略模式与代理模式的应用

简介: 策略模式和代理模式是JavaScript常用设计模式。策略模式通过封装一系列算法,使它们可互换,让算法独立于客户端,提供灵活的选择。例如,定义不同计算策略并用Context类执行。代理模式则为对象提供代理以控制访问,常用于延迟加载或权限控制。如创建RealSubject和Proxy类,Proxy在调用RealSubject方法前可执行额外操作。这两种模式在复杂业务逻辑中发挥重要作用,根据需求选择合适模式解决问题。

策略模式和代理模式是常用的JavaScript设计模式,可以在各种场景下应用。

策略模式(Strategy Pattern)是一种行为型模式,它定义了一系列的算法,并将每个算法封装起来,使它们可以相互替换。策略模式可以使算法独立于使用它的客户端而变化,从而可以灵活地选择算法。在JavaScript中,可以使用函数来实现策略模式。例如:

// 定义一系列的算法
function addStrategy(a, b) {
  return a + b;
}
function subtractStrategy(a, b) {
  return a - b;
}
function multiplyStrategy(a, b) {
  return a * b;
}
// 定义一个策略上下文类
class Context {
  constructor(strategy) {
    this.strategy = strategy;
  }
  executeStrategy(a, b) {
    return this.strategy(a, b);
  }
}
// 使用策略模式
const context = new Context(addStrategy);
console.log(context.executeStrategy(2, 3)); // 输出 5
context.strategy = subtractStrategy;
console.log(context.executeStrategy(5, 2)); // 输出 3
context.strategy = multiplyStrategy;
console.log(context.executeStrategy(4, 3)); // 输出 12

image.gif

代理模式(Proxy Pattern)是一种结构型模式,它为其他对象提供一种代理以控制对这个对象的访问。代理对象可以拦截对被代理对象的访问,并进行一些额外操作。代理模式常用于对目标对象进行一些额外处理,比如延迟加载、权限控制等。在JavaScript中,可以使用类来实现代理模式。例如:

// 定义一个目标对象
class RealSubject {
  request() {
    console.log("RealSubject: 处理请求");
  }
}
// 定义一个代理对象
class Proxy {
  constructor(realSubject) {
    this.realSubject = realSubject;
  }
  request() {
    // 在真正调用目标对象方法之前执行一些额外操作
    console.log("Proxy: 执行额外操作");
    // 调用目标对象的方法
    this.realSubject.request();
  }
}
// 使用代理模式
const realSubject = new RealSubject();
const proxy = new Proxy(realSubject);
proxy.request();

image.gif

在上述例子中,代理对象在调用目标对象的方法之前执行了一些额外操作。代理模式可以帮助我们实现更复杂的业务逻辑,同时保持目标对象的单一职责。

策略模式和代理模式在实际应用中具有广泛的应用场景,可以根据具体需求选择适合的设计模式来解决问题。

目录
打赏
0
0
0
0
18
分享
相关文章
「全网最细 + 实战源码案例」设计模式——策略模式
策略模式(Strategy Pattern)是一种行为型设计模式,用于定义一系列可替换的算法或行为,并将它们封装成独立的类。通过上下文持有策略对象,在运行时动态切换算法,提高代码的可维护性和扩展性。适用于需要动态切换算法、避免条件语句、经常扩展算法或保持算法独立性的场景。优点包括符合开闭原则、运行时切换算法、解耦上下文与策略实现、减少条件判断;缺点是增加类数量和策略切换成本。示例中通过定义抽象策略接口和具体策略类,结合上下文类实现动态算法选择。
69 8
「全网最细 + 实战源码案例」设计模式——策略模式
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
28 8
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
112 33
Vue.js应用结合Redis数据库:实践与优化
将Vue.js应用与Redis结合,可以实现高效的数据管理和快速响应的用户体验。通过合理的实践步骤和优化策略,可以充分发挥两者的优势,提高应用的性能和可靠性。希望本文能为您在实际开发中提供有价值的参考。
66 11
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目,能够直接将 Figma 设计转换为 Vue.js 应用程序,减少设计师与开发者之间的交接时间,支持低代码渲染和数据绑定。
137 3
Figma-Low-Code:快速将Figma设计转换为Vue.js应用,支持低代码渲染、数据绑定
【Vue.js】监听器功能(EventListener)的实际应用【合集】
而此次问题的核心就在于,Vue实例化的时机过早,在其所依赖的DOM结构尚未完整构建完成时就已启动挂载流程,从而导致无法找到对应的DOM元素,最终致使计算器功能出现异常,输出框错误地显示“{{current}}”,并且按钮的交互功能也完全丧失响应。为了让代码结构更为清晰,便于后续的维护与管理工作,我打算把HTML文件中标签内的JavaScript代码迁移到外部的JS文件里,随后在HTML文件中对其进行引用。
58 8
前端必须掌握的设计模式——策略模式
策略模式(Strategy Pattern)是一种行为型设计模式,旨在将多分支复杂逻辑解耦。每个分支类只关心自身实现,无需处理策略切换。它避免了大量if-else或switch-case代码,符合开闭原则。常见应用场景包括表单验证、风格切换和缓存调度等。通过定义接口和上下文类,策略模式实现了灵活的逻辑分离与扩展。例如,在国际化需求中,可根据语言切换不同的词条包,使代码更加简洁优雅。总结来说,策略模式简化了多条件判断,提升了代码的可维护性和扩展性。
Next.js 实战 (十):中间件的魅力,打造更快更安全的应用
这篇文章介绍了什么是Next.js中的中间件以及其应用场景。中间件可以用于处理每个传入请求,比如实现日志记录、身份验证、重定向、CORS配置等功能。文章还提供了一个身份验证中间件的示例代码,以及如何使用限流中间件来限制同一IP地址的请求次数。中间件相当于一个构建模块,能够简化HTTP请求的预处理和后处理,提高代码的可维护性,有助于创建快速、安全和用户友好的Web体验。
如何使用内存监控工具来优化 Node.js 应用的性能
需要注意的是,不同的内存监控工具可能具有不同的功能和特点,在使用时需要根据具体工具的要求和操作指南进行正确使用和分析。
103 31
|
4月前
|
如何使用内存快照分析工具来分析Node.js应用的内存问题?
需要注意的是,不同的内存快照分析工具可能具有不同的功能和操作方式,在使用时需要根据具体工具的说明和特点进行灵活运用。
85 3

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等