前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)

本文主要是介绍前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

前言

在项目开发中,我们经常会使用一些工具函数,也经常会用到例如loadsh等工具库,但是这些工具库的体积往往比较大,如果项目本身已经引入了这些工具库,那么我们就没有必要再引入一次,所以我们需要自己封装一些工具函数,来简化我们的开发。

一、通用类工具函数

src/utils目录下创建tools文件夹,用于存放通用类工具函数文件。
tools文件下创建index.ts文件

import { ElMessage, MessageHandler } from 'element-plus'/*** @description 文档注册enter事件* @param {Function} cb* @return {void}*/
export function handleEnter(cb: Function): void {if (typeof cb !== 'function')returndocument.onkeydown = (e) => {const ev: KeyboardEventInit = e || window.eventconst keyCode = ev.code || ev.keyCodeif (keyCode === 'Enter' || keyCode === 13)cb()}
}/*** @description 日期格式化* @param {string | number} time {string like:{y}-{m}-{d} {h}:{i}:{s} } pattern* @return {string}*/
export function parseTime(time: string | number, pattern: string) {if (arguments.length === 0 || !time)return nullconst format = pattern || '{y}-{m}-{d}'let dateif (typeof time === 'object') {date = time}else {if (typeof time === 'string' && /^[0-9]+$/.test(time)) {time = Number.parseInt(time)}else if (typeof time === 'string') {time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '')}if (typeof time === 'number' && time.toString().length === 10)time = time * 1000date = new Date(time)}const formatObj: Record<string, string> = {y: date.getFullYear(), // 年m: date.getMonth() + 1, // 月d: date.getDate(), // 日h: date.getHours(), // 时i: date.getMinutes(), // 分s: date.getSeconds(), // 秒a: date.getDay(), // 星期几}const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {let value = formatObj[key]// 注意:getDay()返回的是0表示星期天if (key === 'a')return ['日', '一', '二', '三', '四', '五', '六'][value]if (result.length > 0 && Number(value) < 10)value = `0${value}`return value || 0})return time_str
}/*** @description trim函数* @param {string} str* @return {string}*/
export function trim(str: string): string {return str.replace(/^\s+|\s+$/g, '') // 去除字符串两端的空格
}/*** @description uuid的生成* @return {string}*/
/*** @description 生成UUID* @return {string}*/
export function getUUID(): string {const s: string[] = []const hexDigits = '0123456789abcdef'for (let i = 0; i < 36; i++) {s[i] = hexDigits[Math.floor(Math.random() * 0x10)]}s[14] = '4's[19] = hexDigits[(parseInt(s[19], 16) & 0x3) | 0x8]s[8] = s[13] = s[18] = s[23] = '-'const uuid = s.join('')return uuid
}
// 38673f6b-bacc-4d9b-9330-dd97b7ae238f/*** @description 千分位* @param {string | number} num* @return {void}*/
export function addThousand(num: string | number): string {if (num)num = Number(num).toFixed(2)if ((!num && num !== 0) || num == 'NaN')return '--'const regForm = /(\d{1,3})(?=(\d{3})+(?:$|\.))/gnum = num.toString().replace(regForm, '$1,')return num
}/*** @description 大数值转换和保留n位有效数字* @param {number} num {number} digits* @return {string}*/
export function numberFormatter(num: number, digits: number | undefined): string {const si = [{ value: 1e13, symbol: '亿亿' },{ value: 1e12, symbol: '万亿' },{ value: 1e11, symbol: '千亿' },{ value: 1e10, symbol: '百亿' },{ value: 1e9, symbol: '十亿' },{ value: 1e8, symbol: '亿' },{ value: 1e7, symbol: '千万' },{ value: 1e6, symbol: '百万' },{ value: 1e5, symbol: '十万' },{ value: 1e4, symbol: '万' },{ value: 1e3, symbol: '千' },]for (let i = 0; i < si.length; i++) {if (num >= si[i].value)return (num / si[i].value).toFixed(digits).replace(/\.0+$|(\.[0-9]*[1-9])0+$/, '$1') + si[i].symbol}return num.toString()
}/*** @description 复制方法* @param {string} value 传入要复制的值* @return {string | MessageHandler}*/
export const copy = (value: string): string | MessageHandler => {if (!value)return ElMessage.error('复制失败')const tag = document.createElement('textarea')tag.value = valuedocument.body.appendChild(tag)tag.select()document.execCommand('copy')ElMessage.success('复制成功')tag.remove()return value
}/*** @description 防抖* @param {number} timer* @return {function}*/
export function debounce(timer = 0): (callback: unknown, delay: number) => void {return (callback: unknown, delay: number) => {if (timer)clearTimeout(timer)if (typeof callback === 'function')timer = setTimeout(callback, delay)}
}/*** @description 节流* @param {number} timer* @return {function}*/
export const throttle: (fn: (...args: unknown[]) => void, timer: number) => (...args: unknown[]) => void = (fn, timer = 0) => {let time: number | null = nullreturn (...args: unknown[]) => {if (time)clearTimeout(time)time = setTimeout(() => {fn.apply(this, args)}, timer)}
}

