如果你看过某个现代 JavaScript 库的代码，一定会困惑其复杂的模块适配，下图目前主流的 JavaScript 库模块适配方案。本文梳理 JavaScript 模块化的历史和现状，不仅介绍不同模块系统是什么，而是深入介绍不同模块系统诞生的原因和解决的问题，阅读本文将为你解开很多 JavaScript 模块化的疑惑。传统 JavaScriptJavaScript 诞生之初，是一门在浏览器使用的脚本语言，并没有提供模块系统，站在当时的视角来看，确实也并不需要模块系统。在浏览器中，如果想引用一个脚本文件，只需要使用 script 标签引入即可，非常简单直观，如下所示即可可入 jQuery。script 的方式，并没有解决依赖的问题，依赖关系的解决，需要我们手动保证引入的顺序问题，2013 年我曾写过一个较为复杂的绘图程序Painter，手动维护依赖关系，如下图所示，曾经让我非常痛苦。JavaScript 缺少模块带来两个问题，一个是封装的问题，一个是依赖的管理问题，关于如何支持模块的问题，浏览器社区和 Node.js 社区分别给出了不同的探索和方案，下面介绍其中影响比较大的模块系统。Node.js 模块方案Node.js 是浏览器之外的另一个运行时，其创建之初，为了弥补 JavaScript 缺失模块的问题，其带来了commonjs 规范，在 Node.js 中模块是强制的，com ...继续阅读 (65)

本次分享论文为：CovRL: Fuzzing JavaScript Engines with Coverage-Guided Reinforcement Learning for LLM-based Mutation基本信息原文作者：Jueon Eom, Seyeon Je ...继续阅读 (42)

本文是前端代码规范系列文章，将涵盖前端领域各方面规范整理，其他完整文章可前往主页查阅~代码注释是软件开发中的重要组成部分，它帮助开发者理解代码的功能和目的，同时也是代码维护和团队协作的基础。一个清晰的注释规范能够提高代码的可读性和维护性。本文将介绍如何在前端项目中制定代码注释规范。1. 注释的类型在前端项目中，我们通常有两种类型的注释：单行注释：用于简短的描述或解释单个语句。多行注释：用于描述复杂逻辑或文件、模块的信息。2. 单行注释单行注释应该紧跟在代码的上一行或同一行的末尾。注释内容与代码或上一行注释应保持至少一个空格的距离。// 正确的单行注释 const count = 1; // 初始化计数器 // 错误的单行注释 const count = 1;//初始化计数器3. 多行注释多行注释通常用于文件头部，描述整个文件的功能，或者用于复杂逻辑的解释。多行注释应该有一个清晰的开始和结束，内容与星号之间保持一个空格。/** * 正确的多行注释 * 这是一个用于计算数组总和的函数 * @param {number[]} numbers - 要计算的数字数组 * @return {number} 数组的总和 */ function sum(numbers) { // ... } /* 错误的多行注释 这是一个用于计算数组总和的函数 @param {number[]} ...继续阅读 (132)

前言写过移动端的同学或多或少都遇到过软键盘带来的各种各样的问题，最典型的就是输入框被软键盘遮挡、fixed元素失效等问题，并且这些问题在iOS上的表现让人难以接受。webview的差异在移动端上，我们的H5页面一般是运行在宿主APP提供的webview中，简单点理解，你其实可以把它当作浏览器，就是用来展现页面内容的。目前移动端主流系统分为Android与iOS，然而两者提供的webview容器也存在着诸多差异，今天我们就只探讨两者软键盘带来的影响。首先，我们先来写个简单的页面布局：头部fixed+中间自适应+底部fixedAndroid事实上Android的表现并不会有太大问题，它只不过是在键盘弹起来之后把webview的高度减小了，变成了：原来的webview高度减去键盘的高度这样的表现正是我们期待的，完全没有影响整个页面的布局iOS软键盘在iOS 8.2 之后，iOS 唯一指定浏览器内核、Webkit 鼻祖 Safari 将fixed元素的布局基准区域从键盘上方的可见区域改成了键盘背后的整个视窗，也就是说此时的webview高度并不会发生变化，键盘是直接盖在webview上方的。这样是为了在键盘弹起来之后，不用重新渲染页面，他们是方便了，但遭殃的是我们前端开发人员...比如上面这个页面，我们看看iOS的表现是怎样的：可以看到，iOS为了不让webview压缩，并且为了不让软键盘 ...继续阅读 (76)

