原生拖放API看似简单，真正用来做可排序列表却会碰到拖拽位置判断、跨容器交换等实际问题。本文围绕 dragstart、dragover、drop、dragend 四类核心事件，拆解排序列表的实现思路。重点说明为什么必须在 dragover 中调用 preventDefault 才能让元素可放置，以及如何通过鼠标坐...

栏目：JavaScript 时间：09-26 拖放API 可排序列表 HTML5拖放

JSON字符串解析失败时，页面往往会直接抛错并中断后续脚本，这在处理接口返回、localStorage缓存或用户粘贴数据时尤其常见。很多人习惯直接调用JSON.parse，却忽略了格式异常与安全风险。本文围绕JavaScript中解析JSON字符串的三种安全处理方式展开，先说明为什么不能盲目JSON.p...

栏目：JavaScript 时间：09-26 JSON.parse JavaScript 异常处理

在浏览器里直接捕获摄像头画面并实时叠加滤镜，这一能力背后的核心对象是 MediaStream。它并非简单的数据数组，而是由多条 MediaStreamTrack 构成的轨道集合，分别承载视频和音频。JavaScript 通过 getUserMedia 获取这类流之后，可以把它送入 video 元素渲染，也可以交给 MediaRe...

栏目：JavaScript 时间：09-26 JavaScript媒体处理 MediaStream MediaRecorder

GeoJSON图层组的动态过滤并不是简单地把图层隐藏再显示，而是涉及数据源引用、图层更新策略和地图渲染性能之间的平衡。Leaflet的L.geoJSON在构建时会根据FeatureCollection生成独立的子图层，每个子图层保留feature属性，这为按条件筛选提供了基础。如果直接清空图层组再重新...

栏目：JavaScript 时间：09-26 Leaflet GeoJSON 动态过滤

Cycle.js的核心原理在于把整个应用建模为一个纯函数，输入是来自外部的sources事件流，输出是发往外部的sinks命令流。它通过run函数将main函数与各类驱动器连接起来，驱动器负责处理DOM渲染、HTTP请求等副作用，并把用户交互事件转换为新的输入流。这个过程中数据始终沿着驱动器...

栏目：JavaScript 时间：09-26 函数式响应式编程 Cycle.js 单向数据流

在Chart.js中同时展示柱状图与折线图时，如果两者的数据范围差异巨大，强行共用一根Y轴会让数值较小的系列被压缩到几乎不可见。解决这一问题的关键是配置多轴，并将不同数据集绑定到不同的纵轴。然而，多轴配置不仅涉及yAxisID的绑定，还包含刻度对齐、标签格式化、网格线去重等容...

栏目：JavaScript 时间：09-26 Chart.js 多轴复合图表 轴标签管理

为什么网页只要一开始播放声音，标签页上就会冒出扬声器图标，系统媒体控制中心也会弹出播放卡片？更麻烦的是，无论调用什么 JavaScript API，这个通知始终隐藏不掉。其实这并非标准遗漏，而是浏览器为了保障用户知情权、配合自动播放策略而留下的刻意设计。文章会从通知的产生层级...

栏目：JavaScript 时间：09-26 浏览器音频播放通知 JavaScript 媒体会话API

节点悬停时高亮关联边，为什么自己写的Vega表达式总是不生效？问题通常不在渲染层，而在信号与事件流的绑定上。要实现这一交互，需要先给节点符号添加悬停事件，把当前节点ID写入一个名为activeNode的信号，再让链接路径的编码通道引用这个信号。链接的stroke、opacity或strokeWidth...

栏目：JavaScript 时间：09-26 Vega 节点悬停 链接高亮

页面动态插入的节点为什么总是无法自动隐藏？试过在 Ajax 完成后手动调用更新函数，也试过定时器轮询，但都容易漏掉或带来额外开销。MutationObserver 提供了一种原生监听 DOM 变化的机制，能够在新增节点出现时立即执行回调，从而精准控制显示与隐藏。本文从 MutationObserver 的...

栏目：JavaScript 时间：09-25 MutationObserver 动态加载元素 显示隐藏控制

当服务端返回一段富文本，前端需要原样展示但又担心脚本注入，Angular 该怎么做？框架默认会清洗掉危险标记，但直接使用 innerHTML 时那些带样式的内容往往被过滤得面目全非。要平衡渲染效果与安全性，关键是搞清楚 Angular 的清洗机制以及 DomSanitizer 的适用边界。这篇文章会从...

