【面试题】如何理解 前端设计模式-测策略模式?

这篇具有很好参考价值的文章主要介绍了【面试题】如何理解 前端设计模式-测策略模式?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

【国庆头像】- 国庆爱国 程序员头像!总有一款适合你!文章来源地址https://www.toymoban.com/news/detail-732939.html

什么是策略模式

策略(Strategy)模式的定义:该模式定义了一系列算法,并将每个算法封装起来,使他们可以相互替换,且算法的变化不会影响使用算法的客户。

要解决的问题

假设我们需要写一个计算年终奖的函数,我们的代码可能长这样

const bonus = function (level, salary) {
  if (level === "S") {
    return salary * 1.1;
  }
  if (level === "A") {
    return salary * 1;
  }
  if (level === "B") {
    return salary * 0.9;
  }
};

这样写代码会有一些问题:

  • 如果情况较多,判断逻辑也会很多,代码会比较乱
  • 违反了设计原则的开发封闭原则(对拓展开放,对修改封闭),增加逻辑必须修改原函数

我们可以借助策略模式进行优化。

单一职责改造

上述代码每一个条件中的 return 语句 是一个算法,我们可以将每个算法封装成一个函数

      const levelS = (salary) => {
        return salary * 1.1;
      };
      const levelA = (salary) => {
        return salary * 1;
      };
      const levelB = (salary) => {
        return salary * 0.9;
      };
      const bonus = function (level, salary) {
        if (level === "S") {
          return levelS(salary);
        }
        if (level === "A") {
          return levelA(salary);
        }
        if (level === "B") {
          return levelB(salary);
        }
      };

这样封装完后,每中计算奖金的算法都被单独抽离,便于维护。但如果有其他情况时,我们依然要向bonus函数里写if语句,我们需要继续优化

开发封闭改造

  const levelObj = {
    S: (salary) => {
      return salary * 1.1;
    },
    A: (salary) => {
      return salary * 1;
    },
    B: (salary) => {
      return salary * 0.9;
    },
  };
  const bonus = function (level, salary) {
    return levelObj[level](salary);
  };

这样修改后,如果还有D情况,我们就可以这样修改

levelObj.D = (salary)=> {
  return salary * 0.8;
},

可见,策略模式能更好的解决if语句的循环嵌套。

上面每一个算法S,A,B,D内的逻辑不管如何变化,都不会影响bonus的核心逻辑,因此,我们说:策略模式定义了一系列算法,并将每个算法封装起来,使他们可以相互替换,且算法的变化不会影响使用算法的客户。

在vite配置中的使用

假设我们的vite有三个配置文件,一个公用的viteBaseConfig配置,dev模式的viteDevConfig配置,生产模式的viteProdConfig配置。

import { defineConfig } from "vite";
import viteBaseConfig from "./vite.base.config";
import viteDevConfig from "./vite.dev.config";
import viteProdConfig from "./vite.prod.config";
export default defineConfig(({ command, mode, ssrBuild }) => {
  if (command === "serve") {
    return {
      // dev 独有配置
      ...viteBaseConfig,
      ...viteProdConfig
    };
  } else {
    // command === 'build'
    return {
      // build 独有配置
      ...viteBaseConfig,
      ...viteDevConfig
    };
  }
});

上述代码使用if语句来根据不同模式返回不同的配置项,我们根据刚才所学知识进行优化下。

单一职责改造

//....
export default defineConfig(({ command, mode, ssrBuild }) => {
  const build = () => {
    // Object.assign中的{}是为了防止viteBaseConfig被修改。
    Object.assign({}, viteBaseConfig, viteProdConfig)
  },
  const serve = () => {
    // Object.assign中的{}是为了防止viteBaseConfig被修改。
    Object.assign({}, viteBaseConfig, viteDevConfig)
  },

  if (command === "serve") {
    return build()
  } else {
    // command === 'build'
    return serve();
  }
});

Object.assign() Object.assign() 方法将所有可枚举属性从一个或多个源对象复制到目标对象,返回修改后的对象。 注意:该方法会修改源对象!

const target = { a: 1, b: 2 };
const source = { b: 4, c: 5 };
const returnedTarget = Object.assign(target, source);

console.log(target);
// expected output: Object { a: 1, b: 4, c: 5 }

console.log(returnedTarget === target);
// expected output: true

开发封闭改造

