跳至主要內容

前端坎坷之路

日常学习总结,没事儿多来逛逛

精准倒计时实现

为什么使用setTimeout、setInterval做倒计时不准?

1、主要原因与JavaScript的执行机制有关。JavaScript是单线程的,这意味着它一次只能执行一个任务。当你设置一个计时器时,计时器的回调函数会被放入任务队列中,等待事件循环来处理。然而,如果在计时器到期时,调用栈中有其他任务正在执行,计时器的回调函数就会被延迟执行。这种延迟会导致计时器不准确。

2、此外,浏览器对 setTimeoutsetInterval 的最小时间间隔有一定的限制,通常在4毫秒或更高,这也会影响计时的精度。系统资源的限制,如CPU负载过高,也可能导致计时器的回调函数被延迟执行。


菜鸡小谢原创大约 2 分钟js
uniapp函数式弹窗

开发公司某个uniapp项目时,有个电商营销的需求,涉及到许多页面公共弹窗,比如在首页存在多个不同的弹窗,需要在不同的时机弹,分类详情页也有多个弹窗、裂变页也要有相同的弹窗等等。项目中原来的做法是写公共组件,然后在需要的页面引入,这种做法既存在很多冗余代码,还会导致弹窗乱弹等等情况。

那既然上面这种做法有缺点,那有更好的办法吗?

那必然有,就是函数式弹窗啦,参照这篇文章函数式调用弹窗实现(vue版)

但是,上方的函数式弹窗只能用在H5上,在app上面用不了,因为在uniapp开发中,Vue.extend不可作为组件使用,并且vm.$mount()在APP当中也无法使用。


菜鸡小谢原创大约 2 分钟uniapp
ts常见类型报错

1、类型“undefined”不能作为索引类型使用。ts(2538)

1734923022535

解决方案:使用对象映射类型

1734926060016

2、接口只能扩展使用静态已知成员的对象类型或对象类型的交集。ts(2312)

1734924039521

菜鸡小谢原创小于 1 分钟typescript
记一次项目中自动去除console.log打印(非正常webpack、vite打包环境)

前言

前不久接到一个需求,为了保证信息安全的问题,需要去除项目中所有的console.log打印。常见的通过webpack、vite打包编译的项目都有对应的插件,比如babel插件[babel-plugin-transform-remove-console](https://www.npmjs.com/package/babel-plugin-transform-remove-console)、webpack插件[terser-webpack-plugin](https://www.npmjs.com/package/terser-webpack-plugin/v/1.4.5)等。但是我们的项目是属于php的前后端不分离项目,这应该怎么办呢?只能靠自己手搓nodejs脚本了。(需要支持node环境)

菜鸡小谢原创大约 6 分钟gitjavascript
人机验证实践(Cloudflare Turnstile)

什么是人机验证?

人机验证(CAPTCHA)是一种用于区分人类用户和自动化脚本(机器人)的技术,通常用于网站和在线服务中来防止恶意行为。常见应用场景:恶意登录、恶意注册和其他恶意操作等等。

常见人机验证解决方案

1、Cloudflare Turnstile(推荐)

特点

  • 无感知验证,用户无需进行额外操作。
  • 免费使用,适合各种网站。

适用场景


菜鸡小谢原创大约 3 分钟人机验证
安卓APP音视频录制与播放

前言

​ 本项目是一个基于hatom平台开发的安卓app(H5内嵌webview),本文总结归纳了其中音视频录制与播放开发业务的一些经验。

音频录制

​ 由于处在安卓webview环境,录制音频需要调起硬件设备,并且因为网页浏览器有安全机制,它只允许https和localhost访问麦克风摄像头等硬件,通过H5录制音频(MediaDevices.getUserMedia())的方式不太友好。固采用hatom平台提供的原生音频录制插件进行录制,但是原生录制插件无法提供录制时间,所以这里采用手动计时,相关代码如下:


菜鸡小谢原创大约 3 分钟音视频
ts体操练习

前言

typescript类型体操练习,用于学习ts。

题目

get-return-type

const fn = (v: boolean,a:string) => {
 if (v)
   return 1
 else
   return 2
}

// inter关键字,表示在extends条件语句中待推断的类型变量
type MyReturnType<T extends Function> = T extends (...arg: any) => infer p ? p :never

type a = MyReturnType<typeof fn>

菜鸡小谢原创大约 5 分钟typescript
git远程仓库失败

问题

平时开发过程中,当我们使用git拉取代码或者推送代码时,总是会遇到代理问题,如下截图所示:

1723098194990

这是由于git config中设置的代理有问题

解决方法

①如果你本地没有开例如vpn的代码,去掉即可

git config --global --unset http.proxy
git config --global --unset https.proxy

菜鸡小谢原创小于 1 分钟git
个人介绍

个人介绍

基本信息

2022年应届全日制双一流本科

技术栈

vue2+vue3、ts、H5、可视化大屏

1723098673523

开源

u-barcode


菜鸡小谢原创小于 1 分钟
2
3