- 博客(707)
- 资源 (1)
- 收藏
- 关注
RSS订阅转载 Next.js 15 改变游戏规则
Next.js 15 正式发布了！这个版本带来了惊人的性能提升和一系列革新功能，构建全栈应用从未如此简单高效。来看看有哪些重要更新。1. 开发体验大幅提升全新 create-next-app项目创建界面焕然一新，不仅更加美观，而且构建速度提升了惊人的 700 倍！对此：Turbopack 正式集成号称"世界最快的模块打包工具"现在可以轻松启用：性能对比：比 Webpack 快 700 倍比 Vit...
2024-10-31 09:03:21
3
转载 数组解构是如何降低 JavaScript 的运行速度
在JavaScript开发中，解构赋值是一个广受欢迎的特性，它让代码更加简洁易读。然而，不同的解构模式可能会对性能产生显著影响。本文将深入探讨数组解构赋值可能带来的性能问题，并提供优化建议。解构赋值的两种模式JavaScript中的解构赋值主要有两种模式：数组解构（ArrayAssignmentPattern）对象解构（ObjectAssignmentPattern）数组解构模式的性能隐患让我们先...
2024-10-28 09:11:28
11
转载 了解 TypeScript 中的实用类型：人人都应使用的 7 个强大示例
在TypeScript的世界里，类型系统不仅仅是静态类型检查的工具，更是提升代码质量和开发效率的强大武器。今天，我将深入探讨七个essential的实用工具类型，这些工具类型不仅能够简化代码，还能让开发过程更加高效和富有表现力。1. Partial：灵活处理可选属性Partial将类型T的所有属性转换为可选属性，这在处理需要更新或部分数据的场景中特别有用。interfaceUser{na...
2024-10-23 09:04:51
21
转载 这一新的 JavaScript 操作符绝对能改变游戏规则
在JavaScript的发展历程中，我们不断见证着语言特性的革新。最近，一个名为"安全赋值操作符"（?=）的新特性引起了广泛关注。这个操作符不仅简化了错误处理的流程，还大大提高了代码的可读性和简洁性。传统上，我们处理可能抛出异常的代码时，常常需要使用try-catch块：而现在，借助?=操作符，我们可以将上述代码简化为：这种写法不仅消除了深层嵌套，还提供了更直观的错误处理方式。?=操作符允许我们在...
2024-10-21 16:30:02
15
转载 从 ES2021 到 ES2023 的 13 个实用的 JavaScript 新功能
以下是 ECMAScript 从 ES2021 到 ES2023 中引入的一些有用且令人兴奋的功能：ES2021String.prototype.replaceAll()：使用该方法可以替换字符串中出现的所有子串。逻辑赋值运算符（&&=、||=、??=）：这些运算符将逻辑运算符（AND、OR、nullish coalescing）与赋值相结合ES2022（拟议）Array.prot...
2024-10-18 09:14:20
18
转载 停止使用 .forEach：使用 for...of 循环改造你的代码
在JavaScript和TypeScript开发中，数组迭代是一项常见任务。许多开发者习惯性地使用.forEach方法，因为它简单直观。然而，ES6引入的for...of循环提供了更强大、更灵活的迭代方式。本文将探讨为什么应该考虑使用for...of循环，以及它如何提高代码效率和表达能力。基础对比：.forEach vs for...of.forEach方法：constcolors=['红'...
2024-10-16 09:13:03
30
转载 2024 年，你能放弃 CSS 预处理器吗？
随着前端技术的飞速发展,CSS预处理器已经成为许多项目中不可或缺的一部分。然而,随着原生CSS的不断进化,一个值得思考的问题浮出水面:在2024年,我们是否还需要CSS预处理器?CSS预处理器的兴起与发展CSS预处理器诞生于原生CSS能力不足的年代。Sass作为最早的CSS预处理器,诞生于2007年,至今已有17个年头。而相对较新的Stylus也已发布14年之久。这些工具为开发者带来了更灵活、更高...
2024-10-14 08:42:45
31
转载 前端恶趣味：我吸了juejin首页，好爽!
今天带来一篇和工作无关的文章。常规的前端业务，其实挺繁琐的，但其实我们可以做一些有意思的事情。当年百度首页的机器人动画，把整个页面内容打碎的特效，也是惊艳了一众前端啊。文本的作者，也是做了一个有意思的事情，把页面内容以动画的形式，逐个吸收掉，看动画有点像孙猴子的金箍棒在收妖精感兴趣的同学可以看看，自己能不能有机会用上下面是正文部分。有位古人说过，人不是在烦的路上，就是正在烦！最近在逛某乎，总是会...
2024-10-11 09:10:13
28
转载 ?? 与 || 在 JavaScript 中的微妙差别
起初，你可能会认为你可以随意替换任何你喜欢的人，对吗？错误。他们并非你所想的那样。我们必须一劳永逸地学习这个区别，以避免日后出现痛苦的错误。这个差别是什么？这是他们对待真值和假值的令人难以置信的对比。这些是什么？假值：在 Boolean() 或 if 中变为 false ：0undefinednullNaNfalse'' （空字符串）Truthy：所有其他的事情：现在看看创建一个这样的 || 链时...
2024-10-10 09:08:03
61
转载 向满屏的 Import 语句说再见！
密集的导入语句不仅对视觉造成冲击，也是对代码组织结构的一次考验。如何优雅地管理这些导入语句，避免“全屏占用”？本文将探讨生成大量导入语句的原因，可能带来的问题，以及如何从多个角度优化和管理导入语句。拒绝使用模块重新导出模块重新导出是一种常见技术，广泛应用于Twitter、字节跳动和谷歌等大公司的组件库中。例如，在字节跳动的arco-design组件库中：https://github.com/arc...
2024-10-09 09:14:52
149
转载 我们忘记了前端基础知识
在所有最新的趋势和无尽的范例中，我们似乎忘记了前端开发的基础。最近 Pavel Pogosov 注意到了一些改变他对这个行业看法的事情。似乎在所有无尽的趋势、范式和新奇中，我们忘记了前端开发的核心。在这篇文章中，Pavel Pogosov 想分享一些最近项目中的代码片段，并试图解释他的想法。无尽的过度复杂化这里有一个最基本的卡片组件，它有一个可选的 header 属性。如果这个属性存在，我们会将其...
2024-10-08 09:11:27
54
转载 8 种现代 JavaScript 响应式模式
响应性本质上是关于系统如何对数据变化作出反应，有不同类型的响应性。然而，在这篇文章中，我们关注的是响应性，即响应数据变化而采取行动。作为一名前端开发者，Pavel Pogosov 每天都要面对这个问题。因为浏览器本身是一个完全异步的环境。现代 Web 界面必须快速响应用户的操作，这包括更新 UI、发送网络请求、管理导航和执行各种其他任务。尽管人们常常将响应性与框架联系在一起，Pavel Pogos...
2024-09-30 09:04:45
207
转载 这个 TypeScript 技巧将让你大开眼界
TypeScript 是一个了不起的工具，可以用来操纵现有数据并开发出优秀的实践方法。今天我们将探索如何从字符串数组中正确提取全名，以确保输出的类型安全和干净。问题我们检查一下这段代码并理解它的问题：constnames=["DanielCraciun","JohnDoe","HarryPigeon"]constfindName=(surname:string)=&g...
2024-09-29 09:05:31
333
转载 CommonJS 和 ES Module 终于能够互相兼容了
ECMAScript Module（ESM）逐渐成为现代 JavaScript 开发中的公认行业标准。自从 ESM 被引入到 Node.js 以来，其异步加载特性和模块解析逻辑受到了广泛欢迎。然而，由于历史原因，许多现有代码库和第三方库仍然依赖于 CommonJS（CJS）模块系统。由于 ESM 的设计是异步加载的，这两种模块化方案一直无法共存，这成为了许多开发者的一个主要痛点。最近，开发者 jo...
2024-09-27 09:07:36
141
转载 Tailwind Classes 我希望早点知道的
以下是一些我希望早点知道的 Tailwind 类，这些类使我的开发过程更加高效，让我的设计更加精致。line-clampline-clamp 类在处理多行文本截断时非常有用。它允许你控制显示的文本行数，并截断其余部分。这对于创建一致外观的元素（如博客摘要、卡片描述和其他文本密集型组件）特别有用。<pclass="line-clamp-3">Loremipsumdolor...
2024-09-26 09:08:44
47
转载 前端JS发起的请求能暂停吗？
在讨论前端JS发起的请求是否能暂停时，需要明确两个概念：什么状态可以被认为是“暂停”？以及什么是JS发起的请求？如何定义暂停？暂停指的是临时停止一个已经开始但尚未完成的过程。这意味着这个过程可以在某个时间点被中断，并在另一个时间点恢复。什么是请求？首先，让我们介绍一下TCP/IP网络模型。网络模型从上到下分为应用层、传输层、网络层和网络接口层。上图表示，每次网络传输，应用数据都需要通过网络模型逐层...
2024-09-25 09:06:17
308
转载 如果没有这个 JavaScript 功能，95%的用户会讨厌使用你的应用程序
学习这个强大的 JS 特性，可以极大地提高用户体验，阻止用户放弃你的应用。并大大节省成本。他们会讨厌你的应用程序没有它，他们会因为糟糕的用户体验而感到恼火，永远不会回来。示例：想象一下，已经创建了一个出色的 AI 写作助手，为编写引人入胜的故事提供有用的建议：已经在 handleChange 中为请求设置好了API：exportfunctionAssistantUI(){const[...
2024-09-24 09:06:52
52
转载 TypeScript 组件开发中的常见问题
在现代前端开发中，TypeScript 由于其强大的类型系统和对 JavaScript 的增强功能，已成为许多团队的首选。特别是在大型项目和组件库的开发中，TypeScript 可以显著提高代码的可维护性、可读性和可靠性。然而，在实际开发过程中，我们经常发现一些团队成员对使用 TypeScript 仍然存在疑虑和困惑。他们可能会觉得 TypeScript 增加了开发的复杂性，或者不知道在某些场景下...
2024-09-23 09:16:48
77
转载 VSCode 的真正竞争对手即将到来：LiteXL
几十年前，我们通常使用通用文本编辑器和专用集成开发环境（IDE）来编写各种编程语言的代码。我还记得用微软记事本学习 Java 和 C。后来，程序员开始使用带有基本代码编辑功能（如语法高亮）的文本编辑器，这些特殊文本编辑器如 Notepad++ 和 Sublime Text 被称为代码编辑器。同时，IDE 也帮助开发者高效地编写源码，但它们仅限于特定的技术栈。例如，曾用 Visual Basic 6...
2024-09-19 09:10:03
195
转载 应该立即学习的鲜为人知的 CSS 特性
随着 WWW（万维网）的发明，一个新的数字时代诞生了。早期的 WWW 仅包含纯 HTML 文档，这些文档使用语义 HTML 标签来区分网页元素之间的基本样式。后来，CSS 作为一种基于键值的简单样式语言被引入，用于为语义 HTML 标签设置样式。CSS 不断演进，现如今，网页设计师可以使用 CSS 创建现代风格、动画、响应式元素和图像滤镜，且语法对开发者友好。现代 CSS 标准不仅仅是基本的键值语...
2024-09-18 09:00:31
495
转载 8个Promise高级技巧，让你在前端开发中如虎添翼！
在JavaScript项目中，Promise 的使用是必不可少的。然而，我发现许多中高级前端开发人员仍然停留在常见的promiseInst.then()、promiseInst.catch()、Promise.all甚至async/await等常规实践上，并没有深入理解它们。实际上，Promise 有许多巧妙的高级用法，其中一些在ALOVA请求策略库中广泛使用。ALOVA 是一个基于 Promis...
2024-09-13 09:20:01
125
转载 10 个罕见的 HTML 标签，几乎无人使用 - <dialog>、<bdo>等等
HTML 的内容远不止 <div> 、<a>和 <p> 。如此多更复杂、更强大的标签，你可能从未使用过。具有从交互式图像到复杂的 UI 组件的有趣功能。1. <progress> 和 <meter>但是，接下来就是 meter -- 也被称为 progress 在横行：2. <dfn>dfn -- 用于我们将在页面中定义的任何...
2024-09-12 08:26:12
143
转载 突破与创新：Vue.js 创始人 尤雨溪 2024 年度技术前瞻
本文将深入探讨以下主题的 尤雨溪 见解：Vite 5对Vue的影响、宏、vapor模式、常见误解、新特性或功能、未来版本对Option API的支持、VitePress等。. 2.尤大的问答环节2.1. Vite 5如何提升Vue的性能？Vite在提高性能方面的工作通常是针对Vite本身的。然而，任何使用Vite的人都能获得相同的好处。此外，还提到了一个重要细节：建议用户更新到最新版本的"vite...
2024-09-11 09:29:27
208
转载 10 个必备技巧，让 VS Code 运行更快，提高编程速度（0 到 100）
95%的开发者都在浪费VS Code的潜力。VS Code有许多隐藏的宝藏功能,可以提升您的生产力和使用体验 — 但大多数人并没有使用它们。使用这10个实用技巧来逐步增强VS Code的功能,让您编码更快:包括强大的扩展、鲜为人知的快捷键、美观的字体和配色方案等等。1.首先从基础开始从基本功能入手。学习重要的键盘快捷键一旦掌握这些快捷键,你的编码速度将大大提高用Shift + 左/右箭头来左右选择...
2024-09-10 09:16:14
76
转载 2024年新的原生嵌套CSS特性：绝对改变游戏规则
新的原生嵌套CSS特性彻底改变了前端开发。❌ 之前：你会如何为这些嵌套的HTML元素添加样式？<section>你好！<div><p><span>codingbeautydev.com</span>--以编码为激情</p><p>编码帮助你实现...
2024-09-06 09:24:35
154
转载 ES15 (2024)中5个令人惊叹的新JavaScript特性
2024年:又是一个带来全新JS特性升级的不可思议的年份,ES15推出。从复杂的异步特性到语法糖数组和现代正则表达式,JavaScript编码现在比以往任何时候都更简单、更快捷。1.原生数组分组终于到来Object.groupBy():constfruits=[{name:'pineapple????',color:'????'},{name:'apple????',color:...
2024-09-04 09:17:13
383
转载 10个几乎无人使用的罕见HTML标签
HTML远不止<div>、<a>和<p>这些标签。还有许多更复杂、功能更强大的标签，很多开发者几乎从不使用。这些标签具有从现代列表可视化到????彩色高亮等有趣功能。1.<abbr>标签<abbr>标签用于定义缩写或首字母缩略词，如HTML、CSS和JS。也包括LOL——尽管现在它更像是一个独立的词。I'mreadingabout<...
2024-09-03 08:12:49
153
转载 你实际上可以用这5种方式打破 JavaScript 中的 forEach 循环
你能在 JavaScript 中跳出 "forEach" 循环吗？这是一个很棒的问题，可以挑战你对 JavaScript 的真正了解程度。因为我们不是在讨论 for 循环 — 否则这将会非常简单：你只需要使用 break：但你不敢在 forEach 中这样做，否则会发生灾难：那 return 呢？嗯...你认为这里会发生什么：return 应该在 5 时轻松结束循环并带我们到外部的 log，对吧？...
2024-09-02 08:22:56
151
转载 如何用知名Symbol黑掉JavaScript（5种方法）
他们称之为知名符号 — 尽管大多数开发者从未使用过它们，甚至从未听说过它们。这是一个非常酷的功能，你可以用它来实现这样的魔法：你将看到我们如何使用知名 Symbol 构建这些类来实现这一点。它们全都是关于完全定制内置操作（如for..of）的正常行为。这就像C++和C#中的运算符重载。它们也都是Symbol类的静态方法。1. Symbol.hasInstance首先我们有Symbol.hasIns...
2024-08-30 08:54:18
125
转载 ES14中5个最具变革性的JavaScript特性
JavaScript在过去10年里取得了长足的进步，每年都有全新的功能升级。让我们来看看ES14（2023年）中引入的5个最重要的特性，看看你是否错过了其中一些。1. toSorted()甜美的语法糖。ES14的toSorted()方法使得排序数组并返回一个副本而不改变原数组变得更加容易。以前我们这样做：constnumbers=[3,1,4,1,5];constsorted=...
2024-08-29 09:01:39
60
转载 Next.js 15震撼发布:7大革命性更新,前端性能又又提升了
作为领先的现代前端框架,Next.js 15引入了一系列创新功能和改进,旨在提高开发效率????并增强应用性能⚡。1.支持React 19 RCNext.js 15版本现在支持React 19 RC,这意味着开发者可以立即体验React最新版本带来的新特性。React 19 RC在客户端和服务器端都引入了新功能,如Actions,这将大大简化我们的代码逻辑。更新指南:npminext@rcreac...
2024-08-28 09:19:59
72
转载 Promise：为什么没有取消？
在JavaScript中，Promise是用于处理异步操作的对象，它代表一个异步操作的最终完成（或失败）及其结果值。然而，JavaScript的Promise并不提供内置的取消（cancel）机制。Promise是经过了深思熟虑，才不自带取消功能的！！！这篇文章，将围绕着设计的哲学，以及从状态机的角度，解释为什么不需要cancel。即使如此，文章最后部分，还是会提供一些方法，来实现一下cancle...
2024-08-27 09:16:22
46
转载 30+ 个工作中常用到的前端小知识（干货）
作者：隐冬https://juejin.cn/post/69086988270338375751. JS为什么单线程一个简单的原因就是，js在设计之初只是进行一些简单的表单校验，这完全不需要多线程，单线程完全可以胜任这项工作。即便后来前端发展迅速，承载的能力越来越多，也没有发展到非多线程不可的程度。而且还有一个主要的原因，设想一下，如果js是多线程的，在运行时多个线程同时对DOM元素进行操作，那具...
2024-08-26 08:59:27
47
原创 React Hook Form：指南与示例
表单是用户与网站和Web应用程序交互的重要组成部分。验证用户通过表单提交的数据是开发者的一项关键职责。React Hook Form是一个帮助在React中验证表单的库。它是一个没有其他依赖项的精简库，性能优越，使用简单，开发者可以比使用其他表单库写更少的代码。在本指南中，您将学习如何使用React Hook Form库在React中构建表单，而无需使用复杂的渲染属性（render props）或...
2024-08-23 08:23:38
976
转载 10个你应该立即卸载的VS Code扩展
前端岗位内推来了你知道你现在有多少个VS Code扩展吗？我：多达56个。如果你发现VS Code随着时间变得越来越慢、越来越耗电，那么这个数字可能就是原因所在。因为每一个新的扩展都会增加应用程序的内存和CPU使用量。编程已经够具有挑战性了；没有人需要再与这样的事情抗争：所以我们需要尽量减少扩展的数量，以减少资源使用；同时还要防止这些扩展相互冲突或与原生功能冲突。你知道，在市场中有相当多的扩展提供...
2024-08-22 09:16:09
35
转载 8 个解决移动端 1px 边框困境的方案
您是否注意到 1px 边框在移动设备上有时会显得比预期的要粗？这种不一致源于移动屏幕的像素密度不同。在 Web 开发中，我们使用 CSS 来设置页面样式。但是，CSS 中的 1px 并不总是转换为设备上的物理 1px。这种差异就是我们的“1px 边框问题”产生的原因。罪魁祸首：像素密度每个设备都拥有特定的像素密度，由 devicePixelRatio 测量，它告诉我们物理像素与设备独立像素之间的比...
2024-08-21 09:11:06
43
转载 不用纠结了！所有 JavaScript 框架正在走向融合
去年，Google Angular负责人Minko Gechev在dotJS会议上的演讲中表示，Angular和React本质上是相同的框架。这在JavaScript业界中是一个激进的说法，开发者甚至被鼓励构建自己的框架。毕竟，Angular使用类和模板，而React使用函数和JSX，他承认。但在底层，它们提供了相同的功能。Gechev表示，Google赋予他一个任务，他认为这可能是Web开发中的...
2024-08-20 09:06:16
30
转载 带你看看前端生态圈的技术趋势 state-of-js 2023 详细解读
本文作者：赵越 — 字节跳动前端工程师一、写在前面本次分享的数据来源是state-of-js，是由Devgraphics开源社区团队发起的前端生态圈中规模最大的数据调查。由于这个分享话题很大，涉及到的技术很多，所以很多可以深挖的技术只能一笔带过，但能出现在本次调查里的，都是有一定闪光点且有一定热度的技术，如果感兴趣的话可以深入了解。这次的调查结果比去年晚了将近四个月，这主要是因为，启动新的s...
2024-08-19 09:00:47
48
转载 腾讯一面：let、const解决了什么问题？
前言今天来聊一聊腾讯的一个面试题，let、const解决了什么问题？let、const解决了什么问题？我们来分析一下这个问题首先这个问题问我们let、const解决了什么问题？我们就需要去分别讲解一个let和const是干什么用的首先let和const是es6后面才有的东西，既然问到这个说明面试官的问题聚焦到了es6的范围既然如此我们就一定知道我们首先需要讲一下let和const是干什么的还要说明...
2024-08-16 09:26:30
27
转载 一文吃透前端性能优化
今天这篇文章深入探讨了前端性能优化的各个方面，从衡量标准到具体的优化策略，提供了丰富的信息和实用的代码示例。文章干货很足，值得大家好好阅读。以下是正文：在当今数字时代，网站的性能对于吸引和保留用户至关重要。用户不愿意等待缓慢的加载时间，而快速响应的页面将帮助您留住访问者，提升转化率。前端性能优化是实现这一目标的关键因素之一。在本文中，我们将探讨一些重要的前端性能优化策略，以提高网站速度、交互性和用...
2024-08-15 09:10:05
38
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人