学习ts(十一)本地存储与发布订阅模式

localStorage实现过期时间

目录

准备

安装

js 复制代码
npm i rollup typescript rollup-plugin-typescript2
js 复制代码
// tsconfig.json
 "module": "ESNext",
 "moduleResolution": "node",    
 "strict": false,     
js 复制代码
// rollup.config.js
import ts from 'rollup-plugin-typescript2'
import path from 'path'
import { fileURLToPath } from 'url'
const mateUrl = fileURLToPath(import.meta.url)
const dirName = path.dirname(mateUrl)
export default {
    input: "./src/index.ts",
    output: {
        file: path.resolve(dirName, './dist/index.js')
    },
    plugins:[
        ts()
    ]
}

开发

js 复制代码
// enum/index.ts
export enum Dictionaries {
    permanent = 'permanent',  //永久
    expire = '__expire__'
}
js 复制代码
// type/index.ts
import { Dictionaries } from "../enum"

export type Expire = Dictionaries.permanent | number //传递永久或者时间戳
export type Key = string

export interface StorageCls {
    get: <T>(key: Key) => void
    set: <T>(key: Key, value: T, expire: Expire) => void
    remove: (key: Key) => void
    clear: () => void
}
export interface Data<T> {
    value: T,
    [Dictionaries.expire]: Expire
}
export interface Result<T> {
    message: string,
    value: T | null
}
js 复制代码
// index.ts
import { Key, StorageCls, Expire, Data, Result } from "./type";
import { Dictionaries } from "./enum"
export class Storage implements StorageCls {
    get<T>(key: Key):Result<T | null> {
        const value = localStorage.getItem(key)

        if (value) {
            const data = JSON.parse(value)
            const now = new Date().getTime()
            // 过期
            if (typeof data[Dictionaries.expire] == 'number' && data[Dictionaries.expire] < now) {
                this.remove(key)
                return {
                    message: `您的 ${key}已过期`,
                    value: null
                }
            } else {
                return {
                    message: `成功`,
                    value: data.value
                }
            }
        } else {
            return {
                message: '值无效',
                value: null
            }
        }
    }
    set<T>(key: Key, value: T, expire: Expire): void {
        const data: Data<T> = {
            value,
            [Dictionaries.expire]: expire
        }
        localStorage.setItem(key, JSON.stringify(data))
    }

    remove(key: Key) {
        localStorage.removeItem(key)
    }
    clear() {
        localStorage.clear()
    };

}

测试

js 复制代码
<script type="module">
        import {Storage} from './dist/index.js'
        let s = new Storage()
        s.set('test','orange',new Date().getTime()+3000)
        // setInterval(()=>{
        //     console.log(s.get('test'))
        // },1000)
    </script>

发布订阅模式

js 复制代码
type Key = string
interface EventInit {
    on: (key: Key, fn: Function) => void
    emit: (key: Key, ...args: Array<any>) => void
    off: (key: Key, fn: Function) => void
    once: (key: Key, fn: Function) => void
}

interface List {
    [key: string]: Array<Function>
}

class Dispatch implements EventInit {
    list: List
    constructor() {
        this.list = {}
    }
    on(key: Key, fn: Function) {
        const callback = this.list[key] || []
        callback.push(fn)
        this.list[key] = callback
        // console.log(this.list)
    }
    emit(key: Key, ...args: Array<any>) {
        if (this.list[key] && this.list[key].length > 0) {
            this.list[key].forEach(item => {
                item.apply(this, args)
            })
        } else {
            console.error('名称错误')
        }

    }
    off(key: Key, fn: Function) {
        if (this.list[key] && this.list[key].length > 0) {
            let index = this.list[key].findIndex(i => i === fn)
            if (index > -1) {
                this.list[key].splice(index, 1)
            } else {
                console.error(`方法不存在`)
            }
        } else {
            console.error(`名称错误${key}`)
        }
    }
    once(key: Key, fn: Function) {
        let tempFn = (...args: Array<any>) => {
            fn.apply(this, args)
            this.off(key, tempFn)
        }
        this.on(key, tempFn)
    }
}
const o = new Dispatch()
o.on('post', (...args) => {
    console.log(args)
})
o.on('post', (...args) => {
    console.log(args)
})
o.on('put', (...args) => {
    console.log(args)
})
let fn = (...args) => {
    console.log(args)
}
// o.on('get', fn)
o.once('get', fn)
o.emit('get', fn)
o.emit('get', fn)
// o.emit('put', 1, '373', { name: 'hello' })
// o.off('get', fn)
// o.emit('get', 2, '373', { name: 'hello' })
相关推荐
10年前端老司机2 分钟前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程4 小时前
2025前端面试题
前端·面试
西西西仓鼠4 小时前
python学习打卡:DAY 40 训练和测试的规范写法
学习
Magnetic_h5 小时前
【iOS】方法与消息底层分析
笔记·学习·macos·ios·objective-c·cocoa
今天背单词了吗9805 小时前
算法学习笔记:19.牛顿迭代法——从原理到实战,涵盖 LeetCode 与考研 408 例题
笔记·学习·算法·牛顿迭代法
前端小趴菜055 小时前
React - createPortal
前端·vue.js·react.js
晓13136 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo6 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
DKPT6 小时前
Java设计模式之行为型模式(观察者模式)介绍与说明
java·笔记·学习·观察者模式·设计模式
烛阴7 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript