南城FE的博客_JS那些事

使用JavaScript读取手机联系人列表

本文翻译自 Read Phone Contacts with JavaScript，作者：Alvaro Montoro，略有删改。作者注：本文中描述的技术和流程是实验性的，只能在少数浏览器中工作。在撰写本文时，联系人选择器API仅支持 Android Chrome（从版本80开始）和iOS Safari（从版本14.5开始）。如果要检查是否可使用这个功能，可以访问这个演示网站alvar

前端

Javascript

原创精选 2024-09-02 09:35:18 341 阅读 yyds干货盘点

JavaScript Set 即将支持并集、交集、差集等

本文翻译自 Union, intersection, difference, and more are coming to JavaScript Sets，作者：Phil Nash，略有删改。 JavaScript Set 在 ES2015 规范中引入，但一直感觉不完整。 Set 是一种值的集合，其中每个值只能出现一次。在 ES2015 版本的 Set 中，可用的功能围绕创建、添加、移除以

javascript

前端

原创精选 2024-08-29 14:08:20 236 阅读

JavaScript单行技巧：高效处理数据

本文翻译自 10 one-liners that will change how you think about JavaScript forever，作者：Tari Ibaba，略有删改。本文介绍JavaScript单行程序的独特数据处理能力，单行技巧可以帮助我们更简洁、更高效地处理数据。这些技巧不仅提升了代码的可读性，也减少了代码行数，使代码更加紧凑。以下是一些JavaScript单行

前端

Javascript

原创精选 2024-07-26 09:35:23 246 阅读

炫酷JavaScript文本时钟

