学习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 分钟前
Java 黑马程序员学习笔记(进阶篇6)
java·笔记·学习·学习笔记
qq_124987075327 分钟前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
Alice-YUE39 分钟前
【css学习笔记8】html5css3新特性
css·笔记·学习
袁煦丞1 小时前
9.12 Halo的“傻瓜建站魔法”:cpolar内网穿透实验室第637个成功挑战
前端·程序员·远程工作
universe_011 小时前
day27|前端框架学习
前端·笔记
沙尘暴炒饭1 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
有谁看见我的剑了?1 小时前
k8s-Sidecar容器学习
学习·容器·kubernetes
百思可瑞教育2 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
yinuo2 小时前
Uni-App跨端实战:APP的WebView与H5通信全流程解析(03)
前端
沐墨专攻技术2 小时前
二、网页的“化妆师”:从零学习 CSS
css·笔记·学习