前端
文章平均质量分 86
以前后端为区分,这里主要展示关于前端的文章
画一个圆_
...
展开
-
【兼容性记录】video标签在 IOS 和 安卓中的问题
业务需求背景:由于业务中涉及到有视频播放的内容,所以就使用了video标签去做,但是video标签在ios 设备和安卓设备中的默认行为不一致,故记录下解决方法(折中办法)。原创 2024-09-13 17:57:30 · 1078 阅读 · 0 评论 -
面试官:如何防止接口重复请求?我给出了三个方案!
前段时间老板心血来潮,要我们前端组对整个的项目都做一下接口防止重复请求的处理(似乎是有用户通过一些快速点击薅到了一些优惠券啥的)。。。听到这个需求,第一反应就是,防止薅羊毛最保险的方案不还是在服务端加限制吗?前端加限制能够拦截的毕竟有限。可老板就是执意要前端搞一下子,行吧,搞就搞吧,you happy jiu ok。转载 2024-08-07 13:18:42 · 94 阅读 · 0 评论 -
几分钟教你实现一个酷炫的扫光效果
话不多说,咱们先来看看本篇文章中我们实现的效果。是不是发现这个效果非常的熟悉?没错,这经常能够在一些电商网站可以看到,那这究竟是怎么实现的呢?接下来由我来带领大家尝试做一个类似这样的效果出来。扫光样式可以通过线性渐变来创建,这种方法简单且效果良好。扫光动画的实现通常需要改变元素的位置或背景位置,这可以通过 CSS 的transform或属性来实现。对于文本元素,可以通过改变来实现扫光动画。但是,需要注意的是,如果背景尺寸等于容器尺寸,那么设置的百分比将无效。原创 2024-08-06 14:56:26 · 701 阅读 · 0 评论 -
什么???到现在你都还不会手写Promise!
Promise对于我们来说并不陌生,无论是在面试还是开发过程中,它都会频繁出现。虽然我们经常使用它,但如果能深入理解其底层原理,无疑能够提升我们的开发效率。因此,深入学习Promise是非常必要的。那么,接下来就让我们一起揭开Promise的神秘面纱,一起手写一个Pormise吧!完整代码前端-JavaScrip-Promise-手写Promise在开始之前,我们以常见的PromisePromise 解决了什么问题Promise 常用的 API 有哪些实现 Promise 某个方法。原创 2024-07-27 17:13:34 · 729 阅读 · 0 评论 -
都2024年了你还没有开始探索 CSS 属性 mask 吗?
打开控制台其实我们可以看到这里是在img这里主要使用了mask这个属性:在我们去掉这个mask属性以后,会发现轮播图会有一个白色的背景,这更加让我确定了这个mask属性就是实现这个样式的关键点。所以,接下来让我们来探究一下这个mask到底是何方神圣,居然能完成这样的样式。我们先来看看MDN对maskmask允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。这个解释肯定让小伙伴们糊里糊涂的,简单来说就是遮罩图片中不透明的部分会和原图片合在一起。拿上面天谕群星计划。原创 2024-07-23 20:07:39 · 907 阅读 · 0 评论 -
border-image:一个比 boder 更加吸引人的CSS属性
在开始正文之前我们先看看炉石传说的一个页面中的两个地方:加载更多按钮和tab切换。打开控制台,我们可以发现这两个地方都有一个相同的地方:都使用了这个属性。那这个属性有什么用那,接下来由我来向大伙详细介绍一下这个属性。看完前言的小伙伴是不想着这两个例子我使用backgrond就可以解决了,为啥还要这个属性?我刚开始接触的时候也是这样想的,但我在对一个项目进行换肤的时候就出现了一个问题:很多地方都是文字不用修改,但是边框要进行修改,导致我每个地方都需要重新进行切图,换皮😅😅😅另外,我们在使用的同时还可以使用。原创 2024-07-22 16:02:35 · 892 阅读 · 0 评论 -
通用CSS样式记录
时的颜色,后两个参数分别是 X、Y 轴的偏移量。这里的原理就是让原本的。这篇文章主要记录一下我在日常开发中使用到且可提高效率的CSS样式。偏移处用户视图区域(偏移值可以更改),然后让新的图片偏移到原。来换色,而在日常开发过程中通常会遇到设计那边要求图片在。时换色,那么怎么利用 CSS 来完成这个效果呢。这样的图片却不可以通过。原创 2024-06-28 10:00:28 · 207 阅读 · 0 评论 -
一文让你知道在 React 18 中自动批处理为什么会有更少的渲染???
批处理是指 React 为了更好的性能而将多个状态更新分组到一个重新渲染进程中。例如,如果你有两个state在同一个点击事件中需要更新,React 会将这两个state作为一次渲染。所以,这就是运行下面的代码后,明明在点击事件中更新了两个state为什么运行代码的时候只看见了一次渲染😮// 到这里还没重新渲染f);// 到这里还没重新渲染// React 只会在结束时才会执行渲染return (Demo:React17 中事件处理程序的批处理。翻译 2024-05-25 18:53:11 · 172 阅读 · 0 评论 -
还在自己一个一个写前端接口?看我几分钟搞定全部请求接口!
前两天为了应付学校课程大作业,老师要让我们在一个月的时间内写一个订单后台管理系统。不就是写一个全栈项目嘛,看我用 Vue+Nest 咔咔咔全搞定。由于之前有搞过还专门配置了一个全栈模板,这次也正好用上了。在我写完后端接口的时候(只是潦草的写了 50 个简单的接口),我突然发现我还需要在前端再写一遍请求接口,也就是说我还需要重复 50 次 curd,再看看隔壁用 JavaWeb 都写完交给老师了我还在这里写接口,这效率太低效了呀。吐槽归吐槽,但是还是硬生生的写完了。😅😅😅。原创 2023-12-18 16:14:49 · 902 阅读 · 0 评论 -
【WebRTC系列一】WebRTC 两个基础 API 实现视频通话和桌面分享
一般情况下,我们使用这个 API 默认会获取到 PC 的默认设备(笔记本上的摄像头和麦克风),但在用户有连接蓝牙、USB 摄像头的场景的时候(用户想要自己选择外接设备)就上升了一定的难度了。思路:1、获取当前设备所有摄像头和麦克风信息2、从获取到的媒体设备进行遍历筛选出需要的媒体设备3、将需要使用的媒体设备以某种参数的形式传递给浏览器 API4、浏览器 API 执行设备信息一般分成了三类:音频输入、视频输入、音频输出。原创 2023-11-17 20:14:48 · 357 阅读 · 0 评论 -
面试官:给我说说script默认加载、defer、async加载方式的异同点
根据什么?你还不知道浏览器渲染流程?这篇文章可以知道,页面从浏览器解析到的起始标签开始渲染,如果我们将都放在了中,那么浏览器将会在页面渲染前将所有的JS下载、解析和解释完毕后才开始渲染页面,这么做就有一个问题是用户不能接受的:页面白屏。所以我们通常会将放在后面,这样可以使得在页面渲染完毕后执行JS,减少用户等待白屏的时间。是用于加载JS脚本的标签,通常用于引入JS文件。在项目庞大到一定程度时,我们通常会使用多个。原创 2023-11-06 18:17:52 · 121 阅读 · 0 评论 -
一步一步教你搭建monorepo项目架构
monorepo 搭建详细教程原创 2023-11-06 09:09:32 · 957 阅读 · 0 评论 -
vue3项目中在页面跳转时展示 loading page
其实原理很简单,由于页面渲染的顺序是从上往下的,所以加载顺序是 body(.page-lading)->div(#app)->div(#loading-screen .loading-screen)->script。由于主要内容(#app)的渲染顺序在最后(渲染的时候还需要一点时间),并且加载页的样式也在这里已经引入了。不管是在页面跳转,还是页面加载时都少不了 loading page,如果说没有加载页,用户体验感会极度的不好。注意:加载页的样式和结果尽量精简,这样加载页的加载速度才会快。原创 2023-10-16 19:34:55 · 1349 阅读 · 1 评论 -
nvm的下载以及配置和使用
nvm的下载以及详细配置和简单使用原创 2022-12-19 16:10:05 · 4985 阅读 · 0 评论