使用 JavaScript 的 SpeechRecognition API 实现语音识别
在现代的 Web 开发中，语音识别已经成为一个非常有用的功能。通过浏览器提供的 SpeechRecognition API，我们可以在网页上实现语音输入的识别功能。本文将介绍如何使用 JavaScript 和 SpeechRecognition API 来实现简单的语音识别功能。 什么是 SpeechRecognition API？ SpeechRecognition API 是 Web 开发中的一项 API，它允许开发者通过浏览器来识...
哈士奇的学习笔记：聊聊闭包和它的应用场景
闭包（Closure） 闭包 是指函数“记住”它定义时的词法作用域（即外部函数的变量），即使这个函数在其作用域之外执行。 闭包的核心特点是： 函数可以访问定义它时外部的变量，即使这个函数在其他地方被调用 。 举例： 在这个例子中， 函数在 函数内部定义，即使 函数已经执行完毕并返回了， 函数依然可以访问 中的 。这就是闭包的行为。 为什么闭包重要？ 它允许我们创建私有变量，隐藏状态，防止外部访问或修改。 它让函数拥有“记忆”，即函数内部...
audio自动播放为什么会失败背景
某天客户报了一个问题，说是大屏的声音不能自动播放了,我们的大屏应用是有个报警的，当有报警的时候，自动会播放警报的声音 测试后发现如下结论 1. 当刷新页面后，audio不会自动播放 2. 当从另外的一个页面进入到当前页面，可以直接播放声音 如果你想测试，可以 你可以先点击上方链接的 尝试一下 ，下方为截图 这个时候你会听到一声马叫声 然后，你刷新下马叫声的页面，这个时候声音的自动播放将不会生效 报错问题排查 打开控制台，不出意外看到了一...
Fabric.js 有手就行，面试官硬要问我会不会
背景 最近在投递简历的时候发现，很多HR在哪儿问，你会不会fabric.js啊；我说我暂时没看过，但是应该不难，看哈文档就能上手了。HR跟我说：“那你可能不太适合我们，祝你早日找到工作。” 咦，我这暴脾气... 写了一个简单的教程，大家可以根据到学习学习。 技术栈 我是用vite + vue3 搭建的项目。切记这是vue3，因为这儿在后续会出现一个问题。 绘制一个矩形 绘制一个简单的矩形。 注意注意注意... 如果你用的是vue3搭建的...
JavaScript Set有新功能啦，子、交、并、补轻松搞定
背景 本文是一篇翻译文章，看到原文 感觉内容非常不错，而且前端也会用到集合的计算，就决定翻译并整理一下。内容顺序跟原文有所出入，按印象中数学集合的定义进行整理的。 JavaScript Set 添加新功能了，子、交、并、补轻松搞定，一起来看看！ 引言 JavaScript Set 是在 ES2015 规范中被引入的集合结构，但是它的功能并不完整： 1. 创建 2. 增 3. 删 4. 查 除此之外想要实现集合的其他功能，如计算子集、交集...
JS事件循环Event Loop
面试率 90% 的JS事件循环Event Loop，看这篇就够了！! ! 事件循环（Event Loop）大家应该并不陌生，它是前端极其重要的基础知识。在平时的讨论或者面试中也是一个非常高频的话题。 理解 JavaScript 的事件循环往往伴随着宏任务和微任务、JavaScript 单线程执行过程及浏览器异步机制等相关问题，而浏览器和 NodeJS 中的事件循环实现也是有很大差别。熟悉事件循环，了解浏览器运行机制将对我们理解 Java...
如何借助 View Transitions 让网页切换跟 App 一样丝滑
在 Web App 上实现跟 Mobile App 一样的页面级切换动效，往往需要编写大量 CSS 动画和 JS 控制逻辑，即使投入大量精力来实现，最终的页面衔接动画还是会出现各种不符合预期的 BUG。 高实现成本意味着无法普及应用，所以 Web APP 在页面切换时普遍不会有 Mobile App 的丝滑体验。 我们可以引入类似 framer motion 这样的外部动效库来降低实现成本，在 SPA 场景下基本可以满足大部分的动画效果...
绕过中间商，不用 input 标签也能搞定文件选择
在本专栏的第一篇文章中，我们重新认识了 这位老伙计，挖掘了它的几个彩蛋特性。在做文件上传时，input 标签确实是我们的黄金搭档。但是为了方便调教 CSS 样式，我们往往需要把 input 标签藏起来，而用其他 HTML 元素来做 UI 代理。似乎是我们只馋 的身子，并不会给它一个名分 🐶。 但其实，不一定非要经过 input 标签这个中间商，我们是可以直接用 JavaScript 和系统进行文件交易的！ ！ 在上面的示例中，左侧是传...
你能让网页也像QQ那种一样发出右下角消息吗
<span style="color: var( g headertextcolor);" 需求</span 很平常的一个工作日，「产品经理」给我发了个消息： 产品： 你能让网页也像QQ一样，来了消息能进行提示吗？我说的不是网页内的弹出消息 我： 刚搞完上个需求，别搞嗷，你小子 产品是一个比较随和的人，所以上面的对话比较随意；具体的聊天内容，我这里就省略了，跟他对话之后，他的大致需求如下： 页面中展示预警内容 检测到预警情况会通知用户且...