适用于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
如何利用浏览器资源提示关键词优化网页性能
浏览器资源提示关键词在现代Web开发中，页面加载速度对用户体验至关重要。浏览器提供了一些资源提示关键词（Resource Hints），帮助开发者优化页面加载速度。这些关键词包括 defer、async、preload、prefetch、dns-prefetch、prerender 和 preconnect。合理利用这些关键词，可以显著提高页面加载性能，优化用户体验。1. defer 和 asyn
三个测试占位图链接地址
官网地址占位图片示例说明https://placeholder.comhttps://via.placeholder.com/400x200.png/3c9cff/fff400x200 - 宽高，3c9cff - 背景颜色，fff - 文本颜色https://dummyimage.comhttps://dummyimage.com/400x200/3c9cff/fff400x200 - 宽高，3c
一个开箱即用的变量类型判断库
其中包括了一些日常开发中常用得到的函数工具默认是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
写一套拟物风格的UI组件
准备写一套拟物风格的UI组件，先发篇文章后续慢慢补充吧😎大概以后会长这样：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content=&
网页文件加载失败如何重试（一）
本文主要讲解脚本文件加载失败时的处理背景在我们开发网站应用时，我们可能会遇到脚本加载失败的情况，导致脚本加载失败的原因有很多，比如用户的网络问题、终端设备问题、用户浏览器版本等诸多因素。解决方案在 JavaScript 中，我们可以创建一个监听来监听脚本加载失败的情况，然后针对加载失败的脚本进行重新加载。重新加载的方案，一般是通过更换域名来解决。我们给每个脚本添加一个映射关系表，用来在加载失败时匹
文档流下载
文档流下载Excel、PPT、Word等文档流下载以下是一个简单的下载示例，具体配置根据使用的请求工具有所差异const downloadExcel = async () => { const typeMap = { "application/vnd.ms-excel": "xls", "application/mswor