Thanks to visit codestin.com
Credit goes to github.com

Skip to content

infinitasx/easi-web-utils

Repository files navigation




EASI Web Utils

一个web端工具函数和类的集合

预装依赖

说明导航



EASIIndexDB

属性

Constructor传参
props type default required remark
databaseName string 数据库名称
options object 详细参数见下表,不传则不会创建任何表,只会创建数据库
options
props type default required remark
version number 1 数据库版本,只能升不能降,不能是小数,不传默认为1
store storeOption[] [] 详细参数见下表,生成表的规则,数组每一项都是一个表配置
upgradeCallBack (this: EasiIndexDB实例, versionChangeEvent: 数据库变化对象,可拿到旧版本号和新版本号) => promise<void> 处理数据库升级事件的钩子函数,会在类操作数据库之前执行
storeOption
props type default required remark
storeName string 表名
options {autoIncrement: boolean, keyPath?: string} {autoIncrement: true} 表配置,autoIncrement:主键是否自增,keyPath:主键名称
indexOptions {name: string, key: string or string[], unique: boolean, multiEntry?: boolean}[] [] 给表添加额外的索引,name:索引名称,key:索引主键,unique:主键是否唯一,multiEntry:如果索引主键为数组,则会给数组内的主键都设置索引

Methods

添加单条数据

传入key则视为更新对应数据

add: (storeName: string, data: any, key?: IDBValidKey)=> Promise


删除数据

delete: (storeName: string, keyRange: IDBKeyRange | IDBValidKey)=> Promise


删除索引

name: 索引名称

deleteIndex: (storeName: string, name: string)=> Promise


清空表数据

clear: (storeName: string)=> Promise


更新数据

data 新的数据
key 要匹配的主键值,不传则视为新增

put: (storeName: string, data: any, key?: IDBKeyRange | IDBValidKey)=> Promise


获取数据

key 要匹配的主键值
name 索引的名称,如果不想匹配主键的值,而是匹配索引的值,此处传入索引的名称

get: (storeName: string, key: IDBKeyRange | IDBValidKey, name?: string)=> Promise


获取匹配的所有数据

key 要匹配的主键名称
keyRange 需要匹配主键的值
count 需要匹配的数量

getAll: (storeName: string, key?: string, keyRange?: IDBValidKey | IDBKeyRange | null, count?: number)=> Promise<any[]>


获取匹配的所有索引

keyRange 需要匹配主键的值
count 需要匹配的数量

getAllKeys: (storeName: string, keyRange?: IDBValidKey | IDBKeyRange | null, count?: number)=> Promise<any[]>


模糊查询

keyword 需要匹配的值,支持传入正则,字符串,数字和布尔值
keysField 需要匹配的键,只在数据为对象时才需要传入,如果传入的为数组,则会匹配对象内对应键的值

elasticSearch: (storeName: string, keyword: RegExp | string | number | boolean, keysField?: string | string[])=> Promise<any[]>


获取数据总条数

keyRange 需要匹配主键的值

count: (storeName: string, keyRange: IDBKeyRange)=> Promise


获取表索引对象

name 索引名称

index: (storeName: string, name: string)=> Promise


如何使用

import { EASIIndexDB } from './lib/index'

// 初始化数据库
const db = new EASIIndexDB('mydb', {
  version: 1,
  store: [
    {
      storeName: 'test', // 表名
      indexOptions: [
        {
          name: 'index', // 索引名称
          key: 'index', // 索引键
          unique: false, // 是否唯一
        }
      ]
    },
  ],
});

// 做一些操作
async function doSomething(primaryKey){
  // 直接通过表名添加数据
  await db.$mydb.add('这是存入的数据0')

  // 通过传入表名添加数据
  await db.add('mydb', '这是存入的数据1')

  // 直接通过表名获取数据
  const data0 = await db.$mydb.get(primaryKey)
  console.log(data0)

  // 通过传入表名获取数据
  const data1 = await db.get('mydb', primaryKey)
  console.log(data1)
}

doSomething()


useDB

自组件内使用indexdb,使用此函数,必须确保已经在Vue内注册了indexDB实例

如何使用

在main.ts内初始化indexdb,并挂载到Vue实例内

// main.ts

import { createApp } from 'vue'
import App from 'App.vue'
import { EASIIndexDBPlugin } from '.lib/index'