今天分享一段简单的 JS 代码，创意来自aem1k.com/qlock，可以将整段 JS 代码字符本身变成时钟，每秒以 HH:MM:SS 的格式显示当前的时间。 JS逻辑实现代码本身也是时钟展示的载体，通过给字符设置不同的高亮颜色来显示当前的时间，离屏幕越远越能更清晰的看到时间的变化。本文解析该代码实现的原理，来看看这份属于程序员的浪漫吧。代码是一个自执行的匿名函数 (r=()=>..

前端

Javascript

原创精选 2024-06-03 13:54:43 418 阅读

如何在 JS 中快速读取文件

假设你需要在服务器上使用JavaScript读取多个文件。在像Node.js这样的运行时环境中，JavaScript有多种读取文件的方式。哪一种是最好的呢？让我们来看看各种方法的测试结果。

读取文件

服务器

前端

nodejs

javascript

原创精选 2024-06-01 10:32:58 162 阅读

实时消息获取技术方案对比

本文翻译自 WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport，略有删改。来源：rxdb.info 对于现代Web应用，从服务器向客户端发送事件的能力是必不可少的。这种必要性导致了几种方法的发展，每种方法都有自己的优点和缺点。最开始长轮询是唯一可用的选项。后来WebSockets取得了不错的效果

客户端

服务器

实时消息

前端

原创 2024-05-20 19:02:54 151 阅读

如何在 Axios 中获取请求 Headers 并处理跨域问题

在使用 Axios 进行网络请求时，访问响应的 Headers 是一种常见的需求，特别是在涉及跨域请求时。本文将介绍如何在 Axios 中获取响应 Headers，并说明在跨域场景下如何处理无法获取特定 Headers 的问题。什么是 Axios？ Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。它可以发送异步 HTTP 请求到 REST 端点并处理响

前端

axios

hearder

跨域

原创精选 2024-04-24 09:46:08 2109 阅读

Vue 之 nextTick 解析

Vue.js 是一个非常流行的前端框架，它提供了许多有用的功能来帮助开发者创建交互式的用户界面。其中，nextTick() 是一个非常重要的工具，用于处理 Vue 中的异步更新。在这篇文章中，我们将详细了解 nextTick() 的工作原理及其使用场景，并通过代码示例来展示其用法。 Vue 的更新机制在 Vue 中，当你更改了数据，视图并不会立即更新。这是因为 Vue 实现了一个异步更新队列。这

Vue

前端

原创 2024-04-23 09:50:19 61 阅读

前端代码规范 - JavaScript 部分规范

本文是前端代码规范系列文章，将涵盖前端领域各方面规范整理，其他完整文章可前往主页查阅~ 在前端开发中，JavaScript 是实现交互性和动态功能的关键语言。为了确保代码的可读性、可维护性和性能，遵循一定的编码规范至关重要。以下是一份前端JS代码规范与最佳实践指南，以下仅是一部分规范供参考，在实际开发中每个项目和团队都有其独特性。**应当根据具体的项目需求和团队习惯来调整，以确保最佳使用规范。

javascript

前端

代码规范

原创精选 2024-04-22 09:26:18 227 阅读

提升用户体验的UUID设计策略

这篇文章讨论了唯一标识符（UUID）在应用程序中的重要性，以及如何通过一些改进来增强用户体验。

typescript

前端

后端

uuid

原创精选 2024-04-21 12:16:45 376 阅读

前端代码规范 - 编辑器&代码风格

在如今快速发展的前端工程领域，团队成员较多时导致编码风格百花齐放，如何保持代码的一致性和可读性成为了开发过程中不可忽视的挑战。

typescript

前端

代码质量

代码规范

原创精选 2024-04-19 09:38:13 204 阅读

JavaScript中处理高速回调与状态更新的问题分析与解决方案

JavaScript中处理高速回调与状态更新的问题分析与解决方案在JavaScript编程中，处理高速执行的回调函数时常会遇到状态管理的问题，尤其是在处理数组或其他共享数据结构时。这些问题通常因为JavaScript的异步执行特性以及共享状态的可变性引起。下面将分析此类问题的原因，并提供一些有效的解决方案。问题描述当在JavaScript中的回调函数快速执行时，如果多个回调函数试图修改同一个

回调函数

数组

前台

异步

原创 2024-04-18 11:14:05 44 阅读

前端代码规范 - 代码注释

良好的注释规范有助于提高代码质量，促进团队协作，加快新成员的项目熟悉速度，不仅能帮助自己和他人快速理解代码，还能提高代码的可维护性。

javascript

代码注释

前端

代码

原创精选 2024-04-11 10:39:15 312 阅读

前端代码规范 - 日志打印规范

在前端开发中，随着项目迭代升级，日志打印逐渐风格不一，合理的日志输出是监控应用状态、调试代码和跟踪用户行为的重要手段。一个好的日志系统能够帮助开发者快速定位问题，提高开发效率。

前端开发

代码规范

JavaScript

原创精选 2024-04-08 19:01:35 465 阅读

提升JavaScript代码质量的最佳实践

在JavaScript编程中，代码质量优化是一项重要的技能。它可以帮助我们提高代码的可读性、可维护性和性能。本文将通过一些实际优化过程中的案例，展示如何通过一些技巧和最佳实践，使我们的代码更加优雅。 1. 避免嵌套循环嵌套循环会增加代码的复杂度，使其难以阅读和维护。我们可以通过将内部循环提取为一个单独的函数来优化代码。优化前： for (let i = 0; i < array1.len

javascript

前端

代码质量

原创精选 2024-03-28 09:28:53 206 阅读

Puppeteer实践：复杂的问题简单化

最近遇到一个需求需要将上千条的数据写入到基于Wordpress搭建的系统中，但是对于底层数据录的写入逻辑不是很清楚，通过sql各种写入也没有完全达到效果。后面想了想或许可以换一个方向，不能从底层逻辑写入数据那就通过正常操作写入。由于数据量大所以需要自动化处理，这时候就想到了之前用过的Puppeteer，这个库可以模拟操作浏览器的各种行为，包括获取数据和操作提交等。对于这个场景很适合，不用管底层的

前端

nodejs

javascript

Puppeteer

原创精选 2024-03-22 10:15:28 171 阅读

JavaScript之structuredClone现代深拷贝

在JavaScript中，实现深拷贝的方式有很多种，每种方式都有其优点和缺点。今天介绍一种原生JavaScript提供的structuredClone实现深拷贝。下面列举一些常见的方式，以及它们的代码示例和优缺点： 1. 使用JSON.parse(JSON.stringify(obj)) 代码示例： function deepClone(obj) { return JSON.parse(

深拷贝

前端

JavaScript

原创精选 2024-03-04 10:24:58 215 阅读

Nodejs - 9步开启JWT身份验证

在这篇文章中，我将指导你在Node.js应用程序中使用MongoDB进行数据存储来实现JWT身份验证。

前端

nodejs

javascript

jwt

原创 2024-02-02 09:52:02 118 阅读

18个JavaScript技巧：编写简洁高效的代码

本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code，作者：Shefali，略有删改。在这篇文章中，我将分享18个JavaScript技巧，以及一些你应该知道的示例代码，以编写简洁高效的代码。让我们开始吧！? 箭头函数可以使用箭头函数来简化函数声明。 function add(a, b) {

前端

JavaScript

代码规范

原创精选 2024-01-30 09:31:29 431 阅读 2点赞

如何在JavaScript中实现主题切换

本文介绍了如何在JavaScript中实现主题切换。通过创建一个主题存储器以及添加订阅功能以便在主题发生变化时通知调用方，最后还增加了手动切换主题模式和在`React`中演示的代码示例。

主题切换

前端

JavaScript

CSS

原创精选 2024-01-29 09:50:55 487 阅读

放个烟花迎接龙年春节吧

不知不觉即将迎来2024龙年春节了。龙的形象在中国传统文化中有着广泛的应用，比如在传统文化中，龙代表着权力、威严、吉祥和神灵的象征，同时也是生命力和繁荣的象征。今天的文章将用原生JavaScript和Canvas API实现一个烟花的效果，效果如下所示，在放烟花的过程中将「龙年大吉」的文字逐渐显示出来。接下来开始具体的代码实现过程，针对重点实现代码进行解析，详情完整代码请看源码实现。烟花效果

前端

javascript

canvas

春节

烟花

原创推荐 2024-01-27 16:50:19 1436 阅读 1点赞 1收藏 1评论

每个开发人员都应该知道的13个Nodejs库

本文翻译自 Node.js Power Tools: 13 Libraries Every Developer Should Know，作者：Pinjari Rehan，略有删改。 Node.js被视为许多Web开发人员的理想运行时环境。它是世界上最流行的编程语言之一，Node.js提供了通过JavaScript库重用代码的能力，但是在项目中选择合适的库可能很困难。有用的库可以缩短开发时间

前端

JS

nodejs

原创精选 2024-01-23 09:53:23 450 阅读

JavaScript 的双位非运算（~~）

今天介绍JavaScript中双位非运算 ~~， ~~ 操作符是一个强大且经常被忽视的特性。它提供了一种快速、简洁的方式来处理数字和执行类型转换，通常可以被用于数学计算和类型转换。我们先了解一下 ~~ 的基本概念和它的一些应用场景。 ~~ 操作符简介在 JavaScript 中，~~ 是双位非（bitwise NOT）操作符的双重使用。位非操作符 (~) 将其操作数的所有位进行反转（即，1 变成

位非

操作符

前端

JS

原创精选 2024-01-22 16:42:07 286 阅读

Vue 发布 3.4 「灌篮高手」版本

本文翻译自 Announcing Vue 3.4，作者：Evan You，略有删改。今天我们很高兴地宣布Vue 3.4 ?灌篮高手版本发布！此版本包括一些实质性的内部改进，最值得注意的是重写了模板解析器，速度提高了2倍，以及重构的响应系统，使效果触发更加准确和高效。它还对很多API进行高质量的改进，包括defineModel的稳定性和绑定props时的简写语法。这篇文章提供了3.4中

Vue

前端开发

JS

原创精选 2023-12-30 10:30:06 1575 阅读

为什么一个POST请求实际发生了两个请求

当您在浏览器发送一个 POST 请求时，可能会首先发送了一个 OPTIONS 请求，紧接着才是实际的 POST 请求。这个现象是由浏览器实现的一种机制，称为“预检请求”（preflight request），它是跨源资源共享（CORS, Cross-Origin Resource Sharing）规范的一部分。我将解释这个现象的原因，并用代码示例展示其工作原理。为什么会发生预检请求？当您的网页

前端开发

http

post

原创精选 2023-12-27 09:39:32 1912 阅读 1收藏

Ant Design 发布 5.12.5 版本

2023-12-22 Ant Design 发布 5.12.5 版本，以下是版本更新详细内容。 ? 修复 Tabs 在可编辑模式下只剩新增按钮时按钮的样式问题#46585 @hzyhbk ? 修复 Progress strokeLinecap 不生效的问题。#46551 @ZN1996 ? 修复 ColorPicker 配置 prefixCls 不生效的问题。#46561 ? Fix T

版本号

新特性

antd

原创 2023-12-23 23:01:16 124 阅读

让 Vue 模板引用更加简洁清晰

本文翻译自 Make Vue's template refs clean & simple，作者：Roobin Sơn，略有删改。在Vue项目中有时候我们可能需要直接访问模板中的DOM元素。一个常见的用例是，当我们为组件定义expose（defineExposes）时，父组件需要访问该组件来调用已暴露的函数或属性。当我第一次使用Vue的template refs时，我感觉有些奇怪

Vue

字符串

模板

原创精选 2023-12-22 09:36:15 278 阅读 1点赞

Vue 官方周报 #124 - 使用JSDoc记录组件属性

Hi ? 当你将鼠标悬停在IDE中的组件上时，显示组件属性所对应的描述，这个功能在开发过程中会很有用。你可以在传递给defineProps函数的TypeScript接口中使用JSDoc来实现这一点： MyComponent.vue <script setup lang="ts"> export interface Props { /** The name of

vue

前端

原创精选 2023-12-20 09:35:35 379 阅读

Ant Design 发布 5.12.3 版本

2023-12-18 Ant Design 发布 5.12.3 版本，以下是版本更新详细内容。 ? 修复 Tag 组件在 SSR 场景下的样式丢失问题。#46500 @MadCcc ? Upload 的 disabled 属性不再对下载按钮生效。#46454 ? Upload.Dragger 增加一个水平内边距。#46457 ? 修复 Upload actions 的颜色问题。#46456 ?

新版本

antd

前端开发

原创 2023-12-19 09:23:15 88 阅读 1点赞 1收藏

比 ESLint 快50倍的OxLint 发布了！

告诉大家一个好消息，OxLint 现在正式发布了！OxLint 是一个 JavaScript 代码检查工具，与 ESLint 类似，但它不需要复杂的配置，能够帮助我们捕捉错误或无用代码。与 ESLint 相比，OxLint 使用 Rust 编写，速度非常快，大约比 ESLint 快 50 ~ 100 倍。尤大也惊叹它的性能绝对的疯狂的：为什么选择 OxLint？ OxLint 的速度之快令人

代码检查

前端开发

JavaScript

原创 2023-12-18 10:04:31 771 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

南城前端的博客

使用JavaScript读取手机联系人列表

JavaScript Set 即将支持并集、交集、差集等

JavaScript单行技巧：高效处理数据

炫酷JavaScript文本时钟

如何在 JS 中快速读取文件

实时消息获取技术方案对比

如何在 Axios 中获取请求 Headers 并处理跨域问题

Vue 之 nextTick 解析

前端代码规范 - JavaScript 部分规范

提升用户体验的UUID设计策略

前端代码规范 - 编辑器&代码风格

JavaScript中处理高速回调与状态更新的问题分析与解决方案

前端代码规范 - 代码注释

前端代码规范 - 日志打印规范

提升JavaScript代码质量的最佳实践

Puppeteer实践：复杂的问题简单化

JavaScript之structuredClone现代深拷贝

Nodejs - 9步开启JWT身份验证

18个JavaScript技巧：编写简洁高效的代码

如何在JavaScript中实现主题切换

放个烟花迎接龙年春节吧

每个开发人员都应该知道的13个Nodejs库

JavaScript 的双位非运算（~~）

Vue 发布 3.4 「灌篮高手」版本

为什么一个POST请求实际发生了两个请求

Ant Design 发布 5.12.5 版本

让 Vue 模板引用更加简洁清晰

Vue 官方周报 #124 - 使用JSDoc记录组件属性

Ant Design 发布 5.12.3 版本

比 ESLint 快50倍的OxLint 发布了！

欢迎