你写的深度克隆真的“深度”吗?

深度克隆是前端开发中无法避免的话题,几乎每个前端开发者都遇到过这个话题,那我们就来看看你写的深度克隆真的正确吗?大家先看下面这段代码:/** * 我是最强的深度克隆 */ 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

- 阅读全文 -

在vue中定义一个防抖ref

背景在vue的开发过程中,我们通常会使用到ref,但在我们需要对一个频繁的赋值操作做防抖操作时,我们通常只能通过编写一个独立的防抖函数来实现,这样相对会多一些步骤(麻烦一些)。例如我们给一个即时搜索框的input实现防抖输入(即在输入文本n秒之后才触发搜索,避免频繁请求后端接口浪费资源)时,我们不仅不能使用v-model,而且还要定义一个input事件和防抖函数,非常之繁琐。此时,我有一个简洁的方

- 阅读全文 -

Ts中never类型的妙用

妙用一当我们在一个项目中,可能会去改动一个在整个项目中应用很广泛的函数的参数类型,但是可能由于代码量比较庞大,我们不好排查改了之后哪些地方会出现问题,此时我们可以使用never类型来辅助我们的函数,当我们在原有的类型基础上添加了新的类型时,可能会导致else分支中的代码逻辑出现问题,此时我们可以向下面这样写来校验。// 当类型Method只有GET和POST时 type Method = &quo

- 阅读全文 -

koa2+ts如何自动导入并注册路由

┌─/ ├─📂routes │ ├─📄A.ts 路由配置文件A │ ├─📄B.ts 路由配置文件B │ └─📄index.ts 路由注册文件 └─📄app.ts// app.ts import Koa from "koa"; import { autoRouter } from "./routes&quo

- 阅读全文 -

vue3+ts正常引入图片切使用正常但是爆红

复现提示 Cannot find module '@/assets/images/logo.png' or its corresponding type declarations.ts(2307) 解决方式新建 image.d.ts 文件到根目录在 image.d.ts 文件中写入以下内容,类型可以自由设置declare module '*.svg' declare module '*.png'

- 阅读全文 -