一个兜兜转转，从“北深”回到三线城市的小码农，热爱生活，热爱技术，在这里和大家分享一个技术人员的点点滴滴。欢迎大家关注我的微信公众号：果冻想前言现代化的编程语言，基本都支持模块化的开发，咱不说别的，就最原始的Shell，我们公司都整了一套模块化开发的框架，进行模块化开发。但是，日常在编写JavaScript代码，或者阅读别人的JavaScript代码时，总是看到require、import、export等等关键字，都说是JavaScript中的模块化的开发方式，这直接就把我整懵逼了，这怎么一个模块化的开发就搞出这么多的东西啊，这么多的关键词啊，入门即让人放弃？无论是我这样的新手，还是一些老手，都对这个JavaScript中的模块化开发懵懵懂懂的，我就是这个样子的。那这里就通过一篇文章来把JavaScript模块化开发的前世今生给讲透了，让大家以后不再对这个知识点感到迷茫。为啥需要模块化？这就好比，动物园里一堆动物，是放在一个大院子里好管理呢，还是说每种动物用单间进行好管理。比如，我们网页中引入JavaScript代码，经常是这样的。每个JS代码内容如下：// a.js var a = 1; setTimeout(() => console.log(a), 2000); // b.js var a = 2; // c.js var a = 3;执行后，输出a = 3。虽然每个代 ...继续阅读 (91)

本文是前端代码规范系列文章，将涵盖前端领域各方面规范整理，其他完整文章可前往主页查阅~在前端开发中，随着项目迭代升级，日志打印逐渐风格不一，合理的日志输出是监控应用状态、调试代码和跟踪用户行为的重要手段。一个好的日志系统能够帮助开发者快速定位问题，提高开发效率。本文将介绍如何在前端项目中制定日志输出规范。1. 日志等级首先，我们需要定义不同的日志等级，以便根据消息的重要性进行分类。通常，日志等级从低到高可以分为以下几类：DEBUG: 详细的开发时信息，用于调试应用。INFO: 重要事件的简要信息，如系统启动、配置等。WARN: 系统能正常运行，但有潜在错误的情况。ERROR: 由于严重的问题，某些功能无法正常运行。FATAL: 非常严重的问题，可能导致系统崩溃。2. 日志内容日志内容应该包含足够的信息，以便于开发者理解发生了什么。一个完整的日志消息通常包括：时间戳：精确到毫秒的事件发生时间。日志等级：当前日志消息的等级。消息内容：描述事件的详细信息。错误堆栈：如果是错误，提供错误堆栈信息。3. 日志格式日志的格式应该统一，以便于阅读和解析。一个常见的日志格式如下：[时间戳] [日志等级] [消息内容] [错误堆栈]例如：[2024-04-01T12:00:00.000Z] [ERROR] Failed to load user data. {stack}4. 日志输出在前端项目中， ...继续阅读 (72)

在技术领域，新技术的出现总是伴随着争议。TypeScript（简称 TS）作为一门静态类型的 JavaScript 超集，自从推出以来，就引发了广泛的讨论。作为一名长期从事 JavaScript 开发的程序员，我最初对 TS 持怀疑态度。但经过几年的实践，我对 TS 有了更深入的理解和认识。在这篇博文中，我将分享我对 TS 的理解，我的个人经历，以及我是如何从一个 TS 的抵抗者变成拥护者的。TS 自 2012 年诞生以来，发展非常迅速，目前已经得到了社区的广泛认可。有图有真香，通过 npm 下载量可以证明这一点。在 TS 刚刚流行起来的时候，不少开发者，包括我在内，都对它持保留态度。我们担心 TS 的类型系统会限制 JS 的灵活性，增加开发的复杂度。而且，那时候社区中也有一些声音，认为 TS 可能只是一时的热潮，不会长久。然而，随着时间的推移，TS 逐渐展现出其强大的生态和优势，越来越多的项目和库开始采用 TS。但也有一些开源库作者选择抛弃 TS，他们认为 TS 增加了开发和维护的成本，对于一些小型或者简单的项目来说，可能没有必要引入 TS。TS 解决了什么问题以下是排名靠前的 10 大 JavaScript 错误，其中 9 个错误都是因为类型错误导致的。尽管存在一些负面声音，但 TS 的采用率仍在逐年增长，特别是在需要类型安全性和改善开发者体验的项目中。TS 引入了静态类型检查 ...继续阅读 (68)

