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

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

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

相关文章
|
1月前
|
设计模式 算法 Kotlin
Kotlin - 改良设计模式 - 策略模式
Kotlin - 改良设计模式 - 策略模式
49 4
|
8天前
|
设计模式 前端开发 数据安全/隐私保护
前端必须掌握的设计模式——代理模式
代理模式(Proxy Pattern)是一种结构型设计模式,通过引入“替身”对象来间接访问真实对象,从而解耦并提升性能和安全性。例如,知名艺人复出后,经纪人作为代理筛选商单,确保只处理符合团队利益的请求。代码实现中,定义接口`IService`,艺人和经纪人都实现该接口,经纪人在访问时进行过滤和转发。代理模式常用于权限控制、性能优化等场景,如前端中的Tree-shaking和ES6的Proxy构造方法。
前端必须掌握的设计模式——代理模式
|
29天前
|
设计模式 算法 Kotlin
Kotlin教程笔记(53) - 改良设计模式 - 策略模式
Kotlin教程笔记(53) - 改良设计模式 - 策略模式
45 1
|
1月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
32 2
|
1月前
|
设计模式 监控 算法
Python编程中的设计模式应用与实践感悟###
在Python这片广阔的编程疆域中,设计模式如同导航的灯塔,指引着开发者穿越复杂性的迷雾,构建出既高效又易于维护的代码结构。本文基于个人实践经验,深入探讨了几种核心设计模式在Python项目中的应用策略与实现细节,旨在为读者揭示这些模式背后的思想如何转化为提升软件质量的实际力量。通过具体案例分析,展现了设计模式在解决实际问题中的独特魅力,鼓励开发者在日常编码中积极采纳并灵活运用这些宝贵的经验总结。 ###
|
1月前
|
设计模式 算法 Kotlin
Kotlin教程笔记(53) - 改良设计模式 - 策略模式
Kotlin教程笔记(53) - 改良设计模式 - 策略模式
47 2
|
1月前
|
设计模式 开发者 Python
Python编程中的设计模式应用与实践感悟####
本文作为一篇技术性文章,旨在深入探讨Python编程中设计模式的应用价值与实践心得。在快速迭代的软件开发领域,设计模式如同导航灯塔,指引开发者构建高效、可维护的软件架构。本文将通过具体案例,展现设计模式如何在实际项目中解决复杂问题,提升代码质量,并分享个人在实践过程中的体会与感悟。 ####
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
30 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
109 2
|
1月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
21 0