快捷導(dǎo)航

Vue3+Ts實(shí)現(xiàn)緩存功能的示例代碼

更新時(shí)間：2024年03月08日 11:09:11 作者：大陽(yáng)光男孩

這篇文章主要為大家詳細(xì)介紹了Vue3+Ts如何實(shí)現(xiàn)緩存,用戶(hù)搜索詞本地排名,延遲消費(fèi)或者消息隊(duì)列,用戶(hù)簽到和鎖,以及接口限流,還有全局ID等功能,需要的可以參考下

幫助類(lèi)具體代碼

import { onMounted, ref } from "vue";
import emitter from '@/utils/mitt'
 
interface Prop {
    exp: number;
    key: string;
    data: any;
    tag?: any;
}
 
 
 
export default function(){
 
    // 緩存的倉(cāng)庫(kù)
    let cacheStore  = ref( {} as Map< string, Prop >);
 
    // 用于本地排名
    let ranking = ref( {} as Map< string, any[] > );
 
    // 延遲隊(duì)列
    let delayMsg = ref( {} as Map< string, any[] > );
 
    // 用戶(hù)簽到打卡
    let sign = ref( {} as Map< string, any[] > );
 
    // 限流
    let limiting = ref( {} as Map< string, number> );
 
 
    function limit( key : string ) {
        if (limiting.value.has(key)) {
            let temp = limiting.value.get(key) as number;
            limiting.value.set(key,temp + 1);
        }else {
            limiting.value.set(key,1);
        }
    }
 
    function takeLimit( key : string ) : number {
        return limiting.value.get(key) as number;
    }
 
    function delLimit( key : string ) {
        limiting.value.delete(key);
    }
 
    // 放入打卡的數(shù)據(jù)
    function punchSetting( key : string , signInData : number[]) {
        sign.value.set(key,signInData);
    }
 
 
    // 打卡
    function startSign( key : string ,  day : number ): boolean {
        let signInData = sign.value.get(key) as any[];
        if (signInData) {
            signInData.splice(day - 1,1,1);
            return true;
        }
        return false;
    }
 
    // 返回連續(xù)打卡的天數(shù)
    function continuousClocking( key : string ) : number {
       if(sign.value.size > 0) {
           let signInData = sign.value.get(key) as any[];
           if (signInData) {
               let day = 1;
               let continuous : any[] = [];
               signInData.forEach( (value, index) => {
                   if(signInData[index] === signInData[index+1] && value ==1) {
                       day++;
                   }else {
                       continuous.push(day);
                       day = 1;
                   }
               });
               return Math.max.apply(null,continuous);
           }
       }
       return 0;
    }
 
    function putDelayMsg( prop : Prop ) {
        prop.tag = getUUID();
        if (delayMsg.value.has(prop.key)) {
           let delayMsgs = delayMsg.value.get(prop.key) as any[];
           delayMsgs.push(prop);
           delayMsg.value.set(prop.key,delayMsgs);
        }else {
            let temp = [];
            temp.push(prop);
            delayMsg.value.set(prop.key,temp);
        }
    }
 
    onMounted(() => {
       cacheStore.value = new Map();
       ranking.value = new Map();
       delayMsg.value = new Map();
       sign.value = new Map();
       // 輪詢(xún)清除過(guò)期的緩存
       setInterval(() => {
            if(cacheStore.value.size > 0) {
                Array.from(cacheStore.value.keys()).forEach( key => {
                    let data = cacheStore.value.get(key);
                    if (data) {
                        let nowDate = new Date().valueOf();
                        if (data.exp < nowDate && data.exp != -1) {
                            cacheStore.value.delete(key);
                        }
                    }
                });
            }
       },100);
        // 發(fā)送過(guò)期消息讓Mitt進(jìn)行通知 emitter.on('xxx', e => {  console.log(e) } )
        setInterval(() => {
            if(delayMsg.value.size > 0) {
                Array.from(delayMsg.value.keys()).forEach( key => {
                    let temp = delayMsg.value.get(key) as any[];
                    temp.forEach( item => {
                        let nowDate = new Date().valueOf();
                        if( item.exp < nowDate - 100 ) {
                            emitter.emit(item.key, item.data);
                            temp = temp.filter( dispose  => dispose .tag != item.tag);
                            delayMsg.value.set(item.key,temp);
                        }
                    });
                })
            }
        },100);
    });
 
 
    function putRanking( key : string , data : any) {
        if(ranking.value.has(key)) {
           let rank  = ranking.value.get(key) as any[];
           let temp = rank.find(item => item.data === data);
           if(temp) {
               let newVal =  rank.filter(item => item.data !== data );
               newVal.push({ data: data.toString() , score : temp.score + 1 });
               ranking.value.set(key,newVal);
           }else {
               rank.push({ data: data.toString() , score : 1 });
               ranking.value.set(key,rank);
           }
        }else {
           let temp = [] as any[];
           temp.push({ data: data.toString() , score: 1 });
           ranking.value.set(key,temp);
        }
    }
 
    function takeRanking( key : string , total : number , desc : boolean): any[] {
        let rank = ranking.value.get(key) as any[];
        if(desc) {
            rank.sort( ( a , b ) => b.score - a.score );
        }else {
            rank.sort( ( a , b ) => a.score - b.score );
        }
        return rank.slice(0, total != 1 ? total - 1 : total);
    }
 
    // 放入緩存
    function putCache( prop : Prop ) {
        cacheStore.value.set(prop.key,prop);
    }
 
 
    // 獲取緩存
    function takeCache<T>( key : string ) : any {
        return cacheStore.value.get(key) as T;
    }
 
    // 加鎖
    function lock( prop : Prop ) : boolean {
        if (getLock(prop.key)) {
            return false;
        }
        cacheStore.value.set(prop.key,prop);
        return true;
    }
 
 
    // 獲取鎖
    function getLock( key : string ) : boolean {
        return cacheStore.value.has(key);
    }
 
    // 解鎖
    function unLock( key : string , id : any) {
        let lock = cacheStore.value.get(key);
        if( lock ) {
            if( lock.data == id ) {
                cacheStore.value.delete(key);
            }
        }
    }
 
 
    // 全局id
    function getUUID () {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            const r = Math.random() * 16 | 0
            const v = c === 'x' ? r : (r & 0x3 | 0x8)
            return v.toString(16)
        });
    }
 
    return { takeCache , putCache , unLock , lock , getLock , putRanking , takeRanking , getUUID , putDelayMsg , startSign , punchSetting , continuousClocking }
}

