iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >什么是TypeScript策略模式
  • 142
分享到

什么是TypeScript策略模式

2024-04-02 19:04:59 142人浏览 安东尼
摘要

本篇内容介绍了“什么是typescript策略模式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 

本篇内容介绍了“什么是typescript策略模式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

 一、什么是策略模式

定义: 定义一系列的算法,把它们一个个封装起来,并且使它们可以互相替换。

什么是TypeScript策略模式

一个基于策略模式的程序至少由两部分组成。

第一个部分是一组策略类 strategy,策略类封装了具体的算法,并负责具体的计算过程。

第二个部分是环境类 Context , Context 接受客户的请求,随后把请求委托给某一个策略类

二、策略模式的作用

在现实中,很多时候也有多种途径到达同一个目的地。比如我们要去某个地方旅游,可以根据具体的实际情况来选择出行的线路。

  • 如果没有时间但是不在乎钱,可以选择坐飞机。

  • 如果没有钱,可以选择坐大巴或者火车。

  • 如果再穷一点,可以选择骑自行车。

什么是TypeScript策略模式

Untitled Diagram.png

在程序设计中,我们也常常遇到类似的情况,要实现某一个功能有多种方案可以选择。比如一个压缩文件的程序,既可以选择zip算法,也可以选择gzip算法。

这些算法灵活多样,而且可以随意互相替换。这种解决方案就是本章将要介绍的策略模式。

三、策略模式案例

1、计算奖金

案例描述:某公司的年终奖是根据员工的工资基数和年底绩效来发放的。例如,绩效为S的人年终奖有4倍工资,绩效为A的人年终奖有3倍工资,绩效为B的人年终奖有2倍工资,财务部要求我们提供一段代码,来方便他们计算员工的年终奖。

什么是TypeScript策略模式

计算奖金:最初版本

const calculateBouns = function(level: string,salary: number) :number {     if (level === 'S') {       return salary * 4;     }     if (level === 'A') {       return salary * 3;     }     if (level === 'B') {       return salary * 2;     }  }  console.log(calculateBouns('S',4000));  // 输出16000  console.log(calculateBouns('A',3000));  // 输出9000  console.log(calculateBouns('B',2000));  // 输出4000

** 分析 **:

  • calculateBonus 函数比较庞大,包含了很多 if-else 语句,这些语句需要覆盖所有的逻辑分支。

  • calculateBonus 函数缺乏弹性,如果增加了一种新的绩效等级C,或者想把绩效S的奖金系数改为5,那我们必须深入 calculateBonus  函数的内部实现,这是违反开放-封闭原则的。

  • 算法的复用性差,如果在程序的其他地方需要重用这些计算奖金的算法呢?我们的选择只有复制和粘贴。

计算奖金:(使用策略模式)面向对象完善版本

// 计算奖金:面向对象完善版本 class PerfORManceS {     calculate(salary: number): number {         return salary * 4     } }  class PerformanceA {     calculate(salary: number): number {         return salary * 3     } }  class PerformanceB {     calculate(salary: number): number {         return salary * 2     } }  interface strategy {     calculate: (salary: number) => number; }

先创建一个 bonus(Context)对象,并且给 bonus 对象设置一些原始的数据,比如员工的原始工资数额。

接下来把某个计算奖金的策略对象也传入bonus对象内部保存起来。

当调用 bonus.getBonus()来计算奖金的时候,bonus对象本身并没有能力进行计算,

而是把请求委托给了之前保存好的策略对象:

// Context 对象 class Bouns {      public salary: number; // 原始工资     public strategy: strategy; // 绩效等级对应的策略对象      setSalary(salary: number) {         this.salary = salary; // 设置员工的原始工资     }      setStrategy(strategy: strategy) {       this.strategy = strategy // 设置员工绩效等级对应的策略对象     }      getBouns() { // 取得奖金数额         return this.strategy.calculate(this.salary); // 把计算奖金的操作委托给对应的策略对象     } }  const bouns = new Bouns();  bouns.setSalary(4000); bouns.setStrategy(new PerformanceS()); console.log(bouns.getBouns());  // 输出16000  bouns.setSalary(3000); bouns.setStrategy(new PerformanceA()); console.log(bouns.getBouns());  // 输出9000  bouns.setSalary(2000); bouns.setStrategy(new PerformanceB()); console.log(bouns.getBouns());  // 输出4000

我们再来回顾一下策略模式的思想:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。这句话如果说得更详细一点,就是:定义一系列的算法,把它们各自封装成策略类,算法被封装在策略类内部的方法里。在客户对  Context发起请求的时候,Context总是把请求委托给这些策略对象中间的某一个进行计算。

计算奖金:javascript的完善版本