栏目：JavaScript 时间：09-25 Angular 动态HTML DomSanitizer

想用 JavaScript 截取字符串前几位，却分不清 substring、slice 和 substr 的差别？这三个方法表面相似，参数规则却完全不同。substring 会把负数参数当作 0 处理，并且会自动交换较小的起始索引；slice 支持负数索引，从字符串末尾反向计数，处理前几位场景更灵活；substr 的第二个参数...

栏目：JavaScript 时间：09-25 JavaScript字符串截取 SUBSTRING slice

当需要从字符串中一次性提取所有匹配结果及其捕获组时，传统的 exec 循环和 match 方法都存在明显不便。ES6 引入的 matchAll 方法返回一个迭代器，每个迭代结果都包含完整的匹配信息，包括捕获组、索引和原始字符串。调用方式为 str.matchAll(regexp)，其中 regexp 必须带有全局...

栏目：JavaScript 时间：09-25 ES6 matchAll 正则表达式

从XMLHttpRequest到Fetch API，浏览器发起HTTP请求的底层逻辑发生了明显变化。Fetch基于Promise设计，返回Response对象，配合async/await能让异步代码更接近同步写法。本文不重复官方文档的API列表，而是围绕GET、POST、文件上传、超时控制、错误处理、取消请求等实际场景展开，对...

栏目：JavaScript 时间：09-25 Fetch API JavaScript 异步请求

Symbol.asyncIterator 是 JavaScript 内建符号中专门用于异步迭代的标识。它的核心机制并不复杂：当一个对象以该符号为键定义了方法，且方法返回一个实现了 next 方法的异步迭代器对象时，该对象就具备了被 for await...of 消费的能力。与同步迭代器每次调用 next 立刻得到 va...

栏目：JavaScript 时间：09-25 Symbol.asyncIterator 异步迭代 for await of

自动化重复提交表单能显著减少机械性操作，但Google表单动态渲染和频繁更新的DOM结构会给脚本稳定性带来挑战。本文从Selenium WebDriver的真实浏览器交互切入，说明如何加载目标表单、等待关键元素出现，并用XPath和CSS选择器定位输入框、单选按钮、复选框和提交按钮。接着给...

栏目：JavaScript 时间：09-25 Python Selenium Google表单自动化

页面里有些锚标签没有设置id和class，单靠getElementById根本抓不到，怎么才能把这些链接地址取出来？其实思路并不复杂。先把document.querySelectorAll的参数写成a，就能一次性拿到文档中所有锚元素，然后遍历这个NodeList，读取元素对象的href属性，或者调用getAttribute方法，两种方...

栏目：JavaScript 时间：09-25 JavaScript href属性 锚标签

节点图里鼠标移上去只亮了一个点，连线却纹丝不动，这种割裂感通常来自信号没有参与过滤。Vega 的交互高亮不是给每个元素单独绑定监听，而是通过一个悬停信号记录当前节点标识，再由链接和节点的 encode 表达式依据该信号动态调整透明度与描边宽度。实现时，需要先用 on 事件流捕...

栏目：JavaScript 时间：09-25 Vega 节点悬停 高亮链接

从双大括号模板占位符的提取需求切入，直接说明贪婪匹配与懒惰匹配在连续多组场景下的行为差异。贪婪写法会吞掉整段字符串，必须改用排除性字符类加非贪婪量词才能逐组精确捕获。捕获后再用字符串自带的裁剪方法去掉换行符与空格，或者干脆在正则内部用空白边界锚定与捕获组配...

栏目：JavaScript 时间：09-25 正则表达式 双大括号匹配 空白字符处理

判断数组中奇偶元素的排列规律，是不少算法题和业务校验里都会碰到的基础问题。奇偶模式检查的核心并不是逐个判断数字能否被2整除，而是把每个元素映射为奇偶状态后，再用状态序列与目标模式进行比对。常见需求包括验证数组是否奇偶交替、是否前半段为奇数后半段为偶数、是否...

栏目：JavaScript 时间：09-24 数组奇偶模式 奇偶检查 算法

npm start 一跑就红屏，报错信息五花八门，究竟是依赖坏了还是配置歪了？这篇文章把 React 项目启动阶段的编译错误拆成依赖、配置、语法与构建四类，结合常见报错实例给出定位方法，并总结一套可落地的工程化防错策略。文章会先分析 Module not found、SyntaxError、Babel 配置异...

