JavaScript策略模式利用物件鍵值的對映關係詳解

2022-12-23 14:00:59

引言

策略模式指的是，定義一系列的演演算法，把它們一個個的封裝起來，通過傳遞一些引數，使他們可以相互替換。

舉個週末從家去咖啡館的例子：

從家去咖啡館，有跑步、騎行和漫步的方式。也就是說，從家到咖啡館，有三種策略可選擇。

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策略模式物件鍵值對映的資料請關注it145.com其它相關文章！

JavaScript策略模式利用物件鍵值的對映關係詳解

目錄

引言

1、策略模式的極簡實現

2.策略模式的簡單案例

（1）工具函數

（2）提示樣式

總結

熱門文章