// 计算奖金:JavaScript的完善版本 // 在JavaScript语言中,函数也是对象,所以更简单和直接的做法是把strategy直接定义为函数 interface strategy {     S:(salary: number) => number;     A:(salary: number) => number;     B:(salary: number) => number; }  const strategy: strategy= {     S: function(salary: number): number {       return salary * 4;     },     A: function(salary: number): number {       return salary * 3;     },     B: function(salary: number): number {       return salary * 2;     } } // Context   var calcluateBouns = function(level: string,salary: number): number{     return strategy[level](salary);   }   console.log(calcluateBouns('S',4000));  // 输出16000   console.log(calcluateBouns('A',3000));  // 输出9000   console.log(calcluateBouns('B',2000));  // 输出4000

2、表单验证

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区

  2. 用户名(验证是否为空)

  3. 密码(验证长度不能小于6位)

  4. 手机号(验证是否是手机号格式)

表单验证:最初版本

<html>? <body>?        <form action="Http://xxx.com/reGISter" id="registerForm" method="post">? 请输入用户名:<input type="text" name="userName"/ > 请输入密码:<input type="text" name="passWord"/ >?   请输入手机号码:<input type="text" name="phoneNumber"/ >? <button>提交</button>?        </form>?         <script>?         var registerForm = document.getElementById( 'registerForm' ); ?registerForm.onsubmit = function(){   ?if ( registerForm.userName.value === '' ){?    alert ( '用户名不能为空' );?                         return false;?   }?                  if ( registerForm.password.value.length < 6 ){?    alert ( '密码长度不能少于6位' );?                       return false;?                 }?                   if ( !/(^1[3|5|8][0-9]{9}$)/.test( registerForm.phoneNumber.value ) ){?     alert ( '手机号码格式不正确' );?                          return false;?                                                                             }?         }?           </script>?           </body>?      </html>

分析:

  • registerForm.onsubmit函数比较庞大,包含了很多if-else语句,这些语句需要覆盖所有的校验规则。

  • registerForm.onsubmit函数缺乏弹性,如果增加了一种新的校验规则,或者想把密码的长度校验从6改成8,我们都必须深入  registerForm.onsubmit函数的内部实现,这是违反开放&mdash;封闭原则的。

  • 算法的复用性差,如果在程序中增加了另外一个表单,这个表单也需要进行一些类似的校验,那我们很可能将这些校验逻辑复制得漫天遍野

表单验证:策略模式案例

// 策略对象 const strategies: Object = {     isEmpty(value: string, errMsg: string): string {       if(value === '') {         return errMsg       }     },     minLength(value: string, length: number, errMsg: string) : string{       if (value.length<length) {         return errMsg       }     },     isMobile(value: string,errMsg: string): string {       if (!(/^1[34578]\d{9}$/.test(value))) {         return errMsg       }     } }  // Context class Validator {        public cache: Array<Function>;      constructor() {         this.cache = []     }      add(value: string, rule: string, msg: string) {         const params: Array<string> = rule.split(':');         this.cache.push(() => {             const strategy: string = params.shift();             params.unshift(value);             params.push(msg);             return strategies[strategy].apply(null, params)         })     }      check(): string {         let value: Function;         for (value of this.cache) {             const msg = value();             if (msg) {                 return msg             }         }     } }    var submitBtn = document.getElementById('submitBtn'); var registerForm = document.getElementById('registerForm'); var validateFunc = function() {     var validator = new Validator();   // 添加规则     validator.add(registerForm.username.value,'isEmpty','用户名不能为空');     validator.add(registerForm.password.value,'minLength:6','密码长度不能小于6位');     validator.add(registerForm.phone.value,'isMobile','手机号格式不正确');      // 校验结果     var errMsg = validator.check();     return errMsg; }   submitBtn.onclick = function() {     var errMsg = validateFunc();     if(errMsg) {       console.log(errMsg);       return false;     } else {       console.log('表单验证成功')     }   }

四、策略模式的优缺点

优点:

策略模式利用组合、委托和多态等技术和思想,可以有效地避免多重条件选择语句。

策略模式提供了对开放&mdash;封闭原则的完美支持,将算法封装在独立的 strateg (策略)中,使得它们易于切换,易于理解,易于扩展。

策略模式中的算法也可以复用在系统的其他地方,从而避免许多重复的复制粘贴工作。

在策略模式中利用组合和委托来让 Context 拥有执行算法的能力,这也是继承的一种更轻便的替代方案。

缺点:

1、使用策略模式会在程序中增加许多策略类或者策略对象,但实际上这比把它们负责的逻辑堆砌在 Context 中要好。

2、要使用策略模式,必须了解所有的 strategy ,必须了解各个 strategy  之间的不同点,这样才能选择一个合适的strategy。比如,我们要选择一种合适的旅游出行路线,必须先了解选择飞机、火车、自行车等方案的细节。此时strategy要向客户暴露它的所有实现,这是违反最少知识原则的。

“什么是TypeScript策略模式”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!

--结束END--

本文标题: 什么是TypeScript策略模式

