JavaScript策略模式利用对象键值的映射关系详解
引言
策略模式指的是，定义一系列的算法，把它们一个个的封装起来，通过传递一些参数，使他们可以相互替换。
举个周末从家去咖啡馆的例子：
从家去咖啡馆，有跑步、骑行和漫步的方式。也就是说，从家到咖啡馆，有三种策略可选择。
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>
.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策略模式对象键值映射的资料请关注编程网其它相关文章！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
