前端新手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项目指北系列文章已经全部更新完了，感谢各位小伙伴的支持与厚爱，文章中可能有一些依赖部分会有所更新，最后依赖版本号请参考仓库中的地址进行对照。前端道路道阻且长，富而杂，多而繁，请各位取长补短，各自努力绽放。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/260388.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

如何利用Idea创建一个Servlet项目(新手向)

如何利用Idea创建一个Servlet项目(新手向)

&#x1f495;"Echo"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;如何利用Idea创建一个Servlet项目(新手向) Servlet是tomcat的api,利用Servlet进行webapp开发很方便,本文将介绍如何通过Idea创建一个Servlet项目(一共分为七步,这可能是我们写过的…
阅读更多...
微软和OpenAI将检查AI聊天记录，以寻找恶意账户

微软和OpenAI将检查AI聊天记录，以寻找恶意账户

据国外媒体报道&#xff0c;大型科技公司及其附属的网络安全、人工智能产品很可能会推出类似的安全研究&#xff0c;尽管这会引起用户极度地隐私担忧。大型语言模型被要求提供情报机构信息&#xff0c;并用于帮助修复脚本错误和开发代码以侵入系统&#xff0c;这将很可能会成为…
阅读更多...
用tensorflow模仿BP神经网络执行过程

用tensorflow模仿BP神经网络执行过程

文章目录 用矩阵运算仿真BP神经网络y relu ( (X․W ) b )y sigmoid ( (X․W ) b ) 以随机数产生Weight(W)与bais(b)placeholder 建立layer函数改进layer函数&#xff0c;使其能返回w和b github地址https://github.com/fz861062923/TensorFlow 用矩阵运算仿真BP神经网络 impo…
阅读更多...
路径相关树形dp——最长乘积链

路径相关树形dp——最长乘积链

路径相关树形dp——最长乘积链 问题描述 给定一棵树&#xff0c;树中包含n个结点&#xff0c;编号为1~n&#xff0c;以及n- 1条无向边&#xff0c;每条边都有一个权值。 现从树中任选一个点&#xff0c; 从该点出发&#xff0c;在不走回头路的情况下找出二条到其他点的路径&…
阅读更多...
keil5代码复制下来中文乱码

keil5代码复制下来中文乱码

在keil5中&#xff0c;显示正常&#xff0c;如果复制到其他编辑器&#xff0c;中文部分就乱码。 keil5中显示正常 复制到其他编辑器&#xff0c;中文乱码。 原因&#xff1a;编码格式不一样 解决办法&#xff1a;keil5中重新设置一下。 左边选择Edit&#xff0c;下面选择Conf…
阅读更多...
第3.3章：StarRocks数据导入--Stream Load

第3.3章：StarRocks数据导入--Stream Load

一、概述 Stream Load是StarRocks常见的数据导入方式&#xff0c;用户通过发送HTTP请求将本地文件或数据流导入至StarRocks中&#xff0c;该导入方式不依赖其他组件。 Stream Load作是一种同步导入方式&#xff0c;可以直接通过请求的返回值判断导入是否成功&#xff0c;无法手…
阅读更多...
考PMP真的有用吗？

考PMP真的有用吗？

在你决定考证之前&#xff0c;值得思考的是为什么要追求这个证书。是因为公司的需求&#xff1f;个人职业发展&#xff1f;还是受到了新闻报道或广告的影响&#xff0c;觉得PMP证书有价值&#xff0c;只是出于好奇想了解一下。这种情况下&#xff0c;很多人可能会表示&#xff…
阅读更多...
idea代码review工具Code Review Helper使用介绍

idea代码review工具Code Review Helper使用介绍

之前在团队里面遇到一个关于代码review的问题&#xff0c;使用gitlab自己的还是facebook的Phabricator&#xff0c;很难看到整体逻辑&#xff0c;因为业务逻辑代码可能不在这次改动范围内&#xff0c;在去源库中找不好找。针对这个刚需&#xff0c;在网上找了一个idea的代码工具…
阅读更多...
设计模式简介

设计模式简介

设计模式介绍: 设计模式是对大家实际工作中写的各种代码进行高层次抽象的总结&#xff0c;其中最出名的当属 Gang of Four&#xff08;GoF&#xff09;的分类了&#xff0c;他们将设计模式分类为 23 种经典的模式&#xff0c;根据用途我们又可以分为三大类&#xff0c;分别为创…
阅读更多...
openGauss 5.0.0全密态数据库应用小试

openGauss 5.0.0全密态数据库应用小试

前言 openGauss HCIA教材中&#xff0c;安全是一个重要的章节&#xff0c;在实际项目中&#xff0c;随着网络安全和信息安全形势的变化&#xff0c;企业也越来越重视数据库安全。去年在HALP内部进行openGauss培训时&#xff0c;安全特性就被学员们提出来要重点讲解&#xff0c…
阅读更多...
如何使用Docker搭建YesPlayMusic网易云音乐播放器并发布至公网访问