本文已收录到《面试知识系列》我经常在面试中问候：你能用 JavaScript 生成一个二维数组吗？这个问题看似简单，实际上却能揭示出面试者对 JavaScript 的熟练程度。就像茴字有多种写法一样，生成二维数组也有多种方法。今天，就让我们一起来探索这个问题背后的答案，揭开生成二维数组的多种秘密。掌握不同的方法不仅能让我们在面对不同的场景时更加得心应手，还能在面试中展示我们对 JavaScript 的深入理解。毕竟，在编程世界里，灵活多变往往比死记硬背更为重要。建议大家在阅读文章时，对于每个方法先不要看答案，而是先自己思考如何实现，这样会更有收获。创建一维数组在生成二维数组之前，我们先来学习如何创建一维数组。创建一维数组的方法有多种，以下是一些常见的方法：1. 数组字面量这是创建数组的最简单方法，直接使用方括号[]来定义数组。letarr=[1,2,3];2. 使用 Array 构造函数上面的数组也可以使用 Array 构造函数来创建。letarr=newArray(1,2,3);但当使用 Array 构造函数时，需要注意，如果只传入一个参数，则表示数组的长度。如果想要创建包含单个元素的数组，除了使用上面的方法外，还可以使用 Array.of() 方法。当有多个参数时，Array.of 和 Array 构造函数的效果是一样的。letarr=Array.of(2);console.l ...继续阅读 (82)

什么是reduce函数reduce 方法对数组中的每个元素按序执行一个提供的 reducer 函数每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。函数组成reduce(callbackFn) reduce(callbackFn, initialValue)函数具体内容reduce 方法是一个迭代方法。它按升序对数组中的所有元素运行一个“reducer”回调函数，并将它们累积到一个单一的值中。每次调用时，callbackFn 的返回值都作为 accumulator 参数传递到下一次调用中。accumulator 的最终值（也就是在数组的最后一次迭代中从 callbackFn 返回的值）将作为 reduce() 的返回值。函数示例1.求和函数const sum = (arr) => arr.reduce((acc, cur) => acc + cur, 0); //累计值为acc //当前值为cur //初始值为initialValue 为0 let arr = [1, 2, 3, 4, 5]; console.log("参数为：", arr); console.log("总和为：", sum(arr));2.求积函数const product = (arr) => arr.reduce((acc, curr) => acc * curr, ...继续阅读 (65)

