- 博客(1671)
- 收藏
- 关注
RSS订阅转载 什么是 JavaScript 记忆化（Memoization）？
什么是 Memoization？Memoization（记忆化）是一种优化技术，主要用于加速计算机程序。它通过存储耗时函数的计算结果，在相同输入再次传递时，直接返回缓存的结果，从而避免重复计算。为什么需要 Memoization？让我们通过一个简单的例子来了解 Memoization 的必要性。functionsquare(num){returnnum*num;}consol...
2024-07-26 12:50:06
3
原创 JavaScript字符串处理：如何只拆分一次？
在我们日常的JavaScript编程中，有时需要将一个字符串只拆分一次。本篇文章将介绍如何使用JavaScript实现这一需求。使用 indexOf 和 slice 方法拆分字符串要在JavaScript中只拆分一次字符串，我们可以结合使用 indexOf 方法和 slice 方法来实现。首先，利用 indexOf 找到分隔符首次出现的位置，然后使用 slice 方法进行字符串的截取。举个例子：c...
2024-07-25 12:41:00
117
原创 为什么建议使用 for…of 循环而不是 foreach 循环呢
在 JavaScript 和 TypeScript 的世界里，遍历数组是一项常见任务。许多开发者因为 .forEach 的简单和熟悉而习惯使用它。然而，有一个更强大且更灵活的替代方案：for…of 循环。????本文将深入探讨为什么你应该考虑切换到 for…of 以及它如何使你的编码过程更高效、更具表达力。基础知识：.forEach 与 for...of ????在 JavaScript 和 TypeScri...
2024-07-25 12:41:00
154
原创 如何使用JavaScript获取百分比宽度元素的像素宽度
在前端开发中，我们经常需要获取元素的像素宽度，然而有些元素的宽度是通过CSS的百分比来设置的。本文将介绍如何使用JavaScript获取这种情况下的元素像素宽度。使用JavaScript获取元素的像素宽度为了获取使用百分比设置宽度的元素的像素宽度，我们可以使用 clientWidth 属性。这个属性可以返回元素的像素宽度，不受其CSS样式中百分比设置的影响。例如，假设我们有以下HTML代码：<...
2024-07-24 12:39:47
345
原创 简单的聊一聊 JavaScript 原型与原型链
JavaScript是一门强大且灵活的编程语言，它的许多独特特性是其他编程语言所不具备的。在JavaScript的面向对象编程中，原型系统是一个基础概念。理解原型和原型链对于掌握JavaScript至关重要，因为它让开发者能够理解语言中的继承和属性解析机制。这篇文章将简单的聊一聊JavaScript中的原型和原型链，并通过实例来帮助大家更好地理解这些概念。什么是原型（Prototype）？在Jav...
2024-07-24 12:39:47
587
原创 如何使用Proxy实现JavaScript中的观察者模式
在软件开发中，尤其是JavaScript中，观察者模式是一种行为设计模式，它定义了一种一对多的关系。它允许多个观察者对象监听一个主题对象，并在主题状态发生变化时自动得到通知。这种模式常用于事件系统、数据绑定等场景。在JavaScript中，我们可以利用Proxy对象来实现观察者模式。Proxy对象允许我们拦截和自定义对目标对象的操作，如属性访问、赋值、枚举和函数调用。本文将逐步讲解如何使用Prox...
2024-07-23 08:03:17
890
原创 聊一聊 Node.js V22.5 有啥重要更新
大家好，今天我们来聊聊 Node.js 最新发布的 V22.5 版本。作为一名开发者，每次看到新的版本更新，总是让人期待不已。V22.5 中新增了许多强大且实用的功能，让我们的开发工作更加高效便捷。在这篇文章中，我们将重点讨论以下几个更新：新增 node:sqlite 模块（由 Colin Ihrig 提供）#53752新增 matchesGlob 方法（由 Aviv Keller 提供）#528...
2024-07-22 13:48:08
445
原创 如何理解JavaScript中的Object.freeze()和Object.seal()
在JavaScript编程中，管理对象的可变性对于保持代码的稳定性和可预测性至关重要。有两个强大的方法可以帮助控制对象属性的变化，它们分别是Object.freeze()和Object.seal()。这篇文章将深入探讨Object.freeze()和Object.seal()的实际用途，并通过实例来说明它们的功能和使用场景，帮助你在实际开发中有效地运用这些方法。什么是Object.freeze()...
2024-07-22 13:48:08
780
原创 聊一聊 Node.js（Express）的 req.body、req.params 和 req.query 区别和应用场景
在Node.js的Express框架中，处理客户端发送到服务器的数据时，我们主要使用req.body、req.params和req.query三个属性。这些属性虽然都是请求对象(req)的一部分，但它们的数据来源和用途却各不相同。本文将为大家详细解读它们的区别和使用方法。1. req.body数据来源：请求体HTTP方法：POST、PUT、PATCH常用格式：JSON、表单编码中间件：通常需要使用...
2024-07-20 17:00:57
429
原创 如何用JavaScript实现视频观看时间追踪
在网页开发中，跟踪用户与多媒体内容（如视频）的互动是一项常见需求。无论是教育平台、数据分析，还是用户参与度统计，监控用户如何观看视频内容都能提供宝贵的见解。这篇文章将探索如何使用JavaScript实现视频播放时长的跟踪。目标我们的目标是跟踪用户观看视频的总时长，包括暂停的时间，并将这些信息更新到后台系统。我们将通过捕获播放、暂停和结束等事件来计算观看时间。实现步骤让我们来分解一下实现的关键方面：...
2024-07-20 17:00:57
399
原创 如何使用JavaScript原生方法获取元素的背景图片URL？
在日常开发中，我们有时候需要获取某个元素的背景图片URL。在本文中，我将向大家介绍如何使用JavaScript来实现这一需求。获取元素背景图片URL的JavaScript方法要获取元素的背景图片URL，我们可以使用getComputedStyle方法来获取background-image的CSS属性值。举个例子，如果我们有如下HTML代码：<divstyle="background-ima...
2024-07-19 18:19:33
435
原创 JavaScript装饰器初探：简单易懂的初学者入门指南
大家好，今天我们来聊聊一个非常酷的JavaScript特性——装饰器。装饰器（Decorators）最早在Python和Java等语言中广受欢迎，而现在它也逐渐在JavaScript中得到应用。它能让我们的代码变得更加优雅和模块化。这篇文章将带你一步步了解什么是装饰器，并教你如何在项目中使用它们。什么是装饰器？简单来说，装饰器是一种特殊的函数，它可以用来修改类、方法、属性等的行为。通过装饰器，我们...
2024-07-19 18:19:33
395
原创 如何高效删除 JavaScript 数组中的重复元素？
在日常编程中，我们经常会遇到数组去重的问题。今天，我们就来聊聊如何用JavaScript来优雅地解决这个问题。问题描述给定一个包含重复元素的数组，我们希望创建一个新的数组，其中只包含原始数组中的唯一值。例如，如果我们有一个数组 [1, 2, 3, 2, 4, 1, 5]，期望的输出应该是 [1, 2, 3, 4, 5]。方法一：最原始的方法我们可以使用最简单的方法——嵌套循环来解决这个问题。遍历每...
2024-07-18 13:50:04
820
原创 如何用 JavaScript 模拟点击事件，简单实现 x, y 坐标点击？
在前端开发中，有时我们需要模拟点击页面上的某个位置，比如自动化测试或者模拟用户操作。今天，我将一步步带大家实现这个功能，让大家能够轻松理解并应用。什么是 x, y 坐标点击？简单来说，x 和 y 坐标就是页面上的一个点的位置。x 代表水平方向，y 代表垂直方向。我们通过这两个数值可以准确地定位到页面上的某个点，然后在这个点上模拟一次点击，就像用户用鼠标点击一样。如何通过 x, y 坐标模拟点击？我...
2024-07-17 08:01:09
253
原创 开源日历 Cal.com 项目：自定义你的时间管理（Github项目分享）
如果你是日常使用Calendly等时间安排工具的人，那么你一定知道这些工具确实方便了我们的生活，不管是商务会议、瑜伽课程还是家庭通话。然而，这些工具在控制和自定义方面往往有所局限。这时候，Cal.com应运而生。什么是Cal.com？Cal.com是一个开源的时间安排工具，被誉为Calendly的继任者。它最大的特点就是完全开源，你可以完全掌控自己的数据、工作流程和外观设计。不管是自托管还是使用官...
2024-07-17 08:01:09
755
原创 Liveblocks 让你轻松实现复杂的协作功能（Github项目分享）
在如今这个快节奏的数字时代，实时协作已经成为了提高团队效率和创新能力的关键。许多SaaS公司在用户增长和用户参与度上面临挑战，原因就在于他们的产品设计未能满足现代工作方式的需求。团队在日常工作中寻求协作，但却往往被繁琐的邮件、Slack链接分享和多种工具之间的切换所困扰。工作变得支离破碎，效率低下。而那些迅速崛起的公司，如Figma、Linear和Notion，他们的成功秘诀是什么？他们完美地实现...
2024-07-16 08:00:08
408
原创 如何用原生JavaScript检测DOM是否已加载完成？
在前端开发中，我们经常需要知道网页的DOM（文档对象模型）是否已经加载完毕。对于初学者来说，这可能听起来有些复杂，但其实我们可以通过简单的JavaScript代码来实现这一目标，而不需要依赖任何框架或库。本文将带你一步步了解如何实现这一点。什么是DOM？在讲具体方法之前，我们先来了解一下什么是DOM。DOM（文档对象模型）是网页的结构化表示，它将HTML文档表示为一个树形结构。浏览器会解析HTML...
2024-07-16 08:00:08
452
转载 再见了JS、TS！前端Rust已成风气！
2024下半年，产业转型加速，互联网进一步内卷已成风气，前端的突破点和进阶方向在哪？长期来看，优秀的前端首先要有箭头思维。箭头的方向就是我们发展的方向，箭头的长短就代表了那个方向上的能力大小。不要只盯着老板、公司的向量看，其实自己也是个向量，应该有自己的发展方向。落地到技术层，未必只专注现公司业务所需的技术，更要拉高视野，体系化打开学习思路。好比很多人还在撸JS源码，但从去年起，「Rust」已是高...
2024-07-15 08:01:29
36
原创 如何将JS对象的所有键名转换为小写？
在开发 JavaScript 应用时，有时候我们需要将对象的所有键名统一转换为小写，这样可以避免由于键名大小写不一致而导致的错误。接下来，我将分享一个简单的方法来实现这个需求。实现步骤要将 JavaScript 对象的所有键名转换为小写，可以按以下步骤进行：使用 Object.entries 方法将对象转换为键值对数组。使用 Array.prototype.map 方法遍历数组，将每个键名转换为小...
2024-07-15 08:01:29
254
转载 聊一聊ES2024有啥新特性
JavaScript作为前端开发的主力语言，每年都在不断进步和优化。2024年，ECMAScript（简称ES）推出了最新版本ES15，为开发者带来了许多新的功能和改进。本文将带你一探ES2024的主要新特性，看看这些更新如何提升JavaScript的功能性和开发体验。1. 管道操作符（|>）管道操作符（|>）让代码更加可读和易于维护。它允许我们将一个函数的输出直接作为下一个函数的输入...
2024-07-14 13:13:29
39
原创 ES2024新特性：object.groupBy()让分组更简单
2024年初，JavaScript（也称为Ecma Script）推出了一项全新的内置函数——object.groupBy()。这一创新功能将彻底改变我们对数据进行分组和组织的方式！什么是object.groupBy()？复杂定义：object.groupBy()是一个静态方法，允许你基于提供的回调函数对可迭代对象（如数组）中的元素进行分组。最终会生成一个新的对象，该对象的每个属性都是一个组，每个...
2024-07-10 08:03:16
623
转载 吃透这套前端技术面经，offer多了6个！
前天加完班，回家路上翻了下粉丝群。发现群里最近在疯传一份叫《前端offer收割机养成指南》的资料。本来感觉这个title看起来有点离谱，结果没想到仔细一看，这份资料竟然真的有点东西。内容收纳的很全，而且融合了很多今年的新玩意。据我所知有人靠它拿下了45k+的offer…后来我辗转找到了这份资料的整理人，果然是位大佬！他是现任阿里前端Leader，在前端行业深耕近十年，见证了互联网的飞速发展，也见证...
2024-07-10 08:03:16
51
原创 如何高效检查JavaScript对象中的键是否存在
在日常开发中，作为一个JavaScript开发者，我们经常需要检查对象中某个键是否存在。这看似简单，但其实有多种方法可供选择，每种方法都有其独特之处。本文将介绍几种检查JavaScript对象键的方法，并比较它们的性能。问题背景假设我们有一个简单的对象：const user = { name: 'John', age: 30 };我们想在访问name键之前检查它是否存在：if (user...
2024-07-09 11:19:07
298
原创 如何理解JavaScript代理对象（JavaScript Proxy）
JavaScript的Proxy对象是一种强大且灵活的特性，它允许你拦截并自定义对对象执行的操作。自ECMAScript 6（ES6）引入以来，Proxy对象为控制对象的基本操作行为提供了一种机制，使高级用例和改进的安全性成为可能。代理对象的基础一个Proxy是由两个主要组件创建的：目标对象和处理器。目标对象是你想拦截操作的原始对象，处理器是一个包含名为陷阱的方法的对象，这些方法定义了这些操作的自...
2024-07-08 20:44:40
696
转载 TensorFlow.js 入门指南：让你的JavaScript应用拥有机器学习能力
随着机器学习技术的普及，不再仅限于Python和数据科学专家。通过TensorFlow.js，你可以将强大的机器学习能力带入你的JavaScript应用中。不论是网页、移动端还是桌面应用，集成机器学习都能显著提升功能性和用户体验。在本指南中，我们将探讨如何设置TensorFlow.js，构建和训练模型，并实现实际应用。机器学习与TensorFlow.js简介在深入细节之前，让我们先了解一些基本概念...
2024-07-07 09:00:12
66
转载 聊一聊如何在Next.js项目中集成AI模型
在现代Web开发领域，将人工智能（AI）模型与Next.js结合，已经成为一种革命性的方法。随着开发者不断寻求创新方式来提升用户体验，将OpenAI等前沿AI模型集成到Next.js应用程序中，展示了一种强大的协同作用。这篇文章将探索Next.js与OpenAI及其他AI技术结合的巨大潜力和变革性优势，为智能、数据驱动的Web应用程序铺平道路。Next.js的强大之处：在深入探讨AI之前，让我们先...
2024-07-06 20:48:07
24
原创 GitHub开源推荐：AI加持的Notion风格编辑器Novel
在现代内容创作和协作平台中，Notion无疑是备受推崇的一款工具。而现在，有一个开源项目——Novel，它不仅提供了类似Notion的所见即所得（WYSIWYG）编辑功能，还集成了强大的AI自动补全功能，极大地提升了编辑体验。项目地址和展示https://github.com/steven-tey/novel部署你的Novel如果你想快速体验Novel，你可以通过Vercel一键部署自己的版本。点...
2024-07-05 08:01:03
422
转载 聊一聊 Tailwind CSS 的新功能：Signals信号机制
大家好！今天要和大家分享一个关于 Tailwind CSS 的实验性新功能——Signals 信号机制。这项功能的引入，旨在让我们在编写 CSS 时能够更加简洁高效，尤其是在处理祖先组件状态变化的情况下。什么是 Signals 信号机制？简单来说，Signals 是一种声明式的状态消费方式，允许 DOM 中的任意子元素根据祖先组件的状态进行相应的样式变化。与传统的伪类（pseudo-classes...
2024-07-04 08:00:18
25
原创 快速打造属于你的AI聊天助手：ChatHN开源项目分享
今天给大家介绍一个超酷的开源项目——ChatHN！这是一个基于OpenAI Functions和Vercel AI SDK的AI聊天机器人，能够使用自然语言与Hacker News API进行互动。想了解最新的科技动态或者热门话题？ChatHN都能帮你轻松搞定！项目地址和展示https://github.com/steven-tey/chathn部署你自己的ChatHN你也可以通过 vercel ...
2024-07-04 08:00:18
322
转载 如何在React中使用自定义Hook与Axios进行API交互，提升开发效率
React的Hook让我们可以在函数组件中管理状态和副作用。在这篇文章中，我们将创建一个自定义的Hook，用来通过axios处理API请求。自定义Hook：useApi首先，让我们创建一个名为useApi的自定义Hook。这个Hook将有两个状态：data用于存储API的响应，error用于存储请求过程中发生的任何错误。接着，我们定义两个方法：get用于发送GET请求，post用于发送POST请求...
2024-07-03 08:00:17
32
原创 Precedent，打造高效Next.js项目的新选择（GitHub项目分享）
在Next.js项目开发中，选择合适的组件、hooks和工具是提升效率和代码质量的关键。今天给大家介绍一个超级好用的工具集——Precedent，它不仅包含了一系列精心设计的组件和hooks，还提供了诸多实用的开发工具，帮助你快速构建高性能的应用。项目地址https://github.com/steven-tey/precedent一键部署使用Precedent，你可以通过以下按钮一键部署到Ver...
2024-07-03 08:00:17
439
转载 React 新钩子 useActionState，让表单状态更新更智能
今天我要向大家介绍一个 React 中令人兴奋的新钩子——useActionState。什么是 useActionState？useActionState 是一个新推出的 React 钩子，用于帮助我们根据表单操作的结果更新状态。它就像一个聪明的小助手，能记住我们的状态，并在提交表单时进行相应的更改。官方文档请查阅????https://react.dev/reference/react/useActi...
2024-07-02 08:01:00
50
原创 基于React和TypeScript的开源白板项目（Github项目分享）
在学习前端开发的过程中，有时候我们需要一些有趣的项目来提升我们的技能。今天我要给大家介绍的是一个非常酷的项目——NinjaSketch，这是一个用React和TypeScript构建的简易白板工具。这个项目使用了Rough.js来实现手绘风格的效果。尽管这个应用不是响应式的，但它的功能非常强大，适合用来练习和学习。开源地址https://github.com/mirayatech/NinjaSke...
2024-07-02 08:01:00
820
转载 yyds！懂行的前端人已经开始用这套资源了！
最近在网上看到很多人找前端工作一直碰壁，甚至有些人心态崩溃都产生转行的想法，今天通过这篇文章，以一个8年经验老开发的角度，分享一套大而全的面试资料合集。不可否认，现在找工作要比之前难一些，但这是经济下行带来的，你不干前端，去干别的，也一样不好找工作。那些说什么前端已死、互联网已死的请绕道。这套资料涵盖了「中大厂面试考点、难点」，从八股文到框架底层和面试真题都有，400+面试题，3套+面试资料，领取...
2024-07-01 08:01:18
18
转载 分享12 种 Vue 设计模式
设计模式，说白了就是写代码的“套路”。用好了，你的代码就能更健壮，更易于维护。几乎所有应用都会遇到一些共性问题，设计模式就像一个宝库，提供了很多经过验证的解决方案。可关于 Vue 中的设计模式，很多人都说不清道不明。尤其是 Vue 独有的设计模式，更是少有人提及。今天，我就来给大家分享 12 种 Vue 设计模式，每个模式都附带一个简单的例子，让你快速上手！这只是个开胃菜，想要深入学习，还需要花更...
2024-07-01 08:01:18
37
原创 玩转 TypeScript 的 Record 类型
在计算机科学中，记录（Record）是一种包含多个字段的数据结构，这些字段可能有不同的类型。在 TypeScript 中，Record 类型让我们可以定义字典（又称为键值对），其中键和值都有固定的类型。简单来说，Record 类型让我们可以定义字典的类型，也就是它的键和值的类型。在这篇文章中，我们将深入探讨 TypeScript 中的 Record 类型，了解它是什么以及如何使用它。我们还会研究如...
2024-06-30 09:00:18
918
原创 前端小案例，用锚点（哈希值）实现Tab组件切换
在前端开发的世界里，使用现代化的技术和方法来实现常见的组件是非常重要的。今天，我们将通过一个具体的案例来展示如何使用现代化的CSS和ES6来创建一个优雅且功能丰富的Tab组件。本文将详细介绍实现思路、代码分析，并提供一些实用的开发技巧。案例展示：Tab组件让我们先来看一下这个Tab组件的效果。这个组件包含四个标签页：Analytics（分析）、Reports（报告）、Performance（表现）...
2024-06-29 09:02:38
288
转载 TypeScript 5.5 新特性：增强的模块化、精确性和灵活性
一、独立声明文件（Isolated Declarations）：提升代码模块化和可维护性TypeScript 5.5 引入了独立声明文件的概念，让开发者可以编写独立编译和验证的声明文件（.d.ts 文件），无需依赖完整的源代码。这一特性使得代码更加模块化和易于维护，尤其适合大型项目。二、类型谓词推断：更精确的类型检查TypeScript 5.5 增强了类型谓词推断功能，让代码的类型检查更为精确。来...
2024-06-29 09:02:38
64
原创 玩转GSAP与barba.js，实现炫酷页面切换效果
GSAP（GreenSock Animation Platform）是一个强大的JavaScript动画库，专注于高性能、灵活性和跨浏览器兼容性。它可以轻松创建复杂的动画效果，被广泛应用于网页设计和开发中。而barba.js则是一个轻量级的页面过渡库，通过与GSAP结合，可以实现无缝的页面切换效果，提升用户体验。案例展示今天我们将通过一个实战案例，来展示如何使用GSAP和barba.js制作一个炫...
2024-06-28 08:01:06
354
原创 使用GSAP库打造酷炫网页文字动画效果
大家好，今天我们来聊一聊一个非常实用的动画库——GSAP（GreenSock Animation Platform）。无论你是前端新手还是有经验的开发者，GSAP都能帮你轻松实现复杂的动画效果。接下来，我们通过一个简单的案例来了解GSAP的强大功能，并一步步分析其实现过程。什么是GSAP？GSAP，全称GreenSock Animation Platform，是一个高性能的JavaScript动画...
2024-06-26 11:02:57
857
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人