Bruce233
学生
获得徽章 0
这篇文章介绍了一种用CSS实现函数节流（throttle）效果的方法，通过CSS的动画特性和状态控制，达到在一定时间内限制按钮的点击次数，从而避免频繁的执行。
实现思路如下：
1. 使用 `pointer-events` 属性来控制按钮的点击状态，从可点击到禁用状态的转换。
2. 使用 `animation` 属性创建一个动画，该动画在一定时间内将 `pointer-events` 属性从禁用变为可点击。通过在按钮上添加动画的样式，并设置相应的关键帧，从而实现按钮状态的控制。
3. 利用伪类 `:active` 来触发按钮点击事件。通过取消在点击时的动画，可以确保在动画执行过程中按钮仍然保持禁用状态。
这种实现方法相对于常规的JS方式，不需要引入额外的库，而是利用CSS动画和状态控制来实现节流的效果。不过，需要注意这种方法适用于点击行为的节流，对于其他事件（如滚动、键盘事件等）可能需要采用传统的JS方式实现。
总的来说，这篇文章提供了一种创新的思路，将CSS的动画特性用于实现函数节流效果，适合特定的场景下使用。
实现思路如下：
1. 使用 `pointer-events` 属性来控制按钮的点击状态，从可点击到禁用状态的转换。
2. 使用 `animation` 属性创建一个动画，该动画在一定时间内将 `pointer-events` 属性从禁用变为可点击。通过在按钮上添加动画的样式，并设置相应的关键帧，从而实现按钮状态的控制。
3. 利用伪类 `:active` 来触发按钮点击事件。通过取消在点击时的动画，可以确保在动画执行过程中按钮仍然保持禁用状态。
这种实现方法相对于常规的JS方式，不需要引入额外的库，而是利用CSS动画和状态控制来实现节流的效果。不过，需要注意这种方法适用于点击行为的节流，对于其他事件（如滚动、键盘事件等）可能需要采用传统的JS方式实现。
总的来说，这篇文章提供了一种创新的思路，将CSS的动画特性用于实现函数节流效果，适合特定的场景下使用。
展开
评论
点赞
文章描述了一个关于前端沙箱（Sandbox）的实现方案，旨在为运行中的程序提供隔离的执行环境，以确保代码在安全的上下文中运行，同时实现特定的限制，如禁止操作 DOM、禁止调用接口等。
具体实现方案如下：
1. 利用 `<iframe>` 创建沙箱环境，将其中的原生浏览器全局对象作为沙箱的全局对象。
2. 设定一个黑名单（blacklist），其中包括需要禁止访问的变量，如 `document`、`XMLHttpRequest`、`fetch`、`WebSocket` 等。
3. 使用 `Proxy` 对沙箱全局对象进行拦截，以在访问变量时进行限制。如果变量在黑名单中，则直接抛出错误，禁止访问。如果变量不在当前环境的 window 对象中，则报错，实现禁用三方库调接口的目的。
4. 使用 `new Function` 替代 `eval`，在沙箱环境中运行代码，避免直接使用 `eval`。
5. 使用 `with` 关键字来改变代码的作用域，使代码在沙箱的上下文环境中运行。
6. 如果存在无法完全阻止的沙箱逃逸情况，可以将涉及到的逃逸点添加到黑名单中，以实现更加严格的限制。
通过这个沙箱方案，可以实现前端代码的隔离和安全运行，防止恶意代码操作 DOM、调用接口等危险行为。文章中详细描述了沙箱的实现过程，逐步解决了一系列的问题，使代码在受限制的环境中运行，保障了前端应用的安全性。
具体实现方案如下：
1. 利用 `<iframe>` 创建沙箱环境，将其中的原生浏览器全局对象作为沙箱的全局对象。
2. 设定一个黑名单（blacklist），其中包括需要禁止访问的变量，如 `document`、`XMLHttpRequest`、`fetch`、`WebSocket` 等。
3. 使用 `Proxy` 对沙箱全局对象进行拦截，以在访问变量时进行限制。如果变量在黑名单中，则直接抛出错误，禁止访问。如果变量不在当前环境的 window 对象中，则报错，实现禁用三方库调接口的目的。
4. 使用 `new Function` 替代 `eval`，在沙箱环境中运行代码，避免直接使用 `eval`。
5. 使用 `with` 关键字来改变代码的作用域，使代码在沙箱的上下文环境中运行。
6. 如果存在无法完全阻止的沙箱逃逸情况，可以将涉及到的逃逸点添加到黑名单中，以实现更加严格的限制。
通过这个沙箱方案，可以实现前端代码的隔离和安全运行，防止恶意代码操作 DOM、调用接口等危险行为。文章中详细描述了沙箱的实现过程，逐步解决了一系列的问题，使代码在受限制的环境中运行，保障了前端应用的安全性。
展开
评论
点赞
这篇文章介绍了两种适用于Vite项目的屏幕适配方案：基于rem的适配方案和基于scale的适配方案。在基于rem的方案中，通过postcss插件实现px到rem的转换，而基于scale的方案则使用CSS的transform属性的scale()方法来进行元素的缩放。文章提供了详细的步骤和代码示例，适用场景和实战演示，帮助开发者解决Vite项目中的屏幕适配问题。
评论
点赞
文章介绍了不常用但实用的 CSS 属性，如 `position: sticky` 吸顶效果，`:empty` 选择器代替无数据提示，`gap` 辅助布局，`background-clip: text` 带背景文字，`user-select` 控制文本选择，`:invalid` 表单校验样式，`:focus-within` 子元素焦点影响父元素样式，以及 `mix-blend-mode:difference` 颜色混合模式。提供了简洁的实例和用法。
展开
评论
点赞
Esbuild是由Figma的CTO Evan Wallace开发的快速打包工具，采用Go语言开发，利用多核并行，高效利用内存，以及从零造轮子等特点提供极致性能。与SWC相比，Esbuild在性能和兼容性方面都有优势，适用于不同前端构建场景，如Bundler、Minimizer、Transformer等。Esbuild的插件机制和虚拟模块支持也增强了其灵活性和功能。然而，对于复杂的Web构建，Esbuild仍需进一步发展。
展开
评论
点赞
这段文本详细描述了一个开发者使用抓包工具 Whistle 的实际案例和操作步骤。作者首先介绍了抓包的原理和意义，然后详细解释了HTTP/HTTPS的抓包原理，包括HTTPS的加密过程。接着，作者讲解了如何通过电脑抓取手机端的数据包，并介绍了使用Whistle进行抓包的方法。文中还提到了一些Whistle的特点和功能，如代理、修改请求、查看DOM等。作者分享了一些实际应用场景，比如在原生app中加载本地代码、查看移动端的DOM样式以及解决本地开发跨域问题。最后，文中强调了学习抓包技能的重要性，并鼓励读者深入研究Whistle的更多功能和用法。
展开
评论
点赞
这篇文章分享了一些有关JavaScript编程的实用技巧和方法，涵盖了计算距离生日天数、滚动到顶部、复制文本、防抖节流、过滤特殊字符、常用正则、数组初始化、RGB转十六进制、检测函数和对象的方法。非常实用且易于理解。
评论
点赞
Monorepo将多个项目合并到一个仓库中，解决了MultiRepo模式中的代码复用、版本管理和基建重复等问题，提升了一致性、协作和效率。然而，采用Monorepo可能会面临新的问题，如性能、项目规模管理等，需要综合考虑并采用适当的工具和策略来解决。
评论
点赞
Vue3 的组件 setup 函数位于 `packages/runtime-core/src/component.ts` 文件中。在组件挂载过程中，首先调用 `createComponentInstance` 创建组件实例，然后将该实例传递给 `setupComponent` 函数。`setupComponent` 函数内部会处理 props 和 slots，然后根据组件类型调用 `setupStatefulComponent` 或其他逻辑。`setupStatefulComponent` 在创建代理缓存和实例代理对象后执行组件的实际 setup 逻辑，最终返回渲染函数。这个过程完成了 setup 的整个流程，为后续的渲染准备工作铺垫。
展开
评论
点赞
本文探讨了如何通过短路运算、三元运算符、switch case和对象配置/策略模式来优化复杂的if else 结构，从而提升代码的可读性和简洁性，以及在不同场景下的应用案例。通过这些方法，可以使代码更加清晰易懂，并减少多层嵌套的繁琐感。这种思想的引入能够使代码更具维护性和可扩展性，为代码编写带来新的思路和灵感。
评论
点赞
通过console.log、console.warn、console.error等方法，我们可以在开发过程中输出日志和警告信息。另外，console.time和console.timeEnd可以计算代码执行时间，console.assert用于判断并输出错误信息。使用console.dir可以查看DOM节点的属性和事件，console.table可以输出数组或对象成表格。在调试过程中，我们可以使用断点调试工具，包括直接断点、代码断点、条件断点、DOM断点、VS Code断点等，以提高开发效率和解决问题能力。
展开
评论
点赞
这篇文章介绍了抓包的原理以及使用抓包工具 Whistle 进行网络调试的方法。抓包是截获、分析、修改网络数据包的操作，用于网络问题排查、业务分析等。文章详细解释了抓包工具的使用，特别是针对 HTTP/HTTPS 的抓包原理。在 HTTPS 中，通过校验证书实现身份验证和数据加密，同时防止中间人攻击。为了在移动端抓包，可以在电脑上运行代理服务器，手机连接同一网络后配置代理，从而实现抓取移动端应用的数据包。文章还演示了使用 Whistle 工具进行抓包和调试的过程，包括解决跨域问题、查看移动端的 DOM 样式等。文章总结了抓包在软件开发中的重要性以及使用抓包工具进行网络调试的实际应用价值。
展开
评论
点赞
这段内容详细描述了一个基于 Web 技术的卡片布局游戏的实现。它包括基础地图生成逻辑、卡片渲染和覆盖处理、填充数据、点击交互逻辑等。游戏核心是通过消除3张相同卡片来获胜，同时还提到了道具的实现、动效、样式美化等方面的可能拓展。整体而言，这篇内容涵盖了游戏的基本架构和关键逻辑。
评论
点赞
文章阅读：现在ChatGPT对人的生活影响巨大，特别是对程序员而言。这篇文章介绍了怎么吧ChatGPT和飞书结合在一起。我还要接着去学ChatGPT和其他软件的结合
评论
点赞
#青训营 x 字节后端训练营#
打卡阅读：刷这么久算法，还不知道什么是TC和SC，本为从头详细介绍了什么是时间什么是空间复杂度。让我以后刷算法题目的时候可以自己分析。
打卡阅读：刷这么久算法，还不知道什么是TC和SC，本为从头详细介绍了什么是时间什么是空间复杂度。让我以后刷算法题目的时候可以自己分析。
评论
点赞
打卡阅读 #青训营 x 字节后端训练营#
在了解过mysql之后，这篇文章介绍了postgresql，是当下另一个主流的数据库系统语言。介绍了他与mysql的区别和他们分别的优缺点和应用场景。
在了解过mysql之后，这篇文章介绍了postgresql，是当下另一个主流的数据库系统语言。介绍了他与mysql的区别和他们分别的优缺点和应用场景。
评论
点赞