学习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' })
相关推荐
ooo-p8 分钟前
FPGA学习篇——Verilog学习之分频器的实现
学习·fpga开发
JarvanMo11 分钟前
请停止用 Java 习惯来破坏你的 Flutter 代码
前端
Miki Makimura13 分钟前
UDP可靠性传输指南:从基础机制到KCP协议核心解析
网络·网络协议·学习·udp
超级神性造梦机器20 分钟前
当“提示词工程”过时,谁来帮开发者管好 AI 的“注意力”?
前端·后端
被巨款砸中21 分钟前
Jessibuca 播放器
前端·javascript·vue.js·web
吃饺子不吃馅23 分钟前
小明问:要不要加入创业公司?
前端·面试·github
不渡_26 分钟前
Web项目-版本号
前端·javascript
Asort27 分钟前
JavaScript设计模式(十一):享元模式(Flyweight) - 优化内存与性能的利器
前端·javascript·设计模式
Asort27 分钟前
JavaScript设计模式(十)——外观模式 (Facade)
前端·javascript·设计模式
创码小奇客27 分钟前
前端小白从零到一:架构师视角下的学习路线与实战指南
前端·javascript·架构