栏目：JavaScript 时间：09-24 React编译错误 npm start 前端工程化

正则表达式在JavaScript里不是一套独立语言，而是内建在RegExp对象和字符串方法中的模式匹配机制。它先接收一段描述字符规则的文本，将其编译为内部匹配器，再扫描目标字符串并返回匹配结果或替换后的新字符串。掌握正则处理文本要抓住两个层面：一是元字符、量词、捕获组、零宽...

栏目：JavaScript 时间：09-24 JavaScript正则表达式 正则匹配 文本处理

在浏览器中通过脚本打开一个新标签页后，原页面还能控制它吗？又该如何关闭或监听它的状态？JavaScript 对标签页的操作受到同源策略和浏览器安全机制约束，通常只能处理由脚本自身打开的窗口。文章将从 window.open 的返回值入手，说明如何在新旧标签页之间建立引用关系，利用 windo...

栏目：JavaScript 时间：09-24 JavaScript操作标签页 window.open 标签页通信

当页面中通过 querySelectorAll 获取一组元素后，点击其中某一个节点时怎样才能立即知道它是第几项？这个问题在列表交互、轮播图定位、表格行操作等场景中非常常见。NodeList 虽然是类数组对象，但它本身并不提供当前元素在集合中的位置信息，事件对象也不会直接告诉你索引值。...

栏目：JavaScript 时间：09-23 NodeList 索引 点击事件

图片悬停切换是前端交互中的高频需求，但直接改写src属性会让后续恢复变得脆弱，尤其在列表项多、图片地址复杂或动态渲染场景中，原始地址一旦被覆盖就难以找回。本文从这一实际痛点切入，分析基于jQuery的两种实现思路：使用data属性保存原始地址，以及配合事件委托处理动态节点。...

栏目：JavaScript 时间：09-23 jQuery 鼠标悬停 图片src

如果某个内网GIS工具只要求用户上传Shapefile并在地图上预览，是否每次都要把文件传到后端解析？其实借助React和shpjs，浏览器可以直接完成Shapefile到GeoJSON的转换，省去后端服务与等待时间。Shapefile由多个文件组成，转换时需要同时读取.shp几何文件、.dbf属性文件以及可选的....

栏目：JavaScript 时间：09-23 Shapefile GeoJSON React

Express的路由系统并非按照路由具体程度进行智能排序，而是严格按照代码中的注册顺序来匹配请求。每个app.get、app.post或app.use调用都会生成一个layer对象压入内部栈，请求到达时从栈顶向下逐个执行。这种机制决定了先注册的路由拥有更高优先级，即使后面的静态路径看起来更...

栏目：JavaScript 时间：09-23 Express路由 路由匹配优先级 中间件

querySelectorAll是document和Element对象上用来批量获取DOM元素的API，它接收任意合法的CSS选择器字符串，返回一个静态的NodeList对象。这个NodeList不是实时集合，这意味着后续对文档结构的修改不会自动反映到已获取的列表中。如果选择器语法有误，该方法会立刻抛出SyntaxErro...

栏目：JavaScript 时间：09-23 querySelectorAll JavaScript DOM选择器

动态表单的字段数量往往随用户操作变化，如果用传统的 state 管理每个输入项，很容易出现状态不同步、校验遗漏和性能下降。React Hook Form 内置的 useFieldArray 专门解决这类场景，它基于非受控组件和 ref 管理表单状态，能高效处理动态增删字段，并自动维护数组索引与校验规则...

栏目：JavaScript 时间：09-23 React Hook Form 动态表单 useFieldArray

在浏览器中直接采集麦克风音频，曾经依赖Flash插件，现在通过WebRTC的getUserMedia就能完成录音、音量分析和实时处理。本文从权限申请开始，结合可运行代码演示如何用MediaRecorder把麦克风输入保存为WebM文件，再借助AudioContext和AnalyserNode计算实时音量并驱动可视化界面。...

栏目：JavaScript 时间：09-23 JavaScript 麦克风 getUserMedia

页面点击后毫无反应，控制台又没有明确报错，这种问题常常让人卡住很久。排查下来，根源可能只是一个不起眼的javascript:void(0)写法。它并不是一个独立函数，而是利用void运算符对表达式求值并强制返回undefined，再配合链接的href来阻止页面跳转。一旦拼写、引号、事件绑定或语...

栏目：JavaScript 时间：09-23 javascript void 0 事件绑定 前端调试