欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript策略模式利用對象鍵值的映射關(guān)系詳解

 更新時(shí)間：2022年12月22日 09:24:39   作者：qb  
這篇文章主要為大家介紹了JavaScript策略模式利用對象鍵值的映射關(guān)系詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

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

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

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

1、策略模式的極簡實(shí)現(xiàn)

通過對象的鍵值映射關(guān)系，定義策略和具體實(shí)現(xiàn)之間的關(guān)系：

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

其中，A、B和C指的策略名稱，xxx、yyy和zzz指的是具體函數(shù)（算法）。

2.策略模式的簡單案例

（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錯誤狀態(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é)

策略模式，可以利用對象的鍵值映射關(guān)系以及函數(shù)是一等公民的特性，以key來作為策略名稱，以函數(shù)作為值定義具體算法，利用這些javascript特性可以更為簡單的實(shí)現(xiàn)策略模式。

以上就是JavaScript策略模式利用對象鍵值的映射關(guān)系詳解的詳細(xì)內(nèi)容，更多關(guān)于JavaScript策略模式對象鍵值映射的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論