最近遇到一个需求需要将上千条的数据写入到基于Wordpress搭建的系统中，但是对于底层数据录的写入逻辑不是很清楚，通过sql各种写入也没有完全达到效果。后面想了想或许可以换一个方向，不能从底层逻辑写入数据那就通过正常操作写入。由于数据量大所以需要自动化处理，这时候就想到了之前用过的Puppeteer，这个库可以模拟操作浏览器的各种行为，包括获取数据和操作提交等。对于这个场景很适合，不用管底层的实现逻辑，也不需要去扒源码了解各种加密加签的逻辑，只需要模拟操作提交数据即可。复杂的问题瞬间简单了，在这篇文章中记录如何使用Puppeteer批量提交数量。安装Puppeteer在这之前确保你已经安装了Node.js。运行以下命令安装Puppeteer：npm install puppeteerPuppeteer脚本接下来编写需要执行的脚本，创建一个名为puppeteer.js的文件，并添加以下代码：const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch({ headless: false }); const page = await browser.newPage(); await page.goto('https://baidu. ...继续阅读 (65)

从2013年至今，我陆续创作了多个库，关于如何开发JavaScript库，我也做了一些总结和分享，借这个机会，下面做个简要回顾。2015年，我发布了zepto.fullpage，一款轻量级的全屏滚动插件。2016年，我发布了前端模板template.js。2018年是一个里程碑，我给公司搭建了Util.js，同时开源了jslib-base v1，并撰写了《如何写一个现代的JavaScript库》一文，开始将自己的经验分享给大家。2019年，我一边搭建jsmini，一边开始着手撰写《现代JavaScript库开发：原理、技术与实战》。2021年，我给公司搭建了jssdk，作为Util.js的升级版。2023年1月，《现代JavaScript库开发：原理、技术与实战》正式出版。2023年10月，jslib-base 发布了v2版本，带来重要升级。时光飞逝，《现代JavaScript库开发：原理、技术与实战》已经出版一年了，本文主要内容包括，书籍影响回顾，读者问题答疑和我自己的一些总结和感悟。书籍影响回顾初稿完成后，我就发给很多朋友试读，也收获了很多前端专家的推荐语，这些都记录在书籍开头了，这里不再展开，再次感谢为本书出版带来帮助的所有朋友。自本书出版以来，就受到广大读者们的欢迎，下面我从三个方面梳理记录下：1. 销量：自书籍面世以来，它迅速登上了京东新书榜首，并在飙升榜上一马当先。在当 ...继续阅读 (64)

在过去的两个月中，我从 Axure 9 转向了 Axure 10，并且在这段时间里，我利用 Axure 10 制作了许多高保真原型。在这个过程中，我积累了经验，并总结出了一些使用 Axure 的高级技巧。本指南旨在向您展示如何充分利用全局变量、动态面板和中继器等功能，从而提升您的工作效率，打造出令人惊叹的原型设计。希望这些技巧能够为您的工作带来新的启发和提升！在快节奏的原型设计领域，对于 Axure 这样的工具，很多人往往都是直接上手，通过摸索来学习。然而，这种方式往往会导致忽视一些关键的快捷操作和高级功能。一、常规操作1、设置自动备份时间Axure 的自动备份功能是一个很有用的特性，它可以帮助你在工作过程中避免意外丢失数据。这个功能会定期保存你的 Axure 文件的备份，以防止突然的软件崩溃或计算机问题导致文件丢失。默认备份间隔是15分钟，可以根据需求自定义间隔的分钟数，一般定义5分钟会比较合适。从备份恢复文件：默认显示最近5天的备份文件，最多可以保存最近30天的备份文件：二、进阶指南1、通用母版以这样的一个后台页面为例，我们会将几个页面公共使用的地方会有这一部分：那么就可以选中这一部分，右键转为母版：在后续的其他页面需要用上到这一母版时，既在【母版】里拖动在页面上：2、自定义全局变量的使用前面我们设置了「母版」后，而我们每个页面所需要选中的导航和页面标签标题是不一样的，这种如果 ...继续阅读 (30)

JSea for JavaScript是一款面向前端开发人员的综合面试准备工具，它提供多种功能，包括 JS 基础教程、JS 算法教程、1000+ 个面试问题及详细答案，帮助你在面试中取得好成绩。下载地址：运行后点击左上角设置按钮，升级到 Pro 显示 0 元。 来自反斗限免 ...继续阅读 (40)

大家好，我是杨成功。在桌面应用开发中，常常需要获取设备唯一 ID 来表示当前客户端的唯一性。一般的设备 ID 需要满足两个条件：基于硬件和系统配置生成，确保设备的唯一性。只要不重装系统，设备 ID 多次获取都是唯一的。node-machine-id是一个常用的 Node.js 模块，它能够在 Electron 中获取机器的唯一标识。我们的产品就是使用该模块，用法也很简单：import { machineIdSync } from 'node-machine-id'; let id = machineIdSync();但是昨天出现了问题，排查结果是多台设备获取的 ID 竟然是一样的，造成了一些设备的数据被篡改，我从 issues 中找到了一些端倪。也就是在Window Ghost系统中会出现问题（啥是 Window Ghost ？）。Window 中还经常遇到权限问题，而且这个 ID 总归不可控，所以还是用自定义的方式实现吧。自定义设置设备 ID自定义的设备 ID 首先需要唯一，其次在安装和卸载应用时设备 ID 不变。满足这两个要求，最佳的方案就是将自己生成的设备 ID 存储在用户目录下。假设当前用户叫张三，他的用户目录：Window：C:\Users\张三\MacOS：/Users/张三/很多应用程序都把配置写到用户目录下，且该目录一般不会遇到权限问题。（1）使用uuid生成设备 ...继续阅读 (62)

嫦美找到我时，整个人是崩溃的 —— “卡颂，我好像被监视了”。傍晚的星巴克，她的影子被吊灯拉得很长，颤抖着如同她此刻的内心。“怎么回事？”我尽量让声音听起来平静些。“最近认识个男生，是我MBA同学，对我很热情，也很懂我”嫦美环顾四周，仿佛随时会有什么东西从夜色中跳出来。“缘分啊，这不很好嘛？”我笑着说。“不是那种心有灵犀的懂，是那种生活起居都被监视的懂”嫦美解释道。不待我回应，又补充道：“这次约你出来，也是想让你帮忙看看我电脑有没有被植入啥监听木马”。说罢，从背包里取出MacBook Air递给我。“Mac一般安全性都蛮高的，你最近没装啥来路不明的应用吧？”一边摆弄她的电脑，我一边问道。“我也不会装应用，平时主要就上上网、刷刷剧”。浏览完她的应用列表，我顺手打开了浏览器，又习惯性打开插件列表。这时，一个浏览器插件吸引了我的注意：“这是啥？”“奥，我们MBA的网课需要在这个平台看。这个平台很严，看课不能快进，也不能切换到其他页面。这是那个男同学发我的，装了后就能突破这些限制，还挺方便”说罢，嫦美皱了皱眉“和这个插件不会有关系吧？”“不好说，等我看看插件源码”。事实证明，这个插件真的有问题......本文参考文章Let's build a Chrome extension that steals everything免费领取卡颂原创React教程（原价359）、加入人类高质量前端群浏览 ...继续阅读 (63)

前言随着 Web 技术的日新月异，JavaScript 也在不断地吸收新的特性和技术，以满足日益复杂和多样化的开发需求。在 2024 年，JavaScript 迎来了一系列令人瞩目的新功能，这些功能不仅提升了开发者的效率，也极大地丰富了 Web 应用的表现力和交互性。在接下来的内容中，我们将逐一介绍这些新功能，并探讨它们如何在实际开发中发挥作用，以及它们如何继续引领前端开发的未来。Object.groupBy它是一个新的 JavaScript 方法，它可以根据提供的回调函数返回的字符串值对给定可迭代对象中的元素进行分组。返回的对象具有每个组的单独属性，其中包含组中的元素的数组。当我们想要根据数组中对象的一个或多个属性的名称对数组元素进行分类时，此方法非常有用。语法Object.groupBy(items, callbackFn)参数items：一个将进行元素分组的可迭代对象callbackFn：对可迭代对象中的每个元素执行的函数。它应该返回一个值，可以被强制转换成属性键（字符串或symbol），用于指示当前元素所属的分组。该函数被调用时将传入以下参数：element：数组中当前正在处理的元素index：正在处理的元素在数组中的索引返回值一个带有所有分组属性的null原型对象，每个属性都分配了一个包含相关组元素的数组。对数组中的元素进行分组我们可能经常需要对数据库中的项目进行分组并通 ...继续阅读 (135)

此外，Bootstrap 5还提供了一些新的组件和样式，以及一些改进的功能。Bootstrap 2：该版本是Bootstrap的第一个正式发布版本，发布于2012年，包含了60个CSS样式和4个JavaScript插件。这只是Bootstrap的一个简单示例，实际上，Bootstrap提供了更多的功能和组件，可以根据自己的需求使用它们来构建更复杂和丰富的网站。总结起来，随着每个版本的发布，Bootstrap不断增加了新的功能、样式和组件，并不断改进和优化其设计和性能，以适应不断变化的Web开发需求。 ...继续阅读 (65)

在JavaScript中，实现深拷贝的方式有很多种，每种方式都有其优点和缺点。今天介绍一种原生JavaScript提供的structuredClone实现深拷贝。下面列举一些常见的方式，以及它们的代码示例和优缺点：1. 使用JSON.parse(JSON.stringify(obj))代码示例：function deepClone(obj) { return JSON.parse(JSON.stringify(obj)); }优点：简单易行，对于大多数对象类型有效。缺点：不能复制原型链，对于包含循环引用的对象可能出现问题。比如以下代码：const calendarEvent = { date: new Date() } const problematicCopy = JSON.parse(JSON.stringify(calendarEvent))最终得到的date不是Data对象，而是字符串。{ "date": "2024-03-02T03:43:35.890Z" }这是因为JSON.stringify只能处理基本的对象、数组。任何其他类型都没有按预期处理。例如，日期转换为字符串。Set/Map只是转换为{}。const kitchenSink = { set: new Set([1, 3, 3]), map: new Map([[1, 2]]), ...继续阅读 (126)

这篇文章是关于流（Stream）的深入指南，详细介绍了如何使用浏览器的 Stream API 处理可读、可写和转换流。文章涵盖了核心概念，包括数据块、可读流、可写流、转换流、管道链、回压和分支等。读者能够了解如何创建读取流，以及如何管理和控制流。 ...继续阅读 (98)

奇趣周刊，每周四发布，分享有趣的软件，程序，动态新闻等。 周刊列表 | rss 订阅 1. Google 推出 Gemma 开放模型 https://ai.google.dev/gemma 一个系列轻量级、先进的开放式模型，采用与创建 Gemini 模型相同的研究和技术构建而成。 2. chinese-poetry: 最全中文诗歌古典文集数据库 https://github.com/chinese-poetry/chinese-poetry 最全中华古诗词数据库，唐宋两朝近一万四千古诗人，接近 5.5 万首唐诗加 26 万宋诗。两宋时期 1564 位词人，21050 首词。 为什么要做这个仓库？古诗是中华民族乃至全世界的瑰宝，我们应该传承下去，虽然有古典文集，但大多数人并没有拥有这些书籍。从某种意义上来说，这些庞大的文集离我们是有一定距离的。而电子版方便拷贝，所以此开源数据库诞生了。此数据库通过 JSON 格式分发，可以让你很方便的开始你的项目。 3. 2024 年的 JavaScript https://tonsky.me/blog/js-bloat/ Niki 详细研究了 2024 年各种网站的 JavaScript 膨胀问题，比较了不同的网站（包括社交网络、电子邮件、音频/视频流应用、交互式应用等）的 JavaScript 虚拟大小。结果表明，许多网站的 JavaScript ...继续阅读 (48)

奇趣周刊，每周四发布，分享有趣的软件，程序，动态新闻等。 周刊列表 | rss 订阅 1. Google 推出 Gemma 开放模型 https://ai.google.dev/gemma 一个系列轻量级、先进的开放式模型，采用与创建 Gemini 模型相同的研究和技术构建而成。 2. chinese-poetry: 最全中文诗歌古典文集数据库 https://github.com/chinese-poetry/chinese-poetry 最全中华古诗词数据库，唐宋两朝近一万四千古诗人，接近 5.5 万首唐诗加 26 万宋诗。两宋时期 1564 位词人，21050 首词。 为什么要做这个仓库？古诗是中华民族乃至全世界的瑰宝，我们应该传承下去，虽然有古典文集，但大多数人并没有拥有这些书籍。从某种意义上来说，这些庞大的文集离我们是有一定距离的。而电子版方便拷贝，所以此开源数据库诞生了。此数据库通过 JSON 格式分发，可以让你很方便的开始你的项目。 3. 2024 年的 JavaScript https://tonsky.me/blog/js-bloat/ Niki 详细研究了 2024 年各种网站的 JavaScript 膨胀问题，比较了不同的网站（包括社交网络、电子邮件、音频/视频流应用、交互式应用等）的 JavaScript 虚拟大小。结果表明，许多网站的 JavaScript ...继续阅读 (56)

背景前端开发中，有时项目会遇到一些快捷键需求，比如绑定快捷键，展示快捷键，编辑快捷键等需求，特别是工具类的项目。如果只是简单的绑定几个快捷键之类的需求，我们一般会通过监听键盘事件（如keydown事件）来实现，如果是稍微复杂点的需求，我们一般都会通过引入第三方快捷键库来实现，比如常用的几个快捷键库mousetrap,hotkey-js等。接下来，我将会通过对快捷键库mousetrap第一次提交的源码进行简单分析，然后实现一个简单的快捷键库。前置知识首先，我们需要了解一些快捷键相关的基础知识。比如，如何监听键盘事件？如何监听用户按下的按键？键盘上的按键有哪些？是如何分类的？只有知道这些，才能更好的理解mousetrap这种快捷键库实现的思路，才能更好地实现我们自己的快捷键库。如何监听键盘事件实现快捷键需要监听用户按下键盘按键的行为，那就需要使用到键盘事件API。常用的键盘事件有keydown,keyup,keypress事件。一般来说，我们会通过监听用户按下按键的行为，来判断是否要触发对应的快捷键行为。通常来说，在用户按下按键时，就会判断是否有匹配的绑定过的快捷键，即通过监听keydown事件来实现快捷键。如何监听键盘上按下的键我们可以通过键盘事件来监听用户按键行为。那如何知道用户具体按下了哪个/哪些按键呢？比如，用户绑定的快捷键是s，那如何知道当前按下的按键是s？我们可以通过键盘事 ...继续阅读 (85)

前言对于前端来讲，我们在操作cookie时往往都是基于document.cookie，但它有一个缺点就是操作复杂，它并没有像localStorage那样提供一些get或set等方法供我们使用。对与cookie的操作一切都是基于字符串来进行的。为了让cookie的操作更简便， Chrome87率先引入了cookieStore方法。document.cookiedocument.cookie可以获取并设置当前文档关联的cookie获取cookieconst cookie = document.cookie在上面的代码中，cookie被赋值为一个字符串，该字符串包含所有的 Cookie，每条 cookie 以"分号和空格 (; )"分隔 (即，key=value键值对)。但这拿到的是一整个字符串，如果你想获取cookie中的某一个字段，还需要自己处理const converter = { read: function (value) { if (value[0] === '"') { value = value.slice(1, -1); } return value.replace(/(%[\dA-F]{2})+/gi, decodeURIComponent) }, write: function (value) { return ...继续阅读 (85)

accent-color是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候，更深入的了解了一下这个属性。简单而言，CSSaccent-color支持使用几行简单的 CSS 为表单元素着色，是的，只需几行代码就可以将主题颜色应用到页面的表单输入。表单元素一直被吐槽很难自定义。而accent-color就是规范非常大的一个改变，我们开始能更多的自定义原生的表单的样式了！如何使用accent-colorOK，我们一起来学习一下，我们应该如何使用accent-color。首先，我们来实现这么一个简单的表单界面：Accent-color DemoStrawberriesRadio ButtonsRange SliderProgress element50%只需要最简单的布局 CSS，与accent-color关系不大，我就不列出来了，这样，我们的 DEMO 大致如下：可以看到，表单控件的主题颜色是蓝色，在之前，我们是没办法修改这个颜色的。而现在，我们可以简单的借助accent-color，修改表单的主题色：:root { accent-color: rgba(250, 15, 117); }其中，rgba(250, 15, 117)表示粉色，此时，整体的效果就变成了：当然，这个accent-color ...继续阅读 (77)

欢迎关注我的公众号：前端侦探toggle的意思很简单，表示“切换”，适用于两个状态之间的变化，不会出现第三者，就像这样web中也有很多类似的api，一起看看有哪些吧一、toggle首先是最常用的DOMTokenList.toggle方法，这里的的DOMTokenList表示一组空格分隔的标记，最常见的就是Element.classList，比如除了classList还有relList，不过应该更少见了通过el.classList可以获取到class的详细信息看着像一个数组一样，然后我们可以通过toggle方法去切换某个class，比如el.classList.toggle('a'); // 移除 a el.classList.toggle('a'); // 添加 a此时会动态去判断，如果存在就移除，如果不存在就添加，再也不需要去判断当前状态了比如要切换页面主题，可以直接这样// 深浅切换 btn.onclcik = () => { document.body.classList.toggle('dark') } // 无需像这样 if (当前是深色) { 设置为浅色 } else { 设置为深色 }另外，toggle还支持第二个参数，表示强制，是一个布尔值，为true表示添加，反之为移除，而不管当前是什么状态el.classList.toggle('a', force ...继续阅读 (92)

在上一节课程中，我们学习了 CSS 和 JavaScript 等页面资源如何影响页面加载速度，并探讨了如何优化这些资源及其传输，以加快页面渲染。现在是深入了解资源加载进阶话题的绝佳时机，这包括使用资源提示（resource hint）帮助浏览器更迅速地完成加载工作。 资源提示能够通过预告浏览器如... ...继续阅读 (77)

前言想必大家在工作过程中都遇到过node版本带来的各种各样的问题，对于团队协作项目，你不能保证所有人的本地node版本都相同，所以在项目文档中往往会写上以下内容：为与线上环境一致，请保证以下版本node：15.x.xvue-cli：4.4.x但这样并不能完全避免问题，比如多个不同项目中使用的node版本也有所不同，在来回切换中就可能造成node版本混用，那么应该如何避免这个问题？如果这篇文章有帮助到你，❤️关注+点赞❤️鼓励一下作者，文章公众号首发，关注前端南玖第一时间获取最新文章～package.json对于前端工程化项目，根目录下都会有一个package.json文件，在该文件中有一个属性engines，它表示声明node环境，如果不指定版本(或者指定*作为版本) ，那么任何版本的node都可以。"engines": {  "node": ">=15.0.0" }比如这里指定node版本必须大于等于15。了解更多package.json内容，可以查看这篇文章：熟悉又陌生的package.json但对于npm来讲，但即使许多项目定义了最低 Node.js 版本，此配置也不会强制执行，也就是说它并不会阻止用户的安装操作。npm比如node版本限制了大于等于15，而我使用14.19.3的版本来安装依赖你会发现这样还是能够正常安装，并没有按我们的期待阻止用户安装依赖。yarn同样的配 ...继续阅读 (111)

起因嘛，就是这条短信：【七牛云服务】尊敬的七牛云CDN用户，您的账号 **@**.com 下 article-assets.lynan.cn 等 3 个域名绑定的证书即将过期，为保证您的服务正常使用，请您尽快更换证书。详见邮件内容。您可登录「消息设置/产品消息/CDN 相关通知」关闭短信通知。如证书已弃用请忽略。收到七牛的短信说明我的免费证书一年期又到了，需要重新申请、上传 SSL 证书。正好我最近因为迁移了博客到 CloudFlare，体验不错，干脆把图床也迁移了。总得来说，迁移的好处有：不花钱（10GB 以内的资源，目前来说我肯定用不到，因为我的资源在上传前都手动压缩过，当然了如果真到不够用的时候它超出额度也非常便宜）全球CDN无需自行配置 SSL 证书继续用七牛的话，一年配置一次我都有点懒😅收集原图床资源鉴于当时为我的博客单独建了一个 Bucket 并且配置了单独的域名，所以找起来很容易。跑个脚本即可：我的博客是 Hexo 生成的，原始文件都在source文件夹内。getlinks.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849const{ resolve } =require("path");const{ re ...继续阅读 (61)

XHR and its related features have been commonly used in recent decades. Since then, more and more Web sites now represent as Web Apps. To improve user experience with progressive loading, many Apps use skeleton screen to ease the feelings of unknown, rather than serve a blank white screen while waiting.What is a Skeleton ScreenIt’s the gray shapes shown while the data is loading from the server instead of displaying a classical spinner. —-^What is a skeleton screen 💀?⬆️ Look at This ⬆️What forLook at this comparison, UI with skeleton seems to have less reflow which I think is more comforting.T ...继续阅读 (60)

对数组中的项目进行分组，你可能已经做过很多次了。每次都会手动编写一个分组函数，或者使用lodash的groupBy函数。好消息是，JavaScript 现在有了分组方法，所以你再也不必这样做了。Object.groupBy和Map.groupBy这两个新方法将使分组变得更简单，并节省我们的时间或依赖性。以前的做法假设你有一个代表人的对象数组，你想按年龄对它们进行分组。你可以这样使用forEach循环：const people = [ { name: "Alice", age: 28 }, { name: "Bob", age: 30 }, { name: "Eve", age: 28 }, ]; const peopleByAge = {}; people.forEach((person) => { const age = person.age; if (!peopleByAge[age]) { peopleByAge[age] = []; } peopleByAge[age].push(person); }); console.log(peopleByAge); /* { "28": [{"name":"Alice","age":28}, {"name":"Eve","age":28}], "30": [{"name":"Bob", ...继续阅读 (83)