二、文件相关函数

tools文件下创建blobType.ts文件

export const blobType: Record<string, string> = {'aac': 'image/audio/aac','abw': 'application/x-abiword','arc': 'application/x-freearc','avi': 'video/x-msvideo','azw': 'application/vnd.amazon.ebook','bin': 'application/octet-stream','bmp': 'image/bmp','bz': 'application/x-bzip','bz2': 'application/x-bzip2','csh': 'application/x-csh','css': 'text/css','csv': 'text/csv','doc': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document','docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document','eot': 'application/vnd.ms-fontobject','epub': 'application/epub+zip','exe': 'application/x-msdownload','gif': 'image/gif','htm': 'text/html','html': 'text/html','ico': 'image/vnd.microsoft.icon','ics': 'text/calendar','jar': 'application/java-archive','jpeg': 'image/jpeg','jpg': 'image/jpeg','js': 'text/javascript','json': 'application/json','jsonld': 'application/ld+json','mid': 'audio/midi audio/x-midi','midi': 'audio/midi audio/x-midi','mjs': 'text/javascript','mp3': 'audio/mpeg','mpeg': 'video/mpeg','mpkg': 'application/vnd.apple.installer+xml','odp': 'application/vnd.oasis.opendocument.presentation','ods': 'application/vnd.oasis.opendocument.spreadsheet','odt': 'application/vnd.oasis.opendocument.text','oga': 'audio/ogg','ogv': 'video/ogg','ogx': 'application/ogg','otf': 'font/otf','png': 'image/png','pdf': 'application/pdf','ppt': 'application/vnd.ms-powerpoint','pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation','rar': 'application/x-rar-compressed','rtf': 'application/rtf','sh': 'ima','svg': 'image/svg+xml','swf': 'application/x-shockwave-flash','tar': 'application/x-tar','tif': 'image/tiff','tiff': 'image/tiff','ttf': 'font/ttf','txt': 'text/plain','vsd': 'application/vnd.visio','wav': 'audio/wav','weba': 'audio/webm','webm': 'video/webm','webp': 'image/webp','woff': 'font/woff','woff2': 'font/woff2','xhtml': 'application/xhtml+xml','xls': 'application/vnd.ms-excel','xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet','xml': 'text/xml','xul': 'application/vnd.mozilla.xul+xml','zip': 'application/zip','3gp': 'video/3gpp','3g2': 'video/3gpp2','7z': 'application/x-7z-compressed',
}

tools文件下创建file.ts文件

import { ElMessage } from 'element-plus'
import { blobType } from './blobType'export function download(file: any, fileType: string, fileName?: string) {if (!fileName) {const timeStr = new Date().getTime()fileName = `${timeStr}`}const type = formatFileType(fileType)if (!type)return ElMessage.warning('暂不支持此格式!')const blob = new Blob([file], { type })const downloadElement = document.createElement('a')const href = window.URL.createObjectURL(blob) // 创建下载的链接downloadElement.href = hrefdownloadElement.download = fileName // 下载后文件名document.body.appendChild(downloadElement)downloadElement.click() // 点击下载document.body.removeChild(downloadElement) // 下载完成移除元素window.URL.revokeObjectURL(href) // 释放掉blob对象
}export function formatFileType(fileFormat: string) {return blobType[fileFormat]
}export function blobToFileReader(blob: any, callback: any) {if (!blob.size)return ElMessage.warning('暂无资源!')if (blob.type !== 'application/json')return callback(blob)const fr: any = new FileReader()fr.onloadend = function () {try {callback(JSON.parse(fr.result))}catch (err) {ElMessage.warning('资源数据有误!')}}fr.readAsText(blob)
}

三、存储相关函数

src/utils目录下创建cache文件夹,用于存放存储类工具函数文件。
cache文件夹下创建index.ts文件