使用代碼

<template>
  <div style="display: flex;justify-content: center;align-items: center;height: 120px;gap: 12px">
    <button @click="getCache">獲取緩存</button>
    <button @click="getSearch">獲取前三搜索</button>
    <button @click="makeOrder">生成訂單</button>
    <button @click="initSign">初始打卡數(shù)據(jù)</button>
    <button @click="simulationSign">模擬打卡</button>
    <button>獲取練習(xí)打卡{{continuousClocking('3')}}</button>
  </div>
</template>
 
<style scoped>
    @import 'animate.css';
    .ske {
      display: flex;
      justify-content: center;
      align-items: center;
      animation: hinge;
      animation-duration: 3s;
    }
</style>
 
<script setup lang="ts">
 
 
    import { onMounted } from 'vue';
 
    import emitter from '@/utils/mitt'
 
    import CacheHelp from '@/hooks/CacheHelp'
 
    const { putCache , takeCache , putRanking , takeRanking ,  putDelayMsg , punchSetting , continuousClocking , startSign } = CacheHelp();
 
    onMounted(() => {
      putCache({ key: 'UserInfo' , data : { name: 'Jack' , age : 12 } , exp: new Date().valueOf() + 3000 });
      putRanking("word","成都");
      putRanking("word","北京");
      putRanking("word","成都");
      putRanking("word","重慶");
      putRanking("word","武漢");
      putRanking("word","北京");
      putRanking("word","成都");
      putRanking("word","上海");
    });
 
    function simulationSign() {
      startSign('3',2);
      startSign('3',3);
      startSign('3',4);
      startSign('3',12);
      startSign('3',13);
      startSign('3',14);
      startSign('3',15);
      startSign('3',16);
      startSign('3',18);
      startSign('3',31);
    }
 
 
 
    function getCache() {
      console.log(`獲取的緩存：${JSON.stringify(takeCache("UserInfo"))}`);
    }
 
    function getMonthDays( year : number, month : number ) : number {
      let days = [31,28,31,30,31,30,31,31,30,31,30,31]
      if ( ( year % 4 === 0 ) && ( year % 100 !== 0 || year % 400 === 0) ) {
        days[1] = 29
      }
      return days[month - 1];
    }
 
    function initSign() {
      let signData = []
      for (let i = 0; i < getMonthDays(2024,3); i++) {
        signData.push(0);
      }
      punchSetting('3',signData);
    }
 
    function getSearch() {
      console.log(`排名考前的緩存：${JSON.stringify(takeRanking('word',3,true))}`);
    }
 
    function makeOrder() {
        console.log(`發(fā)送的時(shí)間：${new Date().toLocaleTimeString()}`);
        putDelayMsg({ key: 'orderDelay' , data: { price :12.9 , id : 1 , name : '大衣' } , exp : new Date().valueOf() + 10000 });
        putDelayMsg({ key: 'orderDelay' , data: { price :15.9 , id : 2 , name : '短袖' } , exp : new Date().valueOf() + 10000 });
    }
 
    emitter.on("orderDelay",e => {
      console.log(`收到延遲消息：${JSON.stringify(e)}\t接收時(shí)間：${new Date().toLocaleTimeString()}`)
    })
 
 
 
</script>

效果