JavaScript策略模式利用对象键值的映射关系详解

目录
  • 引言
  • 1、策略模式的极简实现
  • 2.策略模式的简单案例
    • （1）工具函数
    • （2）提示样式
  • 总结

引言

策略模式指的是，定义一系列的算法，把它们一个个的封装起来，通过传递一些参数，使他们可以相互替换。

举个周末从家去咖啡馆的例子：

从家去咖啡馆，有跑步、骑行和漫步的方式。也就是说，从家到咖啡馆，有三种策略可选择。

1、策略模式的极简实现

通过对象的键值映射关系，定义策略和具体实现之间的关系：

var strategies = {
    A: xxx,
    B: yyy,
    C: zzz
}

其中，A、B和C指的策略名称，xxx、yyy和zzz指的是具体函数（算法）。

2.策略模式的简单案例

（1）工具函数

当项目搭建的过程中，可以通过策略模式，封装常用的优化函数防抖和节流。

const tools = {
    throttle: function (fn, time) {
        // ...
    },
    debounce: function (fn,time) {
        // ...
    },
}

（2）提示样式

vue框架下页面中的弱提示toast样式，也可以根据类型进行样式的预置，比如，先在style中定义预置的样式

<style scoped>
     /*@style：defaultActive默认状态下的样式*/
    .defaultActive {
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
    }
    /*@style：successActive成功状态下的样式*/
    .successActive {
        background-color: #f0f9eb;
        color: #67c23a;
    }
    /*@style：infoActive信息状态下的样式*/
    .infoActive {
        background-color: #f4f4f5;
        color: #909399;
    }
    /*@style：warningActive警告状态下的样式*/
    .warningActive {
        background-color: #fdf6ec;
        color: #e6a23c;
    }
    /*@style：errorActive错误状态下的样式*/
    .errorActive {
        background-color: #fef0f0;
        color: #f56c6c;
    }
</style>

利用vue的计算属性，将传入的类型和字符串'Active'拼接组成策略，如'defaultActive'、'successActive'、'infoActive'、'warningActive'和'errorActive'

<script>
    export default {
        computed: {
            className () {
                return this.type + 'Active'
            }
        }
    };
</script>

在template视图端进行"策略"和样式的关联

<template>
    <div class="toast" :class=className>
        {{msg}}
    </div>
</template>

总结

策略模式，可以利用对象的键值映射关系以及函数是一等公民的特性，以key来作为策略名称，以函数作为值定义具体算法，利用这些javascript特性可以更为简单的实现策略模式。