/*** window.localStorage 浏览器永久缓存* @method set 设置永久缓存* @method get 获取永久缓存* @method remove 移除永久缓存* @method clear 移除全部永久缓存*/
export const Local = {// 设置永久缓存set(key: string, val: any) {window.localStorage.setItem(key, JSON.stringify(val))},// 获取永久缓存get(key: string) {const json: any = window.localStorage.getItem(key)return JSON.parse(json)},// 移除永久缓存remove(key: string) {window.localStorage.removeItem(key)},// 移除全部永久缓存clear() {window.localStorage.clear()},
}/*** window.sessionStorage 浏览器临时缓存* @method set 设置临时缓存* @method get 获取临时缓存* @method remove 移除临时缓存* @method clear 移除全部临时缓存*/
export const Session = {// 设置临时缓存set(key: string, val: any) {window.sessionStorage.setItem(key, JSON.stringify(val))},// 获取临时缓存get(key: string) {const json: any = window.sessionStorage.getItem(key)return JSON.parse(json)},// 移除临时缓存remove(key: string) {window.sessionStorage.removeItem(key)},// 移除全部临时缓存clear() {window.sessionStorage.clear()},
}

在这里插入图片描述

总结

工具函数的封装,可以提高代码的复用性,降低维护成本,本文只是介绍了一小部分工具函数的封装,更多的工具函数的封装,可以参考lodash等函数工具库,也可以根据实际需求,封装自己的工具函数。上文中的配置代码可在 github 仓库中直接 copy,仓库路径:https://github.com/SmallTeddy/ProjectConstructionHub。

写在最后

经过一段时间的整理和书写,前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章已经全部更新完了,感谢各位小伙伴的支持与厚爱,文章中可能有一些依赖部分会有所更新,最后依赖版本号请参考仓库中的地址进行对照。前端道路道阻且长,富而杂,多而繁,请各位取长补短,各自努力绽放。

这篇关于前端新手Vue3+Vite+Ts+Pinia+Sass项目指北系列文章 —— 第十二章 常用工具函数 (Utils配置)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/727807

相关文章

IntelliJ IDEA 中配置 Spring MVC 环境的详细步骤及问题解决

《IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决》:本文主要介绍IntelliJIDEA中配置SpringMVC环境的详细步骤及问题解决,本文分步骤结合实例给大... 目录步骤 1:创建 Maven Web 项目步骤 2:添加 Spring MVC 依赖1、保存后执行2、将新的依赖

Python的time模块一些常用功能(各种与时间相关的函数)

《Python的time模块一些常用功能(各种与时间相关的函数)》Python的time模块提供了各种与时间相关的函数,包括获取当前时间、处理时间间隔、执行时间测量等,:本文主要介绍Python的... 目录1. 获取当前时间2. 时间格式化3. 延时执行4. 时间戳运算5. 计算代码执行时间6. 转换为指

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

SpringBoot项目中报错The field screenShot exceeds its maximum permitted size of 1048576 bytes.的问题及解决

《SpringBoot项目中报错ThefieldscreenShotexceedsitsmaximumpermittedsizeof1048576bytes.的问题及解决》这篇文章... 目录项目场景问题描述原因分析解决方案总结项目场景javascript提示:项目相关背景:项目场景:基于Spring

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

如何为Yarn配置国内源的详细教程

《如何为Yarn配置国内源的详细教程》在使用Yarn进行项目开发时,由于网络原因,直接使用官方源可能会导致下载速度慢或连接失败,配置国内源可以显著提高包的下载速度和稳定性,本文将详细介绍如何为Yarn... 目录一、查询当前使用的镜像源二、设置国内源1. 设置为淘宝镜像源2. 设置为其他国内源三、还原为官方

Python正则表达式语法及re模块中的常用函数详解

《Python正则表达式语法及re模块中的常用函数详解》这篇文章主要给大家介绍了关于Python正则表达式语法及re模块中常用函数的相关资料,正则表达式是一种强大的字符串处理工具,可以用于匹配、切分、... 目录概念、作用和步骤语法re模块中的常用函数总结 概念、作用和步骤概念: 本身也是一个字符串,其中

CentOS7更改默认SSH端口与配置指南

《CentOS7更改默认SSH端口与配置指南》SSH是Linux服务器远程管理的核心工具,其默认监听端口为22,由于端口22众所周知,这也使得服务器容易受到自动化扫描和暴力破解攻击,本文将系统性地介绍... 目录引言为什么要更改 SSH 默认端口?步骤详解:如何更改 Centos 7 的 SSH 默认端口1

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H