本教程解释了如何使用Performance API来记录真实用户访问你的应用程序的统计数据。 使用浏览器的DevTools来评估web应用性能是很有用的，但要复现现实世界的使用情况并不容易。因为人们在不同地点使用不同的设备、浏览器和网络，都会有不同的体验。 Performance API介绍 Per
单页面应用（SPAs）当处理实时、异步数据时，可以提供丰富的、可交互的用户体验。但它们也可能很重，很臃肿，而且性能很差。在这篇文章中，我们将介绍一些前端优化技巧，以保持我们的Vue应用程序相对精简，并且只在需要的时候提供必需的JS。 注意：这里假设你对Vue和Composition API有一定的熟
前言 当开发者需要为不同目的以不同形式处理URL时，比如说浏览器历史导航，锚点目标，查询参数等等，我们经常会借助于JavaScript。然而，它的频繁使用促使攻击者利用其漏洞。这种被利用的风险是我们必须在我们的JavaScript应用程序中实现URL验证的原因。 URL验证检查URL是否遵循正确的U
在编写软件时，你所做的大部分工作就是创建和连接多个值和方法，让他们一起工作，以便提供应用程序的功能。面向对象编程可以帮助你更容易地，并且是声明式地实现这些功能。 在这篇文章中，你将了解到在JavaScript中开始使用类和面向对象编程方法所需要的一切。 前置知识 在阅读本篇文章之前，你需要掌握Jav
Vue 3已经稳定了相当长一段时间了。许多代码库都在生产环境中使用它，其他人最终都将不得不迁移到Vue 3。我现在有机会使用它并记录了我的错误，下面这些错误你可能想要避免。 使用Reactive声明原始值 数据声明在过去都是非常直接的，但是现在有很多帮助函数供我们使用。目前的规则是： 使用react
在运行时清理你的代码是构建高效、可预测的应用程序，没有商量余地的部分。在JavaScript中，实现这一目标的方法之一是很好地管理事件监听器，尤其是当不再需要时移除它们。 有好几种方法可以做到这件事情，每种都有自己的一套权衡方法，使其在某些情况下更合适。我们将介绍几种最常用的策略，以及当你试图决定哪
探索 MutationObserver API 与传统轮询等待最终被创建的节点方法相比的优劣。 有时候，您需要操作尚未存在的 DOM 的某个部分。 出现这种需求的原因有很多，但你最常看到的是在处理第三方脚本时，这些脚本会异步地将标记注入页面。举个例子，我最近需要在用户关闭Google reCAPTC
著名symbol 著名symbol是一个在不同领域中都相同且未注册的symbol。如果我们要列出著名symbol，它们会是： Symbol.iterator Symbol.toStringTag Symbol.toPrimitive Symbol.asyncIterator Symbol.hasIn
Vue中v-model的思路很简单。定义一个可响应式的text（通常是一个ref），然后用v-model="text"将这个值绑定到一个input上。这就创造了一个双向的数据流： 用户在输入框中输入，text会发生变化。 text发生变化，输入框的值也随之变化。 让我们看看如何在Vue 3中使用v-
在2023年学习React并不是一件容易的事情。自2019年React Hooks发布以来，我们已经拥有了很多稳定性，但现在形势正在再次变化。而这次变化可能比使用React Hooks时更加不稳定。在本文中，我想比较两种学习React的方式：以库的方式和以框架的方式。 为了让事情更加清晰：React
我喜欢Vue 3的Composition API，它提供了两种方法来为Vue组件添加响应式状态：ref和reactive。当你使用ref时到处使用.value是很麻烦的，但当你用reactive创建的响应式对象进行重构时，也很容易丢失响应性。 在这篇文章中，我将阐释你如何来选择reactive以及r
字符串和数字具有无数个值，而其他类型如布尔值则是有限的集合。 一周的日子（星期一，星期二，...，星期日），一年的季节（冬季，春季，夏季，秋季）和基本方向（北，东，南，西）都是具有有限值集合的例子。 当一个变量有一个来自有限的预定义常量的值时，使用枚举是很方便的。枚举使你不必使用魔法数字和字符串（这
在这个实用的Astro指南中，我将指导你完成设置过程，并告诉你如何构造你的文件。你将学习如何添加页面、交互式组件，甚至是markdown文章。我还会告诉你如何从服务器上获取数据，创建布局，并使用vanilla JavaScript和其他框架添加互动性。准备好享受一些动手的乐趣，因为我们将一起创建一个
本文浅析一下为什么`Map`（和WeakMap）在处理大量DOM节点时特别有用。 我们在JavaScript中使用了很多普通的、古老的对象来存储键/值数据，它们处理的非常出色： ```jsx const person = { firstName: 'Alex', lastName: 'MacArth
这听起来是不是很耳熟：你想写一个小型脚本，不管是为页面、命令行工具，还是其他什么类型。你从JavaScript开始，直到你想起写代码时没有类型是多么痛苦。所以你把文件从`.js`重命名为`.ts`。然后意识到你已经打开了一个麻烦的玩意儿。 如果你在为一个网站或一个库写代码，你就需要引入编译的步骤。如
在这里，我想给你一个新的React项目入门的简要概述。我想反思一下优点和缺点，反思一下作为一个开发者所需要的技术水平，反思一下作为一个React开发者，每个启动项目都能为你提供哪些功能。最后，你将了解到针对不同需求的3种解决方案。 **免责声明**：从个人开发者的角度来看，我完全支持React团队在
在这篇文章中，我们将会探索处理数组的三种方法： - `for…of`循环 - 数组方法`.reduce()` - 数组方法`.flatMap()` 目的是帮助你在需要处理数组的时候在这些特性之间做出选择。如果你还不知道`.reduce()`和`.flatMap()`，这里将向你解释它们。 为了更好地
> 聊天插件系统是一种令人兴奋的新方式，可以扩展ChatGPT的功能，纳入您自己的业务数据，并为客户与您的业务互动增加另一个渠道。在这篇文章中，我将解释什么是聊天插件，它们能做什么，以及你如何用JavaScript建立你自己的聊天插件。 这篇文章（或OpenAI所称的"训练数据"）提供了一个快速入门
TypeScript 5.2将引入一个新的关键字：`using`。当它离开作用域时，你可以用`Symbol.dispose`函数来处置任何东西。 ```jsx { const getResource = () => { return { [Symbol.dispose]: () => { conso
人们在网上首先发现你的地方是哪里？也许你的社交媒体是人们搜索你时首先发现的东西，亦也许是你为自己创建的投资组合网站。然而，如果你使用GitHub来分享你的代码并参与开源项目，那么你的GitHub个人主页可能是人们为了了解你而去的第一个地方。 你希望你的GitHub个人主页说些什么？你希望如何以简明易
