JavaScript策略模式利用對象鍵值的映射關(guān)系詳解
更新時間：2022年12月22日 09:24:39 作者：qb
這篇文章主要為大家介紹了JavaScript策略模式利用對象鍵值的映射關(guān)系詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
引言
策略模式指的是，定義一系列的算法，把它們一個個的封裝起來，通過傳遞一些參數(shù)，使他們可以相互替換。
舉個周末從家去咖啡館的例子：
從家去咖啡館，有跑步、騎行和漫步的方式。也就是說，從家到咖啡館，有三種策略可選擇。
1、策略模式的極簡實現(xiàn)
通過對象的鍵值映射關(guān)系，定義策略和具體實現(xiàn)之間的關(guān)系：
var strategies = {
A: xxx,
B: yyy,
C: zzz
}
其中，A、B和C指的策略名稱，xxx、yyy和zzz指的是具體函數(shù)（算法）。
2.策略模式的簡單案例
（1）工具函數(shù)
當項目搭建的過程中，可以通過策略模式，封裝常用的優(yōu)化函數(shù)防抖和節(jié)流。
const tools = {
throttle: function (fn, time) {
// ...
},
debounce: function (fn,time) {
// ...
},
}
（2）提示樣式
vue框架下頁面中的弱提示toast樣式，也可以根據(jù)類型進行樣式的預置，比如，先在style中定義預置的樣式
<style scoped>
/*@style：defaultActive默認狀態(tài)下的樣式*/
.defaultActive {
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
}
/*@style：successActive成功狀態(tài)下的樣式*/
.successActive {
background-color: #f0f9eb;
color: #67c23a;
}
/*@style：infoActive信息狀態(tài)下的樣式*/
.infoActive {
background-color: #f4f4f5;
color: #909399;
}
/*@style：warningActive警告狀態(tài)下的樣式*/
.warningActive {
background-color: #fdf6ec;
color: #e6a23c;
}
/*@style：errorActive錯誤狀態(tài)下的樣式*/
.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視圖端進行"策略"和樣式的關(guān)聯(lián)
<template>
<div class="toast" :class=className>
{{msg}}
</div>
</template>
總結(jié)
策略模式，可以利用對象的鍵值映射關(guān)系以及函數(shù)是一等公民的特性，以key來作為策略名稱，以函數(shù)作為值定義具體算法，利用這些javascript特性可以更為簡單的實現(xiàn)策略模式。
以上就是JavaScript策略模式利用對象鍵值的映射關(guān)系詳解的詳細內(nèi)容，更多關(guān)于JavaScript策略模式對象鍵值映射的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
任意一個名稱都是有意義的，先從字面意思來理解。async 是“異步”的簡寫，而 await 可以認為是 async wait 的簡寫。所以應(yīng)該很好理解 async 用于申明一個 function 是異步的，而 await 用于等待一個異步方法執(zhí)行完成。下文將帶你深入探究JavaScript中的async與await2021-09-09
這篇文章主要為大家介紹了輸入框跟隨文字內(nèi)容適配寬實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
JavaScript實現(xiàn)一鍵復制內(nèi)容剪貼板
這篇文章主要為大家介紹了JavaScript實現(xiàn)一鍵復制內(nèi)容，document.execCommand原生JS設(shè)置剪貼板的實現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本文主要介紹Google 地圖疊加層,這里幫大家整理了Google地圖疊加層一些實用代碼并詳細介紹了相關(guān)知識，有需要的小伙伴可以參考下2016-08-08
這篇文章主要為大家介紹了Fabric.js 實現(xiàn)變換視窗示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要為大家介紹了JS 實現(xiàn)偽3D手辦模型展臺示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了TypeScript枚舉類型，所謂的枚舉類型就是為一組數(shù)值賦予名字，下面我們來看看文章是怎么介紹的吧,需要的小伙伴也可以參考一下，希望對你有所幫助2021-12-12
這篇文章主要為大家介紹了Web Worker線程解決方案electron踩坑記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
關(guān)于JavaScript?中?if包含逗號表達式
這篇文章主要介紹了?關(guān)于JavaScript?中?if包含逗號表達式，有時會看到JavaScript中if判斷里包含英文逗號?“,”，這個是其實是逗號表達式。在if條件里，只有最后一個表達式起判斷作用。下面來看看文章的具體介紹吧2021-11-11
這篇文章主要為大家介紹了前端項目中監(jiān)聽localStorage的變化的解決思路詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06