前端的设计模式系列-策略模式
最新回答
夜久泪长
2026-07-10 05:47:23
策略模式是一种软件设计模式，它定义了一族算法（业务规则），封装了每个算法，并使得这些算法可以互换代替。在前端开发中，特别是在JavaScript这种基于原型的动态语言中，策略模式的实现可以更加简洁和灵活。
- 定义了一族算法：策略模式首先定义了一系列算法，这些算法可以是不同的业务逻辑或行为。
- 封装了每个算法：每个算法都被封装在独立的函数或对象中，这样可以保持代码的清晰和可维护性。
- 算法可互换代替：这些算法可以在不改变客户端代码的情况下被互换，提供了极大的灵活性。
在JavaScript中，由于函数是一等公民，策略模式的实现可以非常简洁。我们不需要定义多个类来实现不同的策略，而是可以使用对象来存储策略，并通过函数来调用这些策略。
以下是一个简单的策略模式实现示例：
// 定义策略对象const strategies = { FirstStrategy() { console.log("Called FirstStrategy"); }, SecondStrategy() { console.log("Called SecondStrategy"); }, ThirdStrategy() { console.log("Called ThirdStrategy"); }};// 调用策略的函数const execute = (strategy) => { return strategies[strategy]();};// 使用策略execute('FirstStrategy');execute('SecondStrategy');execute('ThirdStrategy');在这个例子中，strategies对象包含了三个不同的策略函数。execute函数接受一个策略名称作为参数，并调用对应的策略函数。
将策略模式应用到实际的业务场景中，比如处理不同类型的弹窗，可以这样实现：
// popTypes.jsimport { SHARETYPE } from './constant';const popTypes = { [STYLE_TYPE.Reward]: function() { // 打开奖励弹窗的逻辑 }, [STYLE_TYPE.Waitreward]: function() { // 打开等待奖励弹窗的逻辑 }, // 其他类型的弹窗...};export function openPop(type) { return popTypes[type]();}然后在主业务代码中，可以这样使用：
import { openPop } from './popTypes';async getMainData() { try { const res = await activityQuery(); // 请求后端数据 openPop(res.styleType); // 根据返回的类型打开相应的弹窗 } catch (error) { log.error(MODULENAME, '主接口异常', JSON.stringify(error)); }}通过这种方式，策略模式帮助我们将不同弹窗的打开逻辑从主业务代码中抽离出来，使得代码更加清晰和易于维护。如果需要添加新的弹窗类型，只需在popTypes对象中添加新的策略函数，而不需要修改主业务代码。
策略模式在前端开发中的应用非常广泛，除了处理弹窗逻辑，还可以用于表单验证、动画效果、数据排序等多种场景。它的核心思想是将不同的算法或行为封装起来，使得它们可以独立于使用它们的客户端代码进行变化和扩展。
热门标签