const envResolver = {
  build: () => Object.assign({}, viteBaseConfig, viteProdConfig),
  serve: () => Object.assign({}, viteBaseConfig, viteDevConfig),
};
export default defineConfig(({ command, mode, ssrBuild }) => {
  return envResolver[command]();
});

 

 前端面试题库 (面试必备)            推荐:★★★★★

地址:前端面试题库

【国庆头像】- 国庆爱国 程序员头像!总有一款适合你!

到了这里,关于【面试题】如何理解 前端设计模式-测策略模式?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • [设计模式]行为型模式-策略模式

    策略模式定义了一系列算法,并将每个算法封装起来,使它们可以互相替换,且算法的变换不会影响使用算法的客户。 在项目开发中,我们经常要根据不同的场景,采取不同的措施,也就是不同的策略。假设我们需要对a、b这两个整数进行计算,根据条件的不同,需要执行不

    2024年02月19日
    浏览(45)
  • 设计模式-策略模式

    策略模式是一种行为型设计模式,它允许在运行时动态改变对象的行为。在策略模式中,算法被封装在独立的策略类中,使得它们可以互换使用。下面是一个简单的例子: 假设我们有一个计算税收的系统,现在需要计算不同类型的商品的税收,例如书籍、食品和服装。每种商

    2024年02月15日
    浏览(47)
  • 设计模式—策略模式

    目录 一、定义 二、特点 三、优点 四、缺点 五、实例 六.涉及到的知识点 1、一个类里面有哪些东西? 2、类和实例 什么是类? 什么是实例? 什么是实例化? 3、字段和属性 什么是字段? 属性是什么? 属性怎么用呢? 属性有什么作用? 静态属性是什么? 属性和字段的公有

    2024年02月10日
    浏览(50)
  • 设计模式--策略模式

    目录 一.场景 1.1场景 2.2 何时使用  2.3个人理解 二. 业务场景练习  2.1业务: 2.2具体实现 2.3思路   三.总结 3.1策略模式的特点:  3.2策略模式优点 3.3策略模式缺点 1.1场景 许多相关的类仅仅是行为有异,也就是说业务代码需要根据场景不同,切换不同的实现逻辑 一个类定义了

    2024年02月13日
    浏览(40)
  • 【设计模式】 策略模式

    策略模式 (Strategy Pattern)是一种行为型设计模式,它定义了一系列算法,将每个算法封装起来,使它们可以相互替换,让客户端代码和算法的具体实现解耦。这样,客户端可以根据不同的需求选择不同的算法,而无需修改原有的代码。 灵活性增强 :策略模式使得算法独立于

    2024年02月14日
    浏览(45)
  • 设计模式之策略模式

    策略设计模式(Strategy Pattern)是一种行为设计模式,它允许在运行时选择算法的行为。策略模式定义了一系列算法,并将每个算法封装起来,使它们可以互相替换。这种模式使算法的变化独立于使用算法的客户端。 概念 在策略模式中,有以下几个关键组成部分: 策略接口(

    2024年01月23日
    浏览(49)
  • 设计模式——策略模式

    定义: 该模式定义了一系列算法,并将每个算法封装起来,使它们可以相互替换,且算法的变化不会影响使用算法的客户。策略模式属于对象行为模式,它通过对算法进行封装,把便用算法的责任和算法的实现分割开来,并委派给不算法进象行管理。 主要角色如下: 示例: 假定现在需要

    2024年02月22日
    浏览(36)
  • 【设计模式】4、策略模式

    策略模式是一种行为设计模式,它能定义一系列算法,把每种算法分别放入独立的类中,以是算法的对象能相互替换。 一天, 你打算为游客们创建一款导游程序。 该程序的核心功能是提供美观的地图, 以帮助用户在任何城市中快速定位。 用户期待的程序新功能是自动路线

    2024年02月20日
    浏览(44)
  • 《设计模式》策略模式

    定义 : 又叫作 政策模式,将定义的一系列算法封装起来,使得它们之间可以互相替换,从而让算法的变化不影响到使用算法的用户 。 属于 行为型 模式。 策略模式的组成角色 : 环境类(Context) : 环境类是使用算法的角色 ,用来操作策略的上下文环境,屏蔽高层模块(客户

    2024年02月01日
    浏览(43)
  • 设计模式:策略模式

    策略模式(Strategy Pattern)是一种行为型设计模式,它允许在运行时根据不同的情况选择不同的算法或行为。策略模式通过将算法封装成独立的策略类,使得它们可以互相替换,而不影响客户端的使用。 在策略模式中,有三个核心组件: 策略接口(Strategy Interface):定义了策

    2024年02月07日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包