120 posts tagged with "全栈开发"

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

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

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

Flexbox 是 容器定方向，子项定大小 两套属性加起来 12 个的事。

1. 启动：display: flex 一行，元素变弹性容器
2. 容器 6 属性：flex-direction / flex-wrap / justify-content / align-items / align-content / gap
3. 子项 6 属性：flex-grow / flex-shrink / flex-basis / flex / order / align-self
4. 核心思路：先想主轴（默认水平），再选对齐方式
5. 现代选择：gap 替代 margin 间距
6. 常见坑：主轴 / 交叉轴搞反，90% 的 flex bug 都是这个
7. 默认行为：grow=0 / shrink=1（不抢必缩）

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 里 Node 是基类，Element 只是 7 种节点之一——文本、注释、文档都是 Node 但 不是 Element。

• 节点类型：日常打交道最多是 Element / Text / Comment / Document 四种
• 三大属性：nodeName、nodeValue、textContent 各管一摊
• nodeType：用 Node.ELEMENT_NODE 常量，禁硬编码数字
• 父子关系：parentElement 只对 Element 父节点有值
• NodeList：实时的 集合，遍历时增删子节点会变化

this 指向在函数定义时不确定，调用时才确定。

1. 全局环境：浏览器 this === window，Node 中 this === global，严格模式为 undefined
2. 对象方法：obj.method() 中 this 指向点号左侧的对象
3. 独立调用：函数脱离对象后丢失绑定，this 回退到全局（严格模式 undefined）
4. 箭头函数：没有独立的 this，捕获定义时所在作用域的 this
5. 显式绑定：call/apply/bind 可手动指定任意 this

核心原则：只看如何调用，不看在哪定义。