- 博客(1663)
- 收藏
- 关注
RSS订阅原创 聊一聊 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
266
原创 如何用JavaScript实现视频观看时间追踪
在网页开发中，跟踪用户与多媒体内容（如视频）的互动是一项常见需求。无论是教育平台、数据分析，还是用户参与度统计，监控用户如何观看视频内容都能提供宝贵的见解。这篇文章将探索如何使用JavaScript实现视频播放时长的跟踪。目标我们的目标是跟踪用户观看视频的总时长，包括暂停的时间，并将这些信息更新到后台系统。我们将通过捕获播放、暂停和结束等事件来计算观看时间。实现步骤让我们来分解一下实现的关键方面：...
2024-07-20 17:00:57
191
原创 如何使用JavaScript原生方法获取元素的背景图片URL？
在日常开发中，我们有时候需要获取某个元素的背景图片URL。在本文中，我将向大家介绍如何使用JavaScript来实现这一需求。获取元素背景图片URL的JavaScript方法要获取元素的背景图片URL，我们可以使用getComputedStyle方法来获取background-image的CSS属性值。举个例子，如果我们有如下HTML代码：<divstyle="background-ima...
2024-07-19 18:19:33
407
原创 JavaScript装饰器初探：简单易懂的初学者入门指南
大家好，今天我们来聊聊一个非常酷的JavaScript特性——装饰器。装饰器（Decorators）最早在Python和Java等语言中广受欢迎，而现在它也逐渐在JavaScript中得到应用。它能让我们的代码变得更加优雅和模块化。这篇文章将带你一步步了解什么是装饰器，并教你如何在项目中使用它们。什么是装饰器？简单来说，装饰器是一种特殊的函数，它可以用来修改类、方法、属性等的行为。通过装饰器，我们...
2024-07-19 18:19:33
287
原创 如何高效删除 JavaScript 数组中的重复元素？
在日常编程中，我们经常会遇到数组去重的问题。今天，我们就来聊聊如何用JavaScript来优雅地解决这个问题。问题描述给定一个包含重复元素的数组，我们希望创建一个新的数组，其中只包含原始数组中的唯一值。例如，如果我们有一个数组 [1, 2, 3, 2, 4, 1, 5]，期望的输出应该是 [1, 2, 3, 4, 5]。方法一：最原始的方法我们可以使用最简单的方法——嵌套循环来解决这个问题。遍历每...
2024-07-18 13:50:04
811
原创 如何用 JavaScript 模拟点击事件，简单实现 x, y 坐标点击？
在前端开发中，有时我们需要模拟点击页面上的某个位置，比如自动化测试或者模拟用户操作。今天，我将一步步带大家实现这个功能，让大家能够轻松理解并应用。什么是 x, y 坐标点击？简单来说，x 和 y 坐标就是页面上的一个点的位置。x 代表水平方向，y 代表垂直方向。我们通过这两个数值可以准确地定位到页面上的某个点，然后在这个点上模拟一次点击，就像用户用鼠标点击一样。如何通过 x, y 坐标模拟点击？我...
2024-07-17 08:01:09
236
原创 开源日历 Cal.com 项目：自定义你的时间管理（Github项目分享）
如果你是日常使用Calendly等时间安排工具的人，那么你一定知道这些工具确实方便了我们的生活，不管是商务会议、瑜伽课程还是家庭通话。然而，这些工具在控制和自定义方面往往有所局限。这时候，Cal.com应运而生。什么是Cal.com？Cal.com是一个开源的时间安排工具，被誉为Calendly的继任者。它最大的特点就是完全开源，你可以完全掌控自己的数据、工作流程和外观设计。不管是自托管还是使用官...
2024-07-17 08:01:09
614
原创 Liveblocks 让你轻松实现复杂的协作功能（Github项目分享）
在如今这个快节奏的数字时代，实时协作已经成为了提高团队效率和创新能力的关键。许多SaaS公司在用户增长和用户参与度上面临挑战，原因就在于他们的产品设计未能满足现代工作方式的需求。团队在日常工作中寻求协作，但却往往被繁琐的邮件、Slack链接分享和多种工具之间的切换所困扰。工作变得支离破碎，效率低下。而那些迅速崛起的公司，如Figma、Linear和Notion，他们的成功秘诀是什么？他们完美地实现...
2024-07-16 08:00:08
397
原创 如何用原生JavaScript检测DOM是否已加载完成？
在前端开发中，我们经常需要知道网页的DOM（文档对象模型）是否已经加载完毕。对于初学者来说，这可能听起来有些复杂，但其实我们可以通过简单的JavaScript代码来实现这一目标，而不需要依赖任何框架或库。本文将带你一步步了解如何实现这一点。什么是DOM？在讲具体方法之前，我们先来了解一下什么是DOM。DOM（文档对象模型）是网页的结构化表示，它将HTML文档表示为一个树形结构。浏览器会解析HTML...
2024-07-16 08:00:08
433
转载 再见了JS、TS！前端Rust已成风气！
2024下半年，产业转型加速，互联网进一步内卷已成风气，前端的突破点和进阶方向在哪？长期来看，优秀的前端首先要有箭头思维。箭头的方向就是我们发展的方向，箭头的长短就代表了那个方向上的能力大小。不要只盯着老板、公司的向量看，其实自己也是个向量，应该有自己的发展方向。落地到技术层，未必只专注现公司业务所需的技术，更要拉高视野，体系化打开学习思路。好比很多人还在撸JS源码，但从去年起，「Rust」已是高...
2024-07-15 08:01:29
25
原创 如何将JS对象的所有键名转换为小写？
在开发 JavaScript 应用时，有时候我们需要将对象的所有键名统一转换为小写，这样可以避免由于键名大小写不一致而导致的错误。接下来，我将分享一个简单的方法来实现这个需求。实现步骤要将 JavaScript 对象的所有键名转换为小写，可以按以下步骤进行：使用 Object.entries 方法将对象转换为键值对数组。使用 Array.prototype.map 方法遍历数组，将每个键名转换为小...
2024-07-15 08:01:29
243
转载 聊一聊ES2024有啥新特性
JavaScript作为前端开发的主力语言，每年都在不断进步和优化。2024年，ECMAScript（简称ES）推出了最新版本ES15，为开发者带来了许多新的功能和改进。本文将带你一探ES2024的主要新特性，看看这些更新如何提升JavaScript的功能性和开发体验。1. 管道操作符（|>）管道操作符（|>）让代码更加可读和易于维护。它允许我们将一个函数的输出直接作为下一个函数的输入...
2024-07-14 13:13:29
24
原创 ES2024新特性：object.groupBy()让分组更简单
2024年初，JavaScript（也称为Ecma Script）推出了一项全新的内置函数——object.groupBy()。这一创新功能将彻底改变我们对数据进行分组和组织的方式！什么是object.groupBy()？复杂定义：object.groupBy()是一个静态方法，允许你基于提供的回调函数对可迭代对象（如数组）中的元素进行分组。最终会生成一个新的对象，该对象的每个属性都是一个组，每个...
2024-07-10 08:03:16
591
转载 吃透这套前端技术面经，offer多了6个！
前天加完班，回家路上翻了下粉丝群。发现群里最近在疯传一份叫《前端offer收割机养成指南》的资料。本来感觉这个title看起来有点离谱，结果没想到仔细一看，这份资料竟然真的有点东西。内容收纳的很全，而且融合了很多今年的新玩意。据我所知有人靠它拿下了45k+的offer…后来我辗转找到了这份资料的整理人，果然是位大佬！他是现任阿里前端Leader，在前端行业深耕近十年，见证了互联网的飞速发展，也见证...
2024-07-10 08:03:16
44
原创 如何高效检查JavaScript对象中的键是否存在
在日常开发中，作为一个JavaScript开发者，我们经常需要检查对象中某个键是否存在。这看似简单，但其实有多种方法可供选择，每种方法都有其独特之处。本文将介绍几种检查JavaScript对象键的方法，并比较它们的性能。问题背景假设我们有一个简单的对象：const user = { name: 'John', age: 30 };我们想在访问name键之前检查它是否存在：if (user...
2024-07-09 11:19:07
281
原创 如何理解JavaScript代理对象（JavaScript Proxy）
JavaScript的Proxy对象是一种强大且灵活的特性，它允许你拦截并自定义对对象执行的操作。自ECMAScript 6（ES6）引入以来，Proxy对象为控制对象的基本操作行为提供了一种机制，使高级用例和改进的安全性成为可能。代理对象的基础一个Proxy是由两个主要组件创建的：目标对象和处理器。目标对象是你想拦截操作的原始对象，处理器是一个包含名为陷阱的方法的对象，这些方法定义了这些操作的自...
2024-07-08 20:44:40
689
转载 TensorFlow.js 入门指南：让你的JavaScript应用拥有机器学习能力
随着机器学习技术的普及，不再仅限于Python和数据科学专家。通过TensorFlow.js，你可以将强大的机器学习能力带入你的JavaScript应用中。不论是网页、移动端还是桌面应用，集成机器学习都能显著提升功能性和用户体验。在本指南中，我们将探讨如何设置TensorFlow.js，构建和训练模型，并实现实际应用。机器学习与TensorFlow.js简介在深入细节之前，让我们先了解一些基本概念...
2024-07-07 09:00:12
48
转载 聊一聊如何在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
19
原创 GitHub开源推荐：AI加持的Notion风格编辑器Novel
在现代内容创作和协作平台中，Notion无疑是备受推崇的一款工具。而现在，有一个开源项目——Novel，它不仅提供了类似Notion的所见即所得（WYSIWYG）编辑功能，还集成了强大的AI自动补全功能，极大地提升了编辑体验。项目地址和展示https://github.com/steven-tey/novel部署你的Novel如果你想快速体验Novel，你可以通过Vercel一键部署自己的版本。点...
2024-07-05 08:01:03
413
转载 聊一聊 Tailwind CSS 的新功能：Signals信号机制
大家好！今天要和大家分享一个关于 Tailwind CSS 的实验性新功能——Signals 信号机制。这项功能的引入，旨在让我们在编写 CSS 时能够更加简洁高效，尤其是在处理祖先组件状态变化的情况下。什么是 Signals 信号机制？简单来说，Signals 是一种声明式的状态消费方式，允许 DOM 中的任意子元素根据祖先组件的状态进行相应的样式变化。与传统的伪类（pseudo-classes...
2024-07-04 08:00:18
18
原创 快速打造属于你的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
318
转载 如何在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
24
原创 Precedent，打造高效Next.js项目的新选择（GitHub项目分享）
在Next.js项目开发中，选择合适的组件、hooks和工具是提升效率和代码质量的关键。今天给大家介绍一个超级好用的工具集——Precedent，它不仅包含了一系列精心设计的组件和hooks，还提供了诸多实用的开发工具，帮助你快速构建高性能的应用。项目地址https://github.com/steven-tey/precedent一键部署使用Precedent，你可以通过以下按钮一键部署到Ver...
2024-07-03 08:00:17
436
转载 React 新钩子 useActionState，让表单状态更新更智能
今天我要向大家介绍一个 React 中令人兴奋的新钩子——useActionState。什么是 useActionState？useActionState 是一个新推出的 React 钩子，用于帮助我们根据表单操作的结果更新状态。它就像一个聪明的小助手，能记住我们的状态，并在提交表单时进行相应的更改。官方文档请查阅????https://react.dev/reference/react/useActi...
2024-07-02 08:01:00
46
原创 基于React和TypeScript的开源白板项目（Github项目分享）
在学习前端开发的过程中，有时候我们需要一些有趣的项目来提升我们的技能。今天我要给大家介绍的是一个非常酷的项目——NinjaSketch，这是一个用React和TypeScript构建的简易白板工具。这个项目使用了Rough.js来实现手绘风格的效果。尽管这个应用不是响应式的，但它的功能非常强大，适合用来练习和学习。开源地址https://github.com/mirayatech/NinjaSke...
2024-07-02 08:01:00
817
转载 yyds！懂行的前端人已经开始用这套资源了！
最近在网上看到很多人找前端工作一直碰壁，甚至有些人心态崩溃都产生转行的想法，今天通过这篇文章，以一个8年经验老开发的角度，分享一套大而全的面试资料合集。不可否认，现在找工作要比之前难一些，但这是经济下行带来的，你不干前端，去干别的，也一样不好找工作。那些说什么前端已死、互联网已死的请绕道。这套资料涵盖了「中大厂面试考点、难点」，从八股文到框架底层和面试真题都有，400+面试题，3套+面试资料，领取...
2024-07-01 08:01:18
14
转载 分享12 种 Vue 设计模式
设计模式，说白了就是写代码的“套路”。用好了，你的代码就能更健壮，更易于维护。几乎所有应用都会遇到一些共性问题，设计模式就像一个宝库，提供了很多经过验证的解决方案。可关于 Vue 中的设计模式，很多人都说不清道不明。尤其是 Vue 独有的设计模式，更是少有人提及。今天，我就来给大家分享 12 种 Vue 设计模式，每个模式都附带一个简单的例子，让你快速上手！这只是个开胃菜，想要深入学习，还需要花更...
2024-07-01 08:01:18
22
原创 玩转 TypeScript 的 Record 类型
在计算机科学中，记录（Record）是一种包含多个字段的数据结构，这些字段可能有不同的类型。在 TypeScript 中，Record 类型让我们可以定义字典（又称为键值对），其中键和值都有固定的类型。简单来说，Record 类型让我们可以定义字典的类型，也就是它的键和值的类型。在这篇文章中，我们将深入探讨 TypeScript 中的 Record 类型，了解它是什么以及如何使用它。我们还会研究如...
2024-06-30 09:00:18
868
原创 前端小案例，用锚点（哈希值）实现Tab组件切换
在前端开发的世界里，使用现代化的技术和方法来实现常见的组件是非常重要的。今天，我们将通过一个具体的案例来展示如何使用现代化的CSS和ES6来创建一个优雅且功能丰富的Tab组件。本文将详细介绍实现思路、代码分析，并提供一些实用的开发技巧。案例展示：Tab组件让我们先来看一下这个Tab组件的效果。这个组件包含四个标签页：Analytics（分析）、Reports（报告）、Performance（表现）...
2024-06-29 09:02:38
285
转载 TypeScript 5.5 新特性：增强的模块化、精确性和灵活性
一、独立声明文件（Isolated Declarations）：提升代码模块化和可维护性TypeScript 5.5 引入了独立声明文件的概念，让开发者可以编写独立编译和验证的声明文件（.d.ts 文件），无需依赖完整的源代码。这一特性使得代码更加模块化和易于维护，尤其适合大型项目。二、类型谓词推断：更精确的类型检查TypeScript 5.5 增强了类型谓词推断功能，让代码的类型检查更为精确。来...
2024-06-29 09:02:38
50
原创 玩转GSAP与barba.js，实现炫酷页面切换效果
GSAP（GreenSock Animation Platform）是一个强大的JavaScript动画库，专注于高性能、灵活性和跨浏览器兼容性。它可以轻松创建复杂的动画效果，被广泛应用于网页设计和开发中。而barba.js则是一个轻量级的页面过渡库，通过与GSAP结合，可以实现无缝的页面切换效果，提升用户体验。案例展示今天我们将通过一个实战案例，来展示如何使用GSAP和barba.js制作一个炫...
2024-06-28 08:01:06
341
原创 使用GSAP库打造酷炫网页文字动画效果
大家好，今天我们来聊一聊一个非常实用的动画库——GSAP（GreenSock Animation Platform）。无论你是前端新手还是有经验的开发者，GSAP都能帮你轻松实现复杂的动画效果。接下来，我们通过一个简单的案例来了解GSAP的强大功能，并一步步分析其实现过程。什么是GSAP？GSAP，全称GreenSock Animation Platform，是一个高性能的JavaScript动画...
2024-06-26 11:02:57
832
原创 适合初学者学习的面向对象编程（OOP）入门指南
面向对象编程（Object-Oriented Programming，简称OOP）是一种编程范式，它强调将软件设计围绕数据（或称为对象）组织起来，而不是传统的函数和逻辑。OOP的核心原则包括封装、抽象、继承和多态。让我们一起来探索这些概念，并看看它们在JavaScript中的实现方式。类和对象类（Classes）类是一种蓝图，用来创建对象。它定义了对象将拥有的属性和方法。就像建房子的图纸一样，图纸...
2024-06-26 11:02:57
1034
原创 使用新H5标签<dialog>，实现点击按钮显示分享链接弹出层交互功能
使用新H5标签，实现点击按钮显示分享链接弹出层交互功能在现代网页开发中，使用新技术和标签来提升用户体验是非常重要的。今天，我们就来聊聊如何利用HTML5的<dialog>标签来实现一个简洁实用的分享链接功能。在过去，我们通常会使用模态框插件（如Bootstrap的Modal）来实现弹窗效果。然而，这些方法依赖于大量的CSS和JavaScript代码。而现在，HTML5提供了原生的<...
2024-06-25 08:00:28
461
原创 如何使用 TypeScript 中的 as const 创建只读对象
在 TypeScript 中，as const 是一个强大的特性，可以用来创建只读对象。这在很多场景下都非常有用，比如：防止数据被意外修改：使用 as const 创建的对象在创建后无法修改，这有助于防止数据在代码的不同部分被意外修改。提高类型安全性：as const 创建的对象具有固定类型，这提高了代码的类型安全性，因为编译器可以确保对象始终具有相同的属性和值。使代码更具可读性：as const...
2024-06-25 08:00:28
605
转载 Promise：为什么没有取消？
在JavaScript中，Promise是用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。然而，JavaScript的Promise并不提供内置的取消（cancel）机制。Promise是经过了深思熟虑，才不自带取消功能的！！！这篇文章，将围绕着设计的哲学，以及从状态机的角度，解释为什么不需要cancel。即使如此，文章最后部分，还是会提供一些方法，来实现一下cancle...
2024-06-24 08:01:11
21
原创 使用 HTML5 新标签 <details> 制作 Accordion 组件（赠送3个相关案例源码）
今天，我要和大家分享一个使用 HTML5 新标签 <details> 制作 Accordion（手风琴）组件的源码。通过这个源码，你可以快速掌握如何在网页中实现可折叠的问答列表功能，非常适合用于 FAQ 页面。案例展示案例效果，如下图所示：了解 <details> 和 <summary> 标签HTML5 引入了很多新的标签，其中就包括 <details&g...
2024-06-23 09:01:43
341
原创 7个高效的TypeScript工具类型，你会用了吗？
在现代Web开发中，TypeScript几乎已经成为默认技术。TypeScript本身就提供了描述代码的方法，但工具类型（Utility Types）就像给你代码加上了“超能力”！这些工具类型能让你的代码更清晰、更简洁，同时还能减少隐藏错误的可能性。今天我们就来聊聊TypeScript中的七个高效工具类型：keyof、ReturnType、Awaited、Record、Partial、Requir...
2024-06-23 09:01:43
367
转载 取代前端岗，中国又一新兴岗位在崛起！这才是程序员未来5年最好的就业方向！...
“大模型狂热”从未停止国内巨头战队华为、百度、阿里在AIGC的厮杀中从通用大模型渗透到各垂类应用市场就连国内创投资本也独宠AIGC企业百度、科大讯飞市值分别增加27亿和45亿美元这导致AI人才需求大幅上涨不少企业开出近100w年薪挖掘大模型人才！！作为程序员，如何抢占先机，享受AI技术带来的红利？！知乎知学堂XAGI课堂 ????全新发布AI大模型公开课 ——利用AI技术吸Jin已为本号粉丝开通免费...
2024-06-22 11:00:11
27
转载 面试官：如何防止接口重复请求？我给出了三个方案！
前言虽然大部分的接口处理我们都是加了loading的，但又不能确保真的是每个接口都加了的，可是如果要一个接口一个接口的排查，那这维护了四五年的系统，成百上千的接口肯定要耗费非常多的精力，根本就是不现实的，所以就只能去做全局处理。下面就来总结一下这次的防重复请求的实现方案：方案一这个方案是最容易想到也是最朴实无华的一个方案：通过使用axios拦截器，在请求拦截器中开启全屏Loading，然后在响应拦...
2024-06-22 11:00:11
30
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人