93 posts tagged with "全栈开发"

JavaScript 定时调度 三 大核心 API

1. setTimeout：延迟执行一次，推荐使用，可灵活控制调度
2. setInterval：周期重复执行，不推荐使用，存在设计缺陷
3. requestAnimationFrame：与屏幕刷新同步，动画场景首选

最佳实践：用递归 setTimeout 替代 setInterval，保证间隔准确、支持动态调整。

零延迟调度：setTimeout(fn, 0) 不是立即执行，而是当前同步任务完成后尽快执行，可用于拆分长任务。

关键提醒：定时器回调中的 this 指向全局对象；务必清理不再需要的定时器防止内存泄漏。

查找节点​

前面四个方法除了定义在 document 对象上，还定义在 Element 上，即在元素节点上也可以调用。

querySelector()​

document.querySelector 方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

let el1 = document.querySelector('.myclass');
let el2 = document.querySelector('#myParent > [ng-click]');

Since HTML5 it’s been valid to start an HTML element ID with a number. For example <div id="10">. From an HTML perspective, that’s fine.

要点一： 事件系统的三大角色 —— 事件对象（存储状态）、事件源（被操作对象）、监听函数（回调处理）

• 事件最早在 IE3 和 Netscape Navigator 2 中出现，用于分担服务器运算负载
• IE4/Netscape4 时代出现了两种对立的事件流：IE 的冒泡流 vs Netscape 的捕获流
• DOM2 级规范统一了事件模型，形成捕获阶段 → 目标阶段 → 冒泡阶段的三阶段事件流

• addEventListener 第三个参数 useCapture 决定在捕获/冒泡阶段触发，默认 false（冒泡）
• stopPropagation() 只阻止向其他元素传播，不阻止当前元素的其他监听器
• stopImmediatePropagation() 彻底阻止传播，包括当前元素的后续监听器
• 事件代理（委托）利用冒泡特性，将子元素监听统一挂载到父节点，性能更优

概览​

• Flexbox 布局语法速查手册
• Learn Flexbox with 30 Code Tidbits

JavaScript 正则表达式 四 大核心模块

1. 基础语法：修饰符、元字符、反义、贪婪/惰性匹配
2. RegExp 实例：test()、exec()、lastIndex 属性
3. String 方法：match()、search()、replace()、split()
4. 高级特性：分组捕获、反向引用、断言 Assertion

最容易踩坑：全局匹配 g 修饰符与 lastIndex 的关系、贪婪 vs 惰性匹配

最佳实践：使用 regex101.com 在线调试验证正则表达式

关键提醒：正则表达式带有 g 修饰符时，test() 和 exec() 会持续更新 lastIndex，可能导致意外结果

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。