自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(15)
  • 收藏
  • 关注

原创 手写requestIdleCallback

方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作,而不会影响延迟关键事件,如动画和输入响应。函数一般会按先进先调用的顺序执行,然而,如果回调函数指定了执行超时时间timeout,则有可能为了在超时前执行函数而打乱执行顺序。######下面我们将基于手写###要想通透的学会(必须将代码复制下来手一遍,如果看不懂注释留言评论)// 简单睡眠() => {console.log('A1开始');sleep(20);console.log('A1结束')

2025-04-30 17:45:23 457

原创 函数防抖、节流

其原理是用时间戳来判断是否已到回调该执行时间,记录上次执行的时间戳,然后每次触发 scroll 事件执行回调,回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段,如果是,则执行,并更新上次执行的时间戳,典型的案例就是输入搜索:输入结束后n秒才进行搜索请求,n秒内又输入的内容,就重新计时。函数防抖的基本思想是设置一个定时器,在指定时间间隔内运行代码时清楚上一次的定时器,并设置另一个定时器,知道函数请求停止并超过时间间隔才会执行。文本框输入搜索(连续输入时避免多次请求接口)

2025-04-30 17:44:10 399

原创 从零实现瀑布流--图片懒加载及其底层原理

先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src)。当js监听到该图片元素进入可视窗口时,即将自定义属性中的地址存储到src属性中,达到懒加载的效果。为了减小每列的差距我们应该将后面六张图片中最高的那一个放到当前这六列中最矮的那一列,正数第二高的图片放到倒数第二矮的那一列…即多行等宽元素排列,后面的元素依次添加到其后,等宽不等高,根据图片原比例缩放直至宽度达到我们的要求,依次按照规则放入指定位置。接下来我们看控制台的输出。

2025-04-30 17:43:39 891

原创 单独html使用Vue3 || 单页面使用Vue3

Vue3中不再构建UMD模块化的方式,因为UMD会让代码有更多的冗余,它要支持多种模块化的方式。Vue3中将CJS、ESModule和自执行函数的方式分别打包到了不同的文件中。在packages/vue中有Vue3的不同构建版本。因为用的时候找了半个小时的方法才找到正确的使用方式,而且百度的时候没有,所以写出来,如果有人跟我一样的话最起码写起来没那么难了。####为什么要写这个如此简单的文章呢?#####不同构建版本。

2025-04-30 17:42:38 559

原创 基于原生JS实现Modal对话框

【代码】基于原生JS实现Modal对话框。

2025-04-30 17:41:59 177

原创 手写React16--Fiber

#React Fiber是个什么东西呢?官方的一句话解释是**“React Fiber是对核心算法的一次重新实现”**。这么说似乎太虚无缥缈,所以还是要详细说一下。

2025-04-30 17:41:18 936

原创 如何正确使用vue中的sync修饰符

vue父子通讯是单向数据流,也就是子组件不能修改父组件的值,但是在很多情况下是需要这样做的,比如在做功能编辑的时候,子组件需要带入父组件的原始值,而且子组件也需要修改这个值,到最后的保存值中,部分代码。但是在使用的时候发现一些问题,如果父组件传入的值是简单数据类型(string、number)时必须要使用$emit去更新。以上代码是正确的通信方式。

2025-04-30 17:40:24 200

原创 uniapp 队列下载

【代码】uniapp 队列下载。

2025-04-30 17:39:48 133

原创 手写简版React虚拟dom及渲染流程

【代码】手写简版React虚拟dom及渲染流程。

2025-04-30 17:38:47 118

原创 canvas常用方法封装

我是进行的uniapp开发所以里边有部分uniAPI 不需要的小伙伴可根据需求自行调整代码。

2025-04-30 17:25:03 145

原创 第一次认为自己写的代码比较棒

【代码】第一次认为自己写的代码比较棒。

2025-04-30 17:24:03 114

原创 基于Vue手写el-form el-form-item el-input 以及其搭配使用

因为现在项目已经比较庞大了,估计得200页面左右,而且项目正在准备重构,刚开始不是我负责的,他们采用了element-ui 但是到后来element-ui的组件库已经不兼容ui设计图了,所以开始了第一次自己的组件库封装,如果有你觉得不好的地方,望大神指正。#####具体实现思想我就不一一复述了,不难,好好看一遍就懂了、当然,本人css很弱,如有更好的写法,请指正。由于时间原因,我并没有将组件的全部methods实现,不过一通百通,剩下的自己写吧。本页面代码Ctrl+C => Ctrl+V。

2025-04-30 17:23:33 754

原创 Vue.js 3.0 组件是如何渲染为 DOM 的?

抽象来看,render 做的事情是:如果传入的 vnode 为空,则销毁组件,否则就创建或者更新组件。在 Vue.js 3.0 中有一个「渲染器」的概念,我们先对渲染器有一个初步的印象:渲染器可以用于跨平台渲染,是一个包含了平台渲染核心逻辑的 JavaScript 对象。可以看到根组件的渲染是在标准 mount 函数中进行的。至此,我们知道了答案:先把组件转化为 vnode,针对特定类型的 vnode 执行不同的渲染逻辑,最终调用 document 上的方法将 vnode 渲染成 DOM。

2025-04-30 17:22:31 900

原创 轻量级MVVM表格数据绑定插件设计与实现

背景介绍在传统JSP项目中开发表格数据实时计算功能时,为简化开发流程,基于Vue2的发布订阅和数据劫持思想,设计实现了这套轻量级MVVM插件。核心功能模块关键特性实现动态表格处理数据校验处理__atWill__计算属性系统使用示例基础初始化特殊功能调用设计亮点应用场景后续优化方向该方案已在多个传统JSP项目中成功应用,使表格类开发效率提升40%以上,代码量减少约60%。

2025-04-30 17:21:56 411

原创 【Vue3可编辑表格组件】一套代码搞定中后台表格开发,让数据编辑更丝滑

单行编辑:点击「编辑」按钮激活单行编辑状态,支持通过行索引或行对象精准控制批量编辑:一键切换「编辑全部数据」模式,批量激活所有行编辑状态状态可视化:通过方法实时判断行编辑状态,轻松实现编辑/查看模式切换-- 操作栏示例 -->tableCRef?.isRowEditing(row)">编辑</el-button><el-button type="text" @click="saveOne($index)" v-else>保存</el-button>

2025-04-30 17:21:15 900

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除