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