如何使用Docker搭建YesPlayMusic网易云音乐播放器并发布至公网访问

文章目录 1. 安装Docker2. 本地安装部署YesPlayMusic3. 安装cpolar内网穿透4. 固定YesPlayMusic公网地址 本篇文章讲解如何使用Docker搭建YesPlayMusic网易云音乐播放器&#xff0c;并且结合cpolar内网穿透实现公网访问音乐播放器。 YesPlayMusic是一款优秀的个人音乐播放器&am…
阅读更多...
Pandas数据库大揭秘：read_sql、to_sql 参数详解与实战篇【第81篇—Pandas数据库】

Pandas数据库大揭秘：read_sql、to_sql 参数详解与实战篇【第81篇—Pandas数据库】

Pandas数据库大揭秘&#xff1a;read_sql、to_sql 参数详解与实战篇 Pandas是Python中一流的数据处理库&#xff0c;而数据库则是数据存储和管理的核心。将两者结合使用&#xff0c;可以方便地实现数据的导入、导出和分析。本文将深入探讨Pandas中用于与数据库交互的两个关键方…
阅读更多...
【Go语言】Go项目工程管理

【Go语言】Go项目工程管理

GO 项目工程管理&#xff08;Go Modules&#xff09; Go 1.11 版本开始&#xff0c;官方提供了 Go Modules 进行项目管理&#xff0c;Go 1.13开始&#xff0c;Go项目默认使用 Go Modules 进行项目管理。 使用 Go Modules的好处是不再需要依赖 GOPATH&#xff0c;可以在任意位…
阅读更多...
JS逆向进阶篇【去哪儿旅行登录】【中篇-滑动轨迹破解补浏览器环境破参数】

JS逆向进阶篇【去哪儿旅行登录】【中篇-滑动轨迹破解补浏览器环境破参数】

目录&#xff1a; 每篇前言&#xff1a;0、整体分析1、逆向轨迹snapshot&#xff08;1&#xff09;分析&#xff1a;&#xff08;2&#xff09;Python轨迹生成&#xff1a;&#xff08;3&#xff09;AES加密&#xff1a;&#xff08;4&#xff09;轨迹加密&#xff1a;&#xf…
阅读更多...
机器学习中梯度下降法的缺点

机器学习中梯度下降法的缺点

机器学习中的梯度下降法是一种寻找函数最小值的优化算法&#xff0c;广泛应用于训练各种模型&#xff0c;尤其是在深度学习中。尽管其应用广泛&#xff0c;但梯度下降法也存在一些不可忽视的缺点&#xff1a; 1. 局部最小值和鞍点 局部最小值问题&#xff1a; 对于非凸函数&a…
阅读更多...
milvus insert数据在s3的存储

milvus insert数据在s3的存储

insert数据在s3的存储 对segment进行flush操作&#xff0c;会将数据持久化至s3对象存储。 相关核心代码位置: ibNode.flushManager.flushBufferData()主要代码在flushBufferData()函数。 代码位置:internal\datanode\flush_manager.go // flushBufferData notifies flush …
阅读更多...
【Docker】Docker存储卷

【Docker】Docker存储卷

文章目录 一、什么是存储卷二、为什么需要存储卷三、存储卷分类四、管理卷Volume创建卷方式一&#xff1a;Volume 命令操作方式二&#xff1a;-v 或者--mount 指定方式三&#xff1a;Dockerfile 匿名卷 操作案例Docker 命令创建管理卷Docker -v 创建管理卷Docker mount 创建管理…
阅读更多...
java中容易被忽视的toString()方法

java中容易被忽视的toString()方法

之前一直认为toString就是将数据转换成字符类型&#xff0c;直到最近写出了一个bug才对toString有了新的认识 不同数据类型&#xff0c;toString() 有不同的操作 定义一个student类&#xff0c;包含姓名 String类型、性别 String类型、年龄 int 类型、分数列表 String类型的li…
阅读更多...
适合tiktok运营的云手机需要满足什么条件？

适合tiktok运营的云手机需要满足什么条件？

TikTok作为一款全球热门的社交媒体平台&#xff0c;具有无限的市场潜力。然而&#xff0c;卖家在运营过程中常常会面临到视频0播、账号被降权、限流等问题&#xff0c;甚至可能因为多人同时使用一个IP而导致封号的风险。为了规避这些问题&#xff0c;越来越多的卖家将目光投向了…
阅读更多...
论UI的糟糕设计：以百度网盘为例

论UI的糟糕设计：以百度网盘为例

上面这一排鼠标一经过就会弹出来&#xff08;不是点才弹出来&#xff09;&#xff0c;然后挡住你的各种操作&#xff0c; 弹出来时你就必须等它消失&#xff0c;卡一下才能操作。 在用户顺畅地操作内容时&#xff0c;经常就卡一下、卡一下、卡一下…… 1、比如鼠标从下到上&am…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023