广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript策略模式利用对象键值的映射关系详解
  • 426
分享到

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

JavaScript策略模式对象键值映射JavaScript策略模式 2022-12-22 12:12:29 426人浏览 独家记忆
摘要

目录引言1、策略模式的极简实现2.策略模式的简单案例(1)工具函数(2)提示样式总结引言 策略模式指的是,定义一系列的算法,把它们一个个的封装起来,通过传递一些参数,使他们可以相互

引言

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

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

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

1、策略模式的极简实现

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

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

其中,ABC指的策略名称,xxxyyyzzz指的是具体函数(算法)。

2.策略模式的简单案例

(1)工具函数

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

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

(2)提示样式

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

<style scoped>
     
    .defaultActive {
        background-color: rgba(0, 0, 0, 0.8);
        color: #fff;
    }
    
    .successActive {
        background-color: #f0f9eb;
        color: #67c23a;
    }
    
    .infoActive {
        background-color: #f4f4f5;
        color: #909399;
    }
    
    .warningActive {
        background-color: #fdf6ec;
        color: #e6a23c;
    }
    
    .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策略模式对象键值映射的资料请关注编程网其它相关文章!

--结束END--

本文标题: JavaScript策略模式利用对象键值的映射关系详解

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

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

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

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

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作