本文链接: https://www.lsjlt.com/news/84689.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 什么是TypeScript策略模式
    本篇内容介绍了“什么是TypeScript策略模式”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2024-04-02
  • java中什么是策略模式
    这篇文章主要介绍了java中什么是策略模式,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。什么是策略模式比如说对象的某个行为,在不同场景中有不...
    99+
    2024-04-02
  • java设计模式的策略模式是什么
    这篇文章主要介绍“java设计模式的策略模式是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“java设计模式的策略模式是什么”文章能帮助大家解决问题。策略模式亦称:Strategy意图策略模式是...
    99+
    2023-07-02
  • PHP中的策略模式是什么
    这篇文章主要讲解了“PHP中的策略模式是什么”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“PHP中的策略模式是什么”吧!策略模式,又称为政策模式,属于行为型的设计模式。Gof类图及解释GoF...
    99+
    2023-06-20
  • JS与设计模式中什么是策略模式Strategy
    这篇文章给大家介绍JS与设计模式中什么是策略模式Strategy,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。一,总体概要1,笔者浅谈策略模式,又叫算法簇模式,就是定义了不同的算法,并且之间可以互相替换,此模式让算法的...
    99+
    2023-06-17
  • JavaScript中策略模式的作用是什么
    本篇文章为大家展示了JavaScript中策略模式的作用是什么,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。JavaScript是什么JavaScript是一种直译式的脚本语言,其解释器被称为Jav...
    99+
    2023-06-14
  • C#设计模式之策略模式
    策略模式 所谓策略其实就是做一件事情有很多很多的方法,比如说一个商场要搞促销,促销的方式有可能有很多:打折啊,满100返50啊、积分等等之类的。这种不同的促销方式在我们系统中表示就是...
    99+
    2024-04-02
  • Java设计模式之策略模式
    在一个收银系统中,如果普通用户、中级会员、高级会员分别对应着不同的优惠策略,常规编程就要使用一系列的判断语句,判断用户类型,这种情况下就可以使用策略模式。 一、概念理解 策略模式的概...
    99+
    2022-11-13
    Java 设计模式 策略模式
  • QtC++ 设计模式(四)——策略模式
    策略模式 序言理解源码 序言 还是参考的菜鸟教程,会C++的还是看C++的方式来得舒服。 . 理解 使用符合UML规范的便于理解和回忆,接口其实就是普通的基类 . 源码 strategy.h /// 策略class Strat...
    99+
    2023-08-30
    c++ 设计模式 策略模式
  • javascript设计模式之策略模式
    目录一. 认识策略模式二. 具体实现和思想三. 策略模式的实际运用四. 总结一. 认识策略模式 策略模式的定义:定义一系列的算法,将他们一个个封装起来,使他们直接可以相互替换。 策略...
    99+
    2024-04-02
  • 详解Java策略模式
    一、策略模式到底是什么? 策略模式属于对象的行为模式。其用意是针对一组算法,将每一个算法封装到具有共同接口的独立的类中,从而使得它们可以相互替换。策略模式使得算法可以在不影响到客户端...
    99+
    2024-04-02
  • C#实现策略模式
    场景:有一个喜欢吃饺子,他有三种不同的方式去吃,蒸饺子,煮饺子,煎饺子,想要用策略模式来设计这个场景,怎么弄? 1.复习简单工厂模式 具体的代码: EatMethod.cs pub...
    99+
    2024-04-02
  • 怎么实现php策略模式
    小编给大家分享一下怎么实现php策略模式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 策略模式:就是把算法和对象分离...
    99+
    2024-04-02
  • java策略模式怎么应用
    策略模式是一种行为型设计模式,它定义了一系列的算法,并将每个算法封装起来,使它们可以相互替换。这样就可以使算法的变化独立于使用算法的...
    99+
    2023-08-31
    java
  • Java策略模式怎么实现
    这篇文章主要介绍“Java策略模式怎么实现”,在日常操作中,相信很多人在Java策略模式怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Java策略模式怎么实现”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-06-02
  • JS设计模式之策略模式怎么用
    小编给大家分享一下JS设计模式之策略模式怎么用,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!策略模式的概念引用:在软件开发中也常...
    99+
    2024-04-02
  • java设计模式--策略模式详解
    目录策略模式Demo代码:总结策略模式 策略模式(Strategy Pattern)属于行为型模式,指对象有某个行为,但是在不同的场景中,该行为有不同的实现算法。用算法族分别封装起来...
    99+
    2024-04-02
  • 策略模式:告别if else
    目录策略模式引入策略模式源码分析策略模式的典型应用总结阅读完本篇文章你将了解到什么是策略模式,策略模式的优缺点,以及策略模式在源码中的应用。 策略模式引入 在软件开发中,我们常常会遇...
    99+
    2024-04-02
  • Android中怎么实现策略模式
    Android中怎么实现策略模式,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。策略模式一个功能的效果,有不同的算法与策略,根据不同的选择选择不同的结果。简单来说,只要你写过...
    99+
    2023-05-30
    android
  • java设计模式之策略模式怎么实现
    这篇文章主要介绍了java设计模式之策略模式怎么实现,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。策略模式:策略模式是一种定义一系列算法的方法,算法完成的工作都是相同的工作,...
    99+
    2023-05-31
    java
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作