- 博客(18)
- 收藏
- 关注
原创 JavaScript实现虚拟列表
3、监听滚动条的滚动事件,获取每次滚动的scrollTop,然后除以元素的高度,得到每次获取数组中的数据下标,然后进行截取,再替换html的内容。后端一次性返回大批量的数据(如:1000条),前端如果全部一次性渲染可能会导致页面卡顿,用户体验差,因此需要通过虚拟列表来实现。1、包装一个容器代表可视区,根据设计图获取每条数据的高度,然后根据可视区的高度和每条数据的高度去计算一次可以渲染多少条数据。2、设置容器的高度等于数据的条数*每条数据的高度。
2024-03-08 10:37:25
511
原创 typescript常用类型标注
联合类型:联合类型的特点是可以包含多个类型,但只允许其中一个类型作为变量的实际类型。交叉类型:指的是多个类型的并集,表示一个类型同时具备这些类型的特点,用&表示。使用Pick获取指定字段类型。使用Omit排除指定字段类型。
2024-02-28 09:39:57
435
原创 手写javascript原型对象的call、apply、bind方法
call、apply在改变this指向的同时,也会把目标函数给执行掉。一、call、apply、bind的作用都是改变函数的this指向。bind只负责改造this,不执行任何操作。二、模式实现一个call、apply、bind方法。
2024-02-22 09:47:21
405
原创 浏览器的五种观察模式
避免了通过回调函数调整大小时,通常创建的无限回调循环和循环依赖项。它只能通过在后续的帧中处理 DOM 中更深层次的元素来做到这一点。如果它的实现遵循规范,则应在绘制前和布局后调用 resize 事件。最常用的场景就是实现滚动条滚动到页面底部加载更多或者是做图片懒加载,当图片滑动到视窗内再显示图片。主要用于监听浏览器的各种报告信息,包括弃用的api,css特性使用情况等。用于监测性能度量事件,在浏览器的性能时间轴记录下一个新的。用户监听某个范围内dom树结构发生变化的场景。
2024-01-25 09:49:54
393
原创 js过滤时间有交叉的数据
数据类型没有做严格的限制,可自行根据业务场景进行优化,另外ios的设备执行new Date()的时候接受的时间格式需要以 "/" 分割,如果以"-"分割,会出现bug。
2023-10-25 09:59:36
139
原创 原生JavaScript实现自定义日历
以下内容只返回js数据结构,css样式可以用grid布局自行开发,后续会把农历相关的数据也给补充上,如有错误,欢迎补充~~
2023-09-22 17:48:16
1161
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人