前端工具函数库

背景

对于前端项目中的通用逻辑和通用场景，应该使用统一的来源与解决方案，屏蔽实现差异、保障质量，同时避免重复开发，提高开发效率。

现有能力和更新计划

现有能力：

缓存管理、节流、防抖工具函数

更新计划：

• 增加日期处理、链接处理工具函数；
• 增加枚举管理、错误码管理能力；

已在文档中明确列出的方法不会做破坏性变更，未放在文档中的方法存在未来不兼容的变更可能

引入和使用

引入

npm i web-general-tools -S

使用

import initWebGeneralTools from 'web-general-tools';

// 执行后，会在全局增加wgt变量，即可全局使用
initWebGeneralTools(config);

// 具体业务调用API
wgt.${模块名}.${模块工具函数}

config 参数

interface config {
	debugOpen: boolean; // 全局Debug开关，具体参考wgt.debug.wrapper
}

API 文档

API 分类如下，持续更新中：

• wgt.storage： 存储能力
• wgt.debug: 调试工具
• wgt.router: 路由及链接工具
• wgt.util: 常用工具函数，如 throttle/debounce

wgt.storage 存储能力的封装，用于设置缓存或持久化存储。

• wgt.storage.appendPersistent(storageKey: string, expireTimestamp: number)： 追加到持久化存储，也可以设置过期时间
• wgt.storage.removePersistKey(storageKey: string): 从持久化存储中移除
• wgt.storage.getPersistentKeys(): 获取持久化存储的 key 列表
• wgt.storage.get(key: string): 获取存储的数据
• wgt.storage.set(key: string, value: string, options: optionsConfig): 设置存储的数据

interface optionConfig {
	persistent: number // 是否持久化存储，0则为持久化存储，否则为指定过期时间，单位为s）
}

• wgt.storage.remove(key: string): 删除存储的指定数据
• wgt.storage.clear(): 清理数据，但会保留持久存储的数据
• wgt.storage.purge(): 彻底清空所有数据

wgt.debug 调试工具，包含全局切换调试模式的开关等能力

• wgt.debug.wrapper(fn: function)： 全局 Debug 开关，传递给 wrapper 的函数仅在全局 debugOpen 为 true 时才执行

initWebGeneralTools({
	debugOpen: true // 开启Debug
})

wgt.debug.wrapper(() => {
	window.alert('一些不方便看到console的页面信息')
})

// 当需要关闭调试信息时，只需要将initWebGeneralTools初始化config中的debugOpen设置为false即可

wgt.router 路由及链接工具

• wgt.router.getQueryString(name: string, url: string = location.href): 获取 Url Query 中 name 对应的值

wgt.util 常用工具函数

• wgt.util.throttle(fn: function, time: number)： 函数节流，可手动设置间隔，单位为毫秒；返回节流处理后的函数

// Vue中节流使用示例
<button @click="throttleLoginBtn"></button>

data(){
	throttleLoginBtn: null
}

created: {
	this.throttleLoginBtn = wgt.util.throttle(fn)
}

• wgt.util.debounce(fn: function, time: number)： 函数防抖，可手动设置间隔，单位为毫秒；返回防抖处理后的函数
• wgt.util._turnFnListToThrottle(vueInstance, fnNameList: array, throttleTime: number)： 将 Vue 实例的 methods 对象中，fnNameList 对应的函数 throttle 处理，并将处理后的函数在原函数名称前加上 throttle 前缀注入到 Vue 实例的属性中，可以在 template 中直接调用。这个方法会带来和 Vue mixin 同样的问题，引入了非当前文件声明的变量，难以追溯和定位，因此，这个方法仅仅是 Vue 使用场景下的一个语法糖，谨慎使用。

// 直接在template中使用wgt实例
<button @click="throttleHandleClick"></button>

created: {
	wgt.util._turnFnListToThrottle(this, ['handleClick'], 1000)
}

methods: {
	handleClick(){}
}

• wgt.util.scrollHandler(id： string, autoScrollDelay: number = 0, behavior: string = "instant")：页面滚动位置记录和自动滚动逻辑的封装

  • id：页面唯一 id，需手动设置，且保证项目内唯一
  • autoScrollDelay：页面打开时自动滚动到上次访问位置的延时，若小于 0 则不自动滚动
  • behavior: 滚动行为，即 window.scrollTo 中的 behevior。instant：直接切换到滚动位置，无滚动动画；smooth：存在滚动动画效果