本文翻译自 Read Phone Contacts with JavaScript，作者：Alvaro Montoro， 略有删改。 作者注：本文中描述的技术和流程是实验性的，只能在少数浏览器中工作。在撰写本文时，联系人选择器API仅支持 Android Chrome（从版本80开始）和iOS Safari（从版本14.5开始）。如果要检查是否可使用这个功能，可以访问这个演示网站alvar
本文翻译自 Union, intersection, difference, and more are coming to JavaScript Sets，作者：Phil Nash， 略有删改。 JavaScript Set 在 ES2015 规范中引入，但一直感觉不完整。 Set 是一种值的集合，其中每个值只能出现一次。在 ES2015 版本的 Set 中，可用的功能围绕创建、添加、移除以
本文翻译自 10 one-liners that will change how you think about JavaScript forever，作者：Tari Ibaba， 略有删改。 本文介绍JavaScript单行程序的独特数据处理能力，单行技巧可以帮助我们更简洁、更高效地处理数据。这些技巧不仅提升了代码的可读性，也减少了代码行数，使代码更加紧凑。以下是一些JavaScript单行
今天分享一段简单的 JS 代码，创意来自aem1k.com/qlock，可以将整段 JS 代码字符本身变成时钟，每秒以 HH:MM:SS 的格式显示当前的时间。 JS逻辑实现代码本身也是时钟展示的载体，通过给字符设置不同的高亮颜色来显示当前的时间，离屏幕越远越能更清晰的看到时间的变化。 本文解析该代码实现的原理，来看看这份属于程序员的浪漫吧。 代码是一个自执行的匿名函数 (r=()=>..
假设你需要在服务器上使用JavaScript读取多个文件。在像Node.js这样的运行时环境中，JavaScript有多种读取文件的方式。哪一种是最好的呢？让我们来看看各种方法的测试结果。
在使用 Axios 进行网络请求时，访问响应的 Headers 是一种常见的需求，特别是在涉及跨域请求时。本文将介绍如何在 Axios 中获取响应 Headers，并说明在跨域场景下如何处理无法获取特定 Headers 的问题。 什么是 Axios？ Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js。它可以发送异步 HTTP 请求到 REST 端点并处理响
本文是前端代码规范系列文章，将涵盖前端领域各方面规范整理，其他完整文章可前往主页查阅~ 在前端开发中，JavaScript 是实现交互性和动态功能的关键语言。为了确保代码的可读性、可维护性和性能，遵循一定的编码规范至关重要。以下是一份前端JS代码规范与最佳实践指南，以下仅是一部分规范供参考，在实际开发中每个项目和团队都有其独特性。**应当根据具体的项目需求和团队习惯来调整，以确保最佳使用规范。
这篇文章讨论了唯一标识符（UUID）在应用程序中的重要性，以及如何通过一些改进来增强用户体验。
在如今快速发展的前端工程领域，团队成员较多时导致编码风格百花齐放，如何保持代码的一致性和可读性成为了开发过程中不可忽视的挑战。
良好的注释规范有助于提高代码质量，促进团队协作，加快新成员的项目熟悉速度，不仅能帮助自己和他人快速理解代码，还能提高代码的可维护性。
在前端开发中，随着项目迭代升级，日志打印逐渐风格不一，合理的日志输出是监控应用状态、调试代码和跟踪用户行为的重要手段。一个好的日志系统能够帮助开发者快速定位问题，提高开发效率。
在JavaScript编程中，代码质量优化是一项重要的技能。它可以帮助我们提高代码的可读性、可维护性和性能。本文将通过一些实际优化过程中的案例，展示如何通过一些技巧和最佳实践，使我们的代码更加优雅。 1. 避免嵌套循环 嵌套循环会增加代码的复杂度，使其难以阅读和维护。我们可以通过将内部循环提取为一个单独的函数来优化代码。 优化前： for (let i = 0; i < array1.len
最近遇到一个需求需要将上千条的数据写入到基于Wordpress搭建的系统中，但是对于底层数据录的写入逻辑不是很清楚，通过sql各种写入也没有完全达到效果。 后面想了想或许可以换一个方向，不能从底层逻辑写入数据那就通过正常操作写入。由于数据量大所以需要自动化处理，这时候就想到了之前用过的Puppeteer，这个库可以模拟操作浏览器的各种行为，包括获取数据和操作提交等。对于这个场景很适合，不用管底层的
在JavaScript中，实现深拷贝的方式有很多种，每种方式都有其优点和缺点。今天介绍一种原生JavaScript提供的structuredClone实现深拷贝。 下面列举一些常见的方式，以及它们的代码示例和优缺点： 1. 使用JSON.parse(JSON.stringify(obj)) 代码示例： function deepClone(obj) { return JSON.parse(
本文翻译自 18 JavaScript Tips : You Should Know for Clean and Efficient Code，作者：Shefali， 略有删改。 在这篇文章中，我将分享18个JavaScript技巧，以及一些你应该知道的示例代码，以编写简洁高效的代码。 让我们开始吧！? 箭头函数 可以使用箭头函数来简化函数声明。 function add(a, b) {
本文介绍了如何在JavaScript中实现主题切换。通过创建一个主题存储器以及添加订阅功能以便在主题发生变化时通知调用方，最后还增加了手动切换主题模式和在`React`中演示的代码示例。
不知不觉即将迎来2024龙年春节了。龙的形象在中国传统文化中有着广泛的应用，比如在传统文化中，龙代表着权力、威严、吉祥和神灵的象征，同时也是生命力和繁荣的象征。 今天的文章将用原生JavaScript和Canvas API实现一个烟花的效果，效果如下所示，在放烟花的过程中将「龙年大吉」的文字逐渐显示出来。 接下来开始具体的代码实现过程，针对重点实现代码进行解析，详情完整代码请看源码实现。烟花效果
本文翻译自 Node.js Power Tools: 13 Libraries Every Developer Should Know，作者：Pinjari Rehan， 略有删改。 Node.js被视为许多Web开发人员的理想运行时环境。它是世界上最流行的编程语言之一，Node.js提供了通过JavaScript库重用代码的能力，但是在项目中选择合适的库可能很困难。 有用的库可以缩短开发时间
今天介绍JavaScript中双位非运算 ~~， ~~ 操作符是一个强大且经常被忽视的特性。它提供了一种快速、简洁的方式来处理数字和执行类型转换，通常可以被用于数学计算和类型转换。我们先了解一下 ~~ 的基本概念和它的一些应用场景。 ~~ 操作符简介 在 JavaScript 中，~~ 是双位非（bitwise NOT）操作符的双重使用。位非操作符 (~) 将其操作数的所有位进行反转（即，1 变成
本文翻译自 Announcing Vue 3.4，作者：Evan You， 略有删改。 今天我们很高兴地宣布Vue 3.4 ?灌篮高手 版本发布！ 此版本包括一些实质性的内部改进，最值得注意的是重写了模板解析器，速度提高了2倍，以及重构的响应系统，使效果触发更加准确和高效。它还对很多API进行高质量的改进，包括defineModel的稳定性和绑定props时的简写语法。 这篇文章提供了3.4中
当您在浏览器发送一个 POST 请求时，可能会首先发送了一个 OPTIONS 请求，紧接着才是实际的 POST 请求。这个现象是由浏览器实现的一种机制，称为“预检请求”（preflight request），它是跨源资源共享（CORS, Cross-Origin Resource Sharing）规范的一部分。我将解释这个现象的原因，并用代码示例展示其工作原理。 为什么会发生预检请求？ 当您的网页
本文翻译自 Make Vue's template refs clean & simple，作者：Roobin Sơn， 略有删改。 在Vue项目中有时候我们可能需要直接访问模板中的DOM元素。一个常见的用例是，当我们为组件定义expose（defineExposes）时，父组件需要访问该组件来调用已暴露的函数或属性。 当我第一次使用Vue的template refs时，我感觉有些奇怪
Hi ? 当你将鼠标悬停在IDE中的组件上时，显示组件属性所对应的描述，这个功能在开发过程中会很有用。你可以在传递给defineProps函数的TypeScript接口中使用JSDoc来实现这一点： MyComponent.vue <script setup lang="ts"> export interface Props { /** The name of
本文概述了这三个运算符的基本用法和适用场景，希望可以帮助你更好地理解和使用它们。
通过在前端浏览器中使用`navigator.getBattery()`方法，我们可以轻松地获取设备的电池状态信息，包括充电状态、当前电量以及放电或充电所需的时间。
在JavaScript中，通常可以使用正则表达式（RegExp）或使用内置的URL对象来校验一个URL。下面是一些常用的方法以及对应的代码示例： 使用正则表达式进行校验： function validateURL(url) { const pattern = /^(https?:\/\/)?(www\.)?[a-zA-Z0-9-]+\.[a-zA-Z]+(\/[^\s]*)?$/; r
Hi ? 本周的问题中，您将学习在Vue中如何定义组合快捷键。它允许你在应用程序中定义键盘快捷键。我在Nuxt UI中发现了它，它的名称是defineShortcuts。 如何使用 你可以像下面这样在setup函数中定义快捷方式： <script setup lang="ts"> const isActive = ref(false) defineShortcuts
目前市面上的前端代码质量评分中的代码可维护度是大都是基于 typhonjs-escomplex 这个库扫描而来，但是这个库的官方文档并没有介绍相关指标数据的计算规则，不知道规则如何提升指标数据呢？所以本文对 typhonjs-escomplex 源码进行探索，探索其关键指标计算逻辑。 使用方式 使用方式很简单，引用后调用 analyze 方法传入需要检测的源代码即可。 import escompl
在开发中可能有遇到过屏幕录制的需求，无论是教学、演示还是游戏录制，都需要通过屏幕录制来记录和分享内容。一般在App内H5页基于客户端能力实现的较多，现在浏览器中的 MediaRecorder 也提供了这种能力。MediaRecorder 是一种强大的技术，可以在浏览器端实现屏幕录制功能。本文将介绍如何使用JS MediaRecorder 实现屏幕录制。 代码实现 要实现屏幕录制，我们需要通过 na
本文翻译自 Understanding the JavaScript Modulo Operator，作者：joshwcomeau， 略有删改。 当我第一次学习编码时，我记得发现模运算符（%）非常令人困惑。? 当你不明白它的原理的时候，它产生的值看起来完全是随机的： const what = 10 % 4; // 2 const the = 10 % 10; // 0 const heck =
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
