- 博客(54)
- 收藏
- 关注
RSS订阅原创 探秘JavaScript：手写memoize函数全解析
在 JavaScript 中，memoize函数是一种用于实现函数记忆化的技术，以下是对其的详细介绍：memoize函数的核心原理是缓存函数的调用结果。当函数第一次被调用时，计算结果并将其与对应的参数一起缓存起来。后续再次调用该函数时，先检查缓存中是否已经存在相同参数的结果，如果有则直接返回缓存中的结果，而不再进行重复计算；如果没有则执行函数计算，并将结果缓存后再返回。
2025-01-19 11:34:36
248
原创 JS实现发生错误重复的请求
例如，在发送网络请求获取实时数据时，如果第一次因为网络不稳定而失败，进行有限次数的重试可能会成功获取到最新数据。假设在加载用户配置文件时出现错误，通过重试可以避免因这一次错误而导致用户体验的严重下降。
2024-07-22 14:55:54
320
原创 JS实现并发请求功能
例如，在一个电商网站中，用户进入商品详情页时，前端可以并发请求商品的详细信息、用户评价、相关推荐商品等数据，这样能够在最短的时间内为用户呈现一个丰富完整的页面，提高用户的购物体验。例如同时加载不同的图片、样式表和脚本文件。当用户浏览分页数据时，如商品列表的不同页面，前端可以同时发送多个请求获取不同页的数据，使用户在切换页面时能够快速响应，无需等待逐个请求的完成。又如，在一个在线游戏的前端界面，可能需要同时请求玩家信息、游戏排行榜、最新活动等数据，以便玩家能够快速获取到全面的游戏资讯。
2024-07-21 16:06:47
504
原创 CSS实现重复渐变的边框
此代码是一个简单的网页结构示例，包含 HTML 和 CSS 部分。HTML 部分设置了文档类型、语言，并在中定义了页面的元数据和样式表。CSS 部分，.card类为卡片元素设置了宽度、字体、颜色、边框半径、背景渐变和过渡效果。.container类为卡片内部容器定义了背景颜色和继承的边框半径。页面主体中，通过元素应用了上述定义的样式，并展示了一段文本内容。整体展示了如何通过 CSS 实现具有独特背景和交互效果的卡片布局。
2024-07-19 15:52:31
260
原创 JS中你不知道的console
在 JavaScript 编程的世界里，`console` 扮演着至关重要的角色。它是开发者与代码运行时状态沟通的桥梁。通过 `console`，我们能输出关键信息进行调试，洞察变量的变化，发现潜在的错误。`js` 与 `console` 的结合，让代码的执行过程变得清晰可见。深入理解和巧妙运用 `console` ，能大幅提升开发效率，优化代码质量，是每位 JavaScript 开发
2024-07-19 15:31:52
193
原创 JS手写call方法
在JavaScript中，call() 方法是一个非常重要的函数，可以调用一个函数，同时改变这个函数内部的this上下文。call() 方法的第一个参数是要绑定给this的值，随后的参数将作为被调用函数的参数传递。
2024-05-05 14:51:09
285
原创 JS手写bind方法
bind()方法创建一个新的函数，在 bind() 被调用时，这个新函数的this被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
2024-04-28 16:22:04
337
原创 Canvas实现圆点动画
ie9 以上才支持 canvas, 其他 chrome、ff、苹果浏览器等都支持只要浏览器兼容 canvas，那么就会支持绝大部分 api(个别最新 api 除外)移动端的兼容情况非常理想，基本上随便使用2d 的支持的都非常好，3d（webgl）ie11 才支持，其他都支持如果浏览器不兼容，最好进行友好提示浏览器不兼容，可以使用_flash_等手段进行优雅降。
2024-03-31 17:16:17
302
原创 前端：用Sass简化媒体查询
在进行媒体查询的编写的时候，我们可以利用scss与与编译器，通过@include混入的方式对代码进行简化，从而大大提高了代码的可维护性，也减少了代码的编写量，废话不多说，直接上代码。
2024-03-31 11:50:21
1089
原创 CSS使用clip-path实现元素动画
在日常开发当中，如果想要开发多边形，一般都需要多个盒子或者伪元素的帮助，有没有一直办法能只使用一个盒子实现呢？有的：css裁剪目录clip-path到底是什么？clip-path属性示例图：初始化样式代码示例：CSS3剪贴路径（Clip-path）在线生成器工具 - 代码工具 - 脚本之家在线工具clip-path - CSS：层叠样式表 | MDN。
2024-03-30 13:24:31
968
原创 CSS实现元素边框渐变动画
边框流动动画是一种非常常见的效果，能够让网页看起来更加生动有趣。通过使用CSS3，我们可以轻松地实现这种动画效果。本文将介绍如何使用CSS3实现边框流动效果，下面一起来看看吧。
2024-03-30 12:46:19
734
原创 CSS中那些你不知道的选择器
它们允许根据元素的状态、子元素的存在与否、文本的特定部分等来应用不同的样式。通过合理使用这些选择器，可以实现更丰富和交互性更强的用户界面效果。需要根据具体的设计需求和文档结构来选择和使用适合的选择器。选择器用于选择具有焦点的元素内部的元素。当元素内部的子元素获得焦点时，该选择器可以应用特定的样式。选择器用于选择用户选中的文本。当用户在文档中选中部分文本时，可以使用该选择器来设置选中文本的样式。选择器用于选择元素中的第一个字母。选择器用于选择包含特定子元素的父元素。它允许根据子元素的存在与否来应用样式。
2024-03-17 13:33:41
213
原创 js中函数参数的归一化处理
通过进行函数参数的归一化处理，可以使函数更加健壮和灵活，能够处理各种不同情况下的参数。这样可以提高代码的可扩展性和可维护性，使函数更易于使用和重用。中，函数参数的归一化处理是一种将不同类型或格式的参数转换为统一的标准或格式的过程。这样做的目的是为了提高代码的灵活性、可维护性和可重用性。下面是一个示例，展示了如何进行函数参数的归一化处理：（以格式化时间为例）
2024-03-17 11:48:14
819
原创 js实现完整封装全屏功能，兼容多个浏览器
js实现完整封装全屏功能，兼容多个浏览器。目前并不是所有的浏览器都实现了API的无前缀版本，所以我们需要针对不同浏览器，做一下API的兼容。
2024-03-17 10:50:26
491
原创 JS手写实现洋葱圈模型
当我们执行第一个中间件时，首先输出1，然后调用next()，那么此时它会等第二个中间件执行完毕才会继续执行第一个中间件。然后执行第二个中间件，输出3，调用next()，执行第三中间件，输出5.此时第三个中间件执行完毕，返回到第二个中间件，输出4，然后返回到第一个中间件。
2024-03-17 10:38:10
423
原创 前端实现大文件分片
文件上传的场景在工作中时常遇见，必不可免的有时会需要上传一个很大的文件，上传时间比较久，如果遇见网络问题或其他因素影响，容易导致传输失败，这里可以使用分片上传来解决这个问题。
2024-02-01 16:16:30
639
原创 纯前端实现图片压缩
当处理媒体文件上传，特别是图片时，确实需要考虑用户体验和系统性能。大图片文件的上传可能导致加载时间过长，影响整体操作体验。在前端，对上传的图片进行压缩处理是一种常见的优化手段。通过使用HTML5中的File API和Canvas API，我们可以实现在上传前在客户端对图片进行压缩的操作，从而提升用户交互体验。在后台管理系统中，优化管理员的操作体验同样至关重要。过大的图片可能会占用过多系统资源，导致页面加载缓慢。通过在前端进行图片压缩，可以有效减小上传的文件大小，避免影响系统性能。
2024-01-17 15:43:27
961
原创 JS实现多个输入框填写验证码
首先的想法就是6个input框，每输入一个数字之后，切换到下一个input，即切换focus，如果输入很快的话，会导致切换不过来。有卡顿的感觉，pass掉，所以最后使用一个input来接受输入最好，通过样式来切割成6个框，感觉这种也不好控制也就pass掉；这个验证码输入应用场景非常的多，看起来很简单的，但是做起来还是有一些坑。最后的想法是放6个input框。
2023-04-18 14:59:16
833
1
原创 js处理金额显示格式(最简单)
decimal表示纯数字格式 , “currency”表示货币格式, 和"percent"表示百分比格式;没有默认值,如果样式是“currency”,必须提供货币属性. minimumFractionDigits。使用的小数位数的最小数目.可能的值是从0到20;默认为普通的数字和百分比格式为0;“USD” 表示美元, “EUR” 表示欧元, "CNY"是人民币。currency:在货币格式化中使用的货币符号。有时候不生效，用的时候，注意一下.style: 格式化时使用的样式。默认值是 “decimal”
2023-03-30 18:01:34
2781
原创 JS实现网页上通过鼠标移动批量选择元素
鼠标移动，将选择框的大小（height、width）设置为鼠标移动的距离（起始点和终点的差）鼠标按下，将选择框的位置（top、left）设置为点击位置，选择框初始宽高为0。鼠标抬起，停止选择框大小跟随鼠标移动，计算与选择框发生重叠的元素。（提示：重叠计算有多种方法，可自行替换其他方法）演示代码（可复制到HTML 文件中查看）
2023-02-03 11:48:20
2014
1
原创 Pina + Vue3 实现本地持久化存储
api 的 pinia-plugin-persistedstate 通过通过通过为为每个和和每个项目提供项目项目项目商店商店商店商店的的持久性持久性。。无论您您对保存保存完整完整存储存储没问题persist问题，该插件都能满足您的需求，在您想要保留的存储上使用相同的选项。
2022-12-12 10:46:38
2914
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人