JavaScript策略模式利用對(duì)象鍵值的映射關(guān)系詳解
引言
策略模式指的是,定義一系列的算法,把它們一個(gè)個(gè)的封裝起來(lái),通過(guò)傳遞一些參數(shù),使他們可以相互替換。
舉個(gè)周末從家去咖啡館的例子:
從家去咖啡館,有跑步、騎行和漫步的方式。也就是說(shuō),從家到咖啡館,有三種策略可選擇。
1、策略模式的極簡(jiǎn)實(shí)現(xiàn)
通過(guò)對(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)目搭建的過(guò)程中,可以通過(guò)策略模式,封裝常用的優(yōu)化函數(shù)防抖和節(jié)流。
const tools = { throttle: function (fn, time) { // ... }, debounce: function (fn,time) { // ... }, }
(2)提示樣式
vue
框架下頁(yè)面中的弱提示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
來(lái)作為策略名稱,以函數(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)文章
JQ中$(window).load和$(document).ready區(qū)別與執(zhí)行順序
JQ中的$(document).ready()大家應(yīng)該用的非常多,基本每個(gè)JS腳本中都有這個(gè)函數(shù)的出現(xiàn)有時(shí)甚至?xí)霈F(xiàn)多個(gè),那么另一個(gè)加載函數(shù)$(window).load相對(duì)出現(xiàn)的次數(shù)就很少了,下面為大家介紹一下兩者的區(qū)別與他們的執(zhí)行順序2017-03-03微信小程序之前臺(tái)循環(huán)數(shù)據(jù)綁定
這篇文章主要介紹了微信小程序之前臺(tái)循環(huán)數(shù)據(jù)綁定的相關(guān)資料,這里提供實(shí)例幫助大家學(xué)習(xí)理解這部分內(nèi)容,需要的朋友可以參考下2017-08-08經(jīng)典的帶陰影的可拖動(dòng)的浮動(dòng)層
經(jīng)典的帶陰影的可拖動(dòng)的浮動(dòng)層...2006-06-06微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)(一)
這篇文章主要介紹了微信小程序上滑加載下拉刷新(onscrollLower)分批加載數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2017-05-05