- 博客(8)
- 收藏
- 关注
原创 发布-订阅模式:解耦组件间通信,提升系统灵活性与可扩展性
发布-订阅模式(Publish-Subscribe Pattern)是一种消息范式,其中存在一个代理中心(通常称为发布-订阅系统或消息队列),在该系统中,发布者发布消息,而订阅者订阅这些消息。发布者和订阅者之间没有直接的耦合关系,它们通过代理中心进行通信,通过解耦发布者和订阅者之间的关系,实现了组件之间的松耦合通信,提高了系统的灵活性和可扩展性。接下来,订阅者需要订阅对应的事件。
2024-03-20 17:24:52 455 1
原创 优化大数据量页面卡顿:探索新的虚拟列表实现方法
书接上文,我们将介绍另一种虚拟列表的实现方法,。当列表中的子项高度无法确定时,无法使用之前的虚拟列表实现方式,因为需要动态获取子项的高度。由于无法确定每个子项的高度,在初次渲染时,我们可以预先设置一个高度(preHeight),并根据该高度计算要展示的列表项。此时,preHeight就相当于之前提到的itemHeight,我们可以计算出对应的startIndex和endIndex。但是需要注意的是,由于渲染时的DOM位置和宽高是错误的,所以在渲染完成后,我们需要进行修正。
2024-03-07 16:50:59 772 1
原创 优化大数据量页面卡顿:简单虚拟列表实现方法详解
虚拟列表的核心原理是仅渲染用户可见的部分,从而减少DOM渲染的时间和DOM数量,避免页面卡顿。
2024-03-03 18:47:47 601 1
原创 浏览器标签页tab的跳转
从pageA页面打开一个浏览器标签pageB页面,pageB进行操作之后回退到对应pageA页面,如果pageA页面已关闭则新打开一个pageA页面。在edge和chorme浏览器中。即可实现在浏览器标签页中跳转。
2023-12-18 09:41:20 214
原创 前端如何实现拖拽?附组件
在开发过程中遇到的需求:要求拖拽改变元素的大小和位置,主要是用于可视化大屏的创建,考虑到项目的二次开发以及后续可能遇到的一些别的需求,作者决定自己开发一个拖拽组件,供项目使用。组件名称(ray-drag-resize-v3)
2023-02-28 16:31:28 2504
原创 前端中LCD字体的实现
LCD字体在前端中如何实现应项目需要,需要在页面中展示一种LCD类似电子表中的字体,经过查阅相关资料以实现,下面放成果图下面我来说下具体做法:1.首先到dafont下载你需要的字体,它提供的字体很多不止有LCD字体一种2.下载后解压,找到后缀名为TTF的文件3.打开fontsquirrel如图:4.选择最右边的自定义配置,为了尽可能多的兼容各个浏览器,按照如下选择:5. 点击最上面的upload fonts 上传刚刚下载好的TTF文件,滑倒下方 点击我同意,然后开始下载。6. 解压压缩
2020-11-23 09:17:17 980 1
原创 echarts在vue2中的简单使用
因项目需要,需要大量的展示数据,但是大量的使用表格对于界面观感不好,所以采用了echarts来对数据进行展示,下面我来详细介绍echarts在vue中的使用方法:在vue中安装echarts以vscode编辑器和vue-cli为例用vue创建项目这里一笔带过打开终端使用命令行输入 npm i echarts--save在package.json中可以查看到3.为了使用的方便我们选择将在vue的原型上加入echarts打开 main.jsimport echarts from '
2020-11-20 09:58:26 5538
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人