适用于React且支持渲染svg字符串的图标组件
svg图标可以直接从icones.js一键获取某个图标库的所有图标，并且有多种格式可以下载。为了方便拓展这里我们使用json格式。因为拓展图标只需要将svg字符串加到我们的json文件内，所以你的图标库理论上可以非常非常丰富。具体操作如下：找到自己喜欢的图标库之后，点击右上角的菜单按钮然后点击json就会自动下载一个包含该图标库的json文件，里面带有改图标库的所有的图标的svg字符串。接下来完善
Uniapp蓝牙功能封装，不完善，暂勿使用
import { reactive, ref } from 'vue'; import BtErrorMap from '@/enums/bluetooth'; import Toast from '../utils/toast'; // #ifdef APP-PLUS | APP | APP-NVUE | APP-PLUS-NVUE const BluetoothAdapter : any =
适用于Vue、React、Angular、Ts和Js毫秒级计时器，包括正、倒计时
由于定时器精准度问题，根据设备性能的影响误差会存在 0～20ms ，所以需要结合自身的使用场景来决定能不能使用。此处实现使用的是 setInterval 定时器加上 performance.now() 来校准 setInterval 的误差。以下例举出了适用于各个框架的版本，可根据需求自行修改。Vue版本import { reactive } from 'vue'; export interfa
你写的深度克隆真的“深度”吗？
深度克隆是前端开发中无法避免的话题，几乎每个前端开发者都遇到过这个话题，那我们就来看看你写的深度克隆真的正确吗？大家先看下面这段代码：/** * 我是最强的深度克隆 */ const deepClone = (obj: any) => { return JSON.parse(JSON.stringify(obj)) }平时开发中用这个方法或者过去用过这个方法去“深度克隆”的同学请
如何降低代码耦合度，提升代码质量？
降低代码耦合度有许多好处，主要包括以下几个方面：1. 提高代码的可维护性低耦合度使得代码更加模块化，每个模块或组件相对独立。这样，在修改或修复某个模块时，不会对其他模块造成影响。代码变得更容易理解和维护。2. 提高代码的可测试性低耦合度允许你为每个模块编写独立的单元测试。因为模块之间的依赖性减少，测试某个模块时，可以使用模拟（mock）或桩（stub）来替代实际的依赖，这样测试就更加简单和有效。3
Vue3中组件使用ref时获取组件类型推导
我们在使用Vue3+ts开发时，常常会用到一些第三方组件库，比如Element-Plus UI、Navie UI等，这些UI框架中有些组件常常会暴露一些方法给我们便捷的去实现各种复杂的交互，我们经常会像下面这样去给组件定义一个ref去获取组件的实例：<template> <div> <el-drawer ref="drawerRef"
一个开箱即用的变量类型判断库
其中包括了一些日常开发中常用得到的函数工具默认是TypeScript版本，如需在js中使用去掉类型标注即可const opt = Object.prototype.toString; /** * 检查给定对象是否为数组。 */ export function isArray(obj: any): obj is any[] { return opt.call(obj) === '[obje
Vue3等比例缩放图片组件
今天遇到一个需求，设计需要我无论什么情况都要保持图片比例不变，于是顺手写了个这个组件，组件基于vue3+ts，其实核心代码就是那几句css<template> <div style="position: relative" :style="ratioStr"> <div style="posit
TypeScript中，如何利用数组生成一个联合类型
在开发中我们常常会遇到这样一个问题，代码如下：const arr = [ "a", "b", "c", "d", "e", "f", "g", "h", "i", "j&
在vue中定义一个防抖ref
背景在vue的开发过程中，我们通常会使用到ref，但在我们需要对一个频繁的赋值操作做防抖操作时，我们通常只能通过编写一个独立的防抖函数来实现，这样相对会多一些步骤（麻烦一些）。例如我们给一个即时搜索框的input实现防抖输入（即在输入文本n秒之后才触发搜索，避免频繁请求后端接口浪费资源）时，我们不仅不能使用v-model，而且还要定义一个input事件和防抖函数，非常之繁琐。此时，我有一个简洁的方