@yanxiaos/utils v1.0.0

utils

import {
  deepClone,
  debounce,
  nanoid
} from "@yanxiaos/utils/utils"

deepClone

传递一个对象或数组进行深拷贝，返回深拷贝后的内容

/**
 * @name: 深拷贝
 * @param v 被拷贝的数据
 * @return 返回拷贝后的数据
 */
export function deepClone<T=any>(v: T): T

debounce

返回一个防抖函数

/**
 * @name: 返回一个防抖函数
 * @description: 例: this.handlerOption = debounce(this.optionHandler, 100)
 * @param fn 函数
 * @param delay 防抖时间
 * @return 返回一个防抖函数
 */
export function deepClone<T extends Function>(fn: T, delay: number): T

生成随机id

/**
 * @name: 生成随机id
 * @description: 来源 https://github.com/ai/nanoid
 * @param t 生成id的位数
 * @return 随机id字符串
 */
export function nanoid(t: number = 21): string

checkType

import { CheckType } from "@yanxiaos/utils/checkType"

判断传入参数的类型，返回一个布尔值

queue

import { Queue, LifoQueue } from "@yanxiaos/utils/queue"

• Queue先进先出队列
• LifoQueue先进后出队列

示例

interface Msg {
  id: string
  data: string,
}
const query = new Queue<Msg>()
const lifoQueue = new LifoQueue<Msg>()

// 入列
query.put({
  id: '000000'
  data: 'hello world',
})
lifoQueue.put({
  id: '000000'
  data: 'hello world',
})

// 出列
query.get()
lifoQueue.get()

// 返回当前队列长度
query.getSize()
lifoQueue.getSize()

 // 判断队列是否为空
query.isEmpty()
lifoQueue.isEmpty()

// 清空队列
query.clear()
lifoQueue.clear()

storage

import { LocalStorage, SessionStorage } from "@yanxiaos/utils/storage"

操作缓存，封装了过期时间

• LocalStorage localStorage
• SessionStorage sessionStorage

示例：

// 设置缓存 name缓存名称，value缓存值，time过期时间（毫秒）
LocalStorage.set(name:string, value:unknown, time:number = 0): void
SessionStorage.set(name:string, value:unknown, time:number = 0): void

// 获取缓存
LocalStorage.get(name:string): unknown|null
SessionStorage.get(name:string): unknown|null

// 删除缓存
LocalStorage.remove(name:string): void
SessionStorage.remove(name:string): void

// 清空缓存
LocalStorage.clear(): void
SessionStorage.clear(): void

publisher

import { Publisher } from "@yanxiaos/utils/publisher"

• Publisher 发布订阅模式

示例

const publisher = new Publisher()

// 发布
publisher.emit('msg1','msg2')

// 订阅
function onMsg(msg1, msg2){}
publisher.on(onMsg)

// 取消订阅
publisher.off(onMsg)

// 清空订阅者
publisher.clear()

iframeMessage

import { IframeMessage, MsgType } from "@yanxiaos/utils/iframeMessage"
import type { MsgData, MsgBody, OnMessage } from "@yanxiaos/utils/iframeMessage"

为了方便使用，暴露出了以下类型

export enum MsgType {
    // 普通消息类型
    MESSAGE,
    // 需要回复的消息类型
    CB_MSG,
    // 为 需要回复的消息 进行回复的类型
    CALLBACK,
}

// 用户需传递的消息格式
export interface MsgData {
    type: string,
    msg: any
}

// 使用postMessage最终传递的消息格式
export interface MsgBody{
    msgType: MsgType,
    msgId: string
    msgData: MsgData,
}

// 用户监听消息的回调函数类型，msgData：消息内容，reply：调用它为这条消息进行回复
export type OnMessage = (msgData: MsgData, reply?:(msgData: MsgData)=>void)=>void

示例

创建对象 （构造函数 constructor(iframe?: HTMLIFrameElement, onMsg?: OnMessage)）

// 传递一个iframe标签元素，返回与iframe窗口通信的对象
const iframeMessage = new IframeMessage(iframe)
// 传递监听消息的回调函数 onMsg
const iframeMessage = new IframeMessage(
  iframe, 
  function(msgData: MsgData, reply?:(msgData: MsgData)=>void){}
)

// 不传递iframe标签，会返回一个与上级窗口通信的对象（window.top）
const iframeMessage = new IframeMessage()
// 不传递iframe标签，且传递一个监听消息的回调函数 onMsg
const iframeMessage = new IframeMessage(
  undefined,
	function(msgData: MsgData, reply?:(msgData: MsgData)=>void){}
)

实例方法

// 如果没有在构造参数传递消息的回调，那么可以覆盖实例方法的onMessage函数，可以达到同样的效果
iframeMessage.onMessage = function(msgData: MsgData, reply?:(msgData: MsgData)=>void){
  console.log('收到消息，类型为', msgData.type, '内容为', msgData.msg)
  // 调用回调函数（如果发送消息时传递了回调函数的话才能调用reply函数）
  reply && reply({
    type: '',
    msg: '消息我收到了'
  })
}

// 取消监听
iframeMessage.offMessage()

// 发送消息，消息类型为MsgData
iframeMessage.seedMessage({
  type: '消息类型',
  msg: 'hello'
})
// 发送消息，传递回调函数
iframeMessage.seedMessage({
  type: '消息类型',
  msg: 'hello'
}, function(msgData: MsgData){
  console.log('回调函数被调用，类型为', msgData.type, '内容为', msgData.msg)
})