以上就是JavaScript策略模式利用对象键值的映射关系详解的详细内容，更多关于JavaScript策略模式对象键值映射的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 怎样用Javascript实现策略模式

    概述 策略模式是JavaScript设计模式中行为型的设计模式: 定义: 定义一系列算法,并将这些算法各自封装成策略类(方法),然后将不变的部分和变化的部分分离开来,并且这些算法可以相互替换 白话解释: 实际上所谓的策略模式就是指根据不同的策略来执行不同的方法,是不是很类似与if-else分支判断:但是策略模式是用来解决多重条件判断语句的: 代码实现 需求: 年终将至,某公司决定提前发年终奖,但是年终奖的计算是有一定的规则的,年终奖的多少跟绩效考核密切相关:所以某公司的年终奖方案是这样的: 绩效

  • JavaScript设计模式之策略模式实现原理详解

    俗话说,条条大路通罗马.在现实生活中,我们可以采用很多方法实现同一个目标.比如我们先定个小目标,先挣它一个亿.我们可以根据具体的实际情况来完成这个目标. 策略模式的定义 定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换. 举个例子:表单校验 在一个Web项目中,注册.登录等功能的实现都离不开表单提交.表单校验也是前端常常需要做的事.假设我们正在编写一个注册的页面,在点击提交按钮之前,有如下几条校验逻辑: 用户名不可为空,不允许以空白字符命名,用户名长度不能小于2位. 密码长度不能小

  • JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

    本文实例讲述了JS表单验证插件之数据与逻辑分离操作.分享给大家供大家参考,具体如下: 之前已经写过一个表单验证插件了,为什么还会重复造轮子呢?第一个问题是代码结构比较乱,虽然通过原型继承的写法将处理分层,但业务逻辑和数据结构混杂在一起,导致第二个问题--可扩展性和灵活性差. 认真分析表单验证的过程,可以分为两步:怎么验证和如何验证.怎么验证是数据层面的问题,如何验证是业务逻辑层面的问题. 点击:这里 查看源码 策略模式将对象和规则区分 如何让算法(数据层)和对象(逻辑层)分开来,使得算法可以独立

  • 从表单校验看JavaScript策略模式的使用详解

    众所周知的是,表单确实在前端,唔,或者说在网页中占有不小的比重.事实上,几乎每一个中大型网站都会有"登录注册"以验证用户信息.防止一些不可名状的隐患... 那么表单的优劣就成了前端开发者急需解决的问题.其实我更愿意称为"代码的可读性"或"可复用性"以及"是否冗杂". 表单也有"优劣"?你在开玩笑嘛? 我想你可以认真看下下面的代码,它用到了一些"新知识": <form action=

  • javascript设计模式之策略模式

    目录 一. 认识策略模式 二. 具体实现和思想 三. 策略模式的实际运用 四. 总结 一. 认识策略模式 策略模式的定义:定义一系列的算法,将他们一个个封装起来,使他们直接可以相互替换. 策略模式是开发中常用的第二种设计模式,它在开发中非常常见,由两部分组成.第一部分是策略类,封装了许多具体的,相似的算法.第二部分是环境类,接受客户请求,随后将请求委托给策略类.说的通俗一点就是将相同算法的函数存放在一个包装里边,每个函数用相同的方式拿出来,就叫做策略模式.下面我们来通过代码实现深入了解一下. 二

  • 如何使用JavaScript策略模式校验表单

    概述 Web项目中,登录,注册等等功能都需要表单提交,当把用户的数据提交给后台之前,前端一般要做一些力所能及的校验,比如是否填写,填写的长度,密码是否符合规范等等,前端校验可以避免提交不合规范的表单. 假如我们有一个表单,校验逻辑如下: 用户名不为空 密码长度不低于6位 手机号符合格式 未使用策略模式的表单校验 当没有使用策略模式时,即我们首先会想到的校验模式通常是这样的: <body> <form id="registerForm"> <label fo

  • JavaScript策略模式利用对象键值的映射关系详解

    目录 引言 1.策略模式的极简实现 2.策略模式的简单案例 (1)工具函数 (2)提示样式 总结 引言 策略模式指的是,定义一系列的算法,把它们一个个的封装起来,通过传递一些参数,使他们可以相互替换. 举个周末从家去咖啡馆的例子: 从家去咖啡馆,有跑步.骑行和漫步的方式.也就是说,从家到咖啡馆,有三种策略可选择. 1.策略模式的极简实现 通过对象的键值映射关系,定义策略和具体实现之间的关系: var strategies = { A: xxx, B: yyy, C: zzz } 其中,A.B和C

  • python字典多键值及重复键值的使用方法(详解)

    python字典多键值及重复键值的使用方法(详解)

    在Python中使用字典,格式如下: dict={ key1:value1 , key2;value2 ...} 在实际访问字典值时的使用格式如下: dict[key] 多键值 字典的多键值形式如下: dict={(ke11,key12):value ,(key21,key22):value ...} 在实际访问字典里的值时的具体形式如下所示(以第一个键为例): dict[key11,key12] 或者是: dict[(key11,key12)] 以下是实际例子: 多值 在一个键值对应多个值时,

  • PHP设计模式之策略模式（Strategy）入门与应用案例详解

    PHP设计模式之策略模式（Strategy）入门与应用案例详解

    本文实例讲述了PHP设计模式之策略模式(Strategy)入门与应用.分享给大家供大家参考,具体如下: 这个策略模式,意思就是定义一系列算法,把它们一个个封装起来,并且使它们可相互替换,使用得算法的变化可独立于使用它的客户,简单来讲就是,策略模式设计帮助构建的对象不必自身包含逻辑,而是能够根据需要利用其他对象中的算法. 来看下应用场景: 1. 多个类只区别在表现行为不同,可以使用Strategy模式,在运行时动态选择具体要执行的行为. 2. 需要在不同情况下使用不同的策略(算法),或者策略还可能

  • JavaScript严格模式下关于this的几种指向详解

    JavaScript严格模式下关于this的几种指向详解

    前言 相信不少人在学习或者使用Javascript的时候,都曾经被 JavaScript 中的 this 弄晕了,那么本文就来整理总结一下在严格模式下 this 的几种指向. 一.全局作用域中的this 在严格模式下,在全局作用域中,this指向window对象 "use strict"; console.log("严格模式"); console.log("在全局作用域中的this"); console.log("this.docume

  • Redis中键值过期操作示例详解

    Redis中键值过期操作示例详解

    1.过期设置 Redis 中设置过期时间主要通过以下四种方式: expire key seconds:设置 key 在 n 秒后过期: pexpire key milliseconds:设置 key 在 n 毫秒后过期: expireat key timestamp:设置 key 在某个时间戳(精确到秒)之后过期: pexpireat key millisecondsTimestamp:设置 key 在某个时间戳(精确到毫秒)之后过期: 下面分别来看以上这些命令的具体实现. 1)expire:N

  • Django中ORM外键和表的关系详解

    外键 在 MySQL 中,表有两种引擎,一种是 InnoDB ,另外一种是 myisam .如果使用的是 InnoDB 引擎,是支持外键约束的.外键的存在使得 ORM 框架在处理表关系的时候异常的强大.因此这里我们首先来介绍下外键在 Django 中的使用. 类定义为 class ForeignKey(to,on_delete,**options) .第一个参数是引用的是哪个模型,第二个参数是在使用外键引用的模型数据被删除了,这个字段该如何处理,比如有 CASCADE . SET_NULL 等.

  • JavaScript判断两个值相等的方法详解

    JavaScript判断两个值相等的方法详解

    目录 前言 非严格相等 严格相等 同值零 同值 总结 前言 在 JavaScript 中如何判断两个值相等,这个问题看起来非常简单,但并非如此,在 JavaScript 中存在 4 种不同的相等逻辑,如果你不知道他们的区别,或者认为判断相等非常简单,那么本文非常适合你阅读. ECMAScript 是 JavaScript 的语言规范,在ECMAScript 规范中存在四种相等算法,如下图所示: 上图中四种算法对应的中文名字如下,大部分前端应该熟悉严格相等和非严格相等,但对于同值零和同值却不熟悉,

  • JavaScript 对象的四种方式比较详解

    目录 前言 1. 引用比较 2. 手动比较 3. 浅层比较 4. 深层比较 5. 总结 前言 比较 JavaScript 中的值非常简单,只需用相等运算符即可,例如严格相等运算符: 'a' === 'c'; // => false 1 === 1; // => true 但是对象却有结构化的数据,所以比较起来比较困难.在本文中,你将学习如何正确比较 JavaScript 中的对象. 1. 引用比较 JavaScript 提供了 3 种方法来对值进行比较: 严格相等运算符 === 宽松相等运算符

随机推荐