createApp(App).use(EASIIndexDBPlugin, {
  databaseName: 'myDB',
  // 具体参数见 IndexDB工具类
  options: {
    version: 1,
    store: [
      {
        storeName: 'test1'
      }
    ]
  }
})

在需要调用indexDB的组件内使用useDB,会返回Vue实例内挂载的indexDB实例

import { useDB } from "./lib/index";

export default {
  setup() {
    const db = useDB();
    const getData = async () => {
      return await db.$test1.get(1)
    }
  }
}


操作cookie / localStorage / sessionStorage

均可设置有效期,单位毫秒

如何使用

import { setLocal, getLocal, clearLocal, removeLocal, setSession, getSession, clearSession, removeSession, setCookie, getCookie, removeCookie } from './lib/index'

// 保存一个小时有效期的token,不传第三个参数则默认永久有效,sessionStorage除外
setLocal('token', token, 60 * 60 * 1000)
setSession('token', token, 60 * 60 * 1000)
setCookie('token', token, 60 * 60 * 1000)

// 读取token, 如果超过有效期或无数据会返回空。数据类型与存入时一致,===有效
getLocal('token')
getSession('token')
getCookie('token')

// 删除某一个key
removeLocal('token')
removeSession('token')
removeCookie('token')

// 清空所有数据,Cookie暂未实现全部清除
clearLocal()
clearSession()


App嵌套H5常用工具函数

openAppWeb

打开 App内 web/help地址

如何使用

interface IToAppWebOption {
  scheme: string; // App schema
  title: string; // 标题
  url: string; // 链接地址
  show: unknown;
}
function openAppWeb({scheme = 'au.com.easi.courier', title, url, show}: IToAppWebOption): void{}


openAppView

打开 App原生页面

如何使用

function openAppView(path: string, scheme = 'au.com.easi.customer'): void{}


compareVersion

判断App版本号,目前只支持用户端App

如何使用

// targetVersion: 需要判断的最低版本号,如果高于此版本号则返回true
function compareVersion(targetVersion: string, ua: string = navigator.userAgent.toLowerCase()): boolean {}


compareUserAgent

判断App userAgent是否合法,如果合法则返回true

如何使用

/*
 * 需要判断的客户端打开环境
 * 'easi': 所有EasiApp
 * 'easicustomer': Easi用户App内打开
 * 'easimalaysia': Easi Malaysia用户App内打开(仅针对马来西亚用户App)
 * 'easicourier': Easi配送员App内打开(含马来西亚)
 * 'easimerchant':Easi 商家端App内打开
 * 'easimerchantmalaysia':Easi Malaysia商家端App内打开(仅针对马来西亚商家App)
 *  */
type IClientType = 'easi' | 'easicustomer' | 'easimalaysia' | 'easicourier' | 'easimerchant' | 'easimerchantmalaysia'

// targetVersion: 需要判断的最低版本号,如果高于此版本号则返回true
function compareUserAgent(clientTypeArray: IClientType[] = [], ua = navigator.userAgent.toLowerCase()): boolean {}


通用工具函数

createWorker

创建一个web worker线程

如何使用

// 函数返回子线程返回的数据
function createWorker(
        func: () => void, // 子线程执行的函数
        data: any, // 传递给子线程的数据,必须是可拷贝的对象,如果是vue代理的对象需要还原成原始对象
        backUpFunc?: (data: any) => any, // 如果浏览器不支持web worker,执行的函数,一般不传
): Promise<any> {}


loadScript

动态加载js资源

如何使用

// link: js资源的链接地址
// id: 给这个js资源一个唯一的标示,避免重复加载
function loadScript(link: string, id: string): Promise<void>{}


debounced

防抖函数

如何使用

// func: 要执行的函数
// delay: 延迟执行时间
// immediate: 是否立即执行
function debounced(func: () => void, delay = 200, immediate = false): () => void {}


isMobile

判断当前是否是移动端环境,如果是则返回true

如何使用

function isMobile(): boolean {}


copy

一键复制,复制成功则返回true

如何使用

function copy(
        content: string, // 要复制的文案
        container: HTMLElement = document.querySelector('body') as HTMLElement, // 如果文案是在弹框中,请传入弹框的Dom对象
): boolean {}

About

web端常用的工具函数

Resources

Stars

Watchers

Forks

Packages

No packages published