DEV Community

NikiMunger
NikiMunger

Posted on

stopPropagation()、catch (_)、定位属性、chrome.runtime.getURL、requestAnimationFrame()

#css #beginners #javascript

stopPropagation()

e.stopPropagation()的作用是 阻止事件继续冒泡（Propagation）。
也就是说：

  • 当前元素的父元素不会再收到这个事件
  • 祖先元素也不会收到这个事件
  • 其他监听器（在冒泡阶段）不会被触发

catch (_)

catch (_) 中的 下划线 _ 只是一个变量名，表示“我不关心这个错误对象”。

在 JavaScript 中：

try {
  // 可能会抛出错误的代码
} catch (err) {
  // err 是错误对象
}
Enter fullscreen mode Exit fullscreen mode

但如果你 不需要使用错误对象（比如只想吞掉错误，不做处理），你可以写成：

catch (_) {}
Enter fullscreen mode Exit fullscreen mode

为什么用 _？

因为：

  • catch 后面必须写一个“接收错误对象的变量名”
  • 但你又不想使用它
  • 使用 _ 表示“这个变量不会被用到”，是一种常见约定写法（语义等同于“忽略这个值”）

与 catch {} 的区别？

在 较新版本的 JavaScript（ES2019/ES10）中，可以写：

catch {}
Enter fullscreen mode Exit fullscreen mode

这是“可选 catch 绑定”语法，不需要变量名。

但如果为了兼容旧浏览器（特别是 Chrome 扩展很多人要求更广兼容性），开发者可能仍然写：

catch (_) {}
Enter fullscreen mode Exit fullscreen mode

定位属性

left: 50%：把这个元素的左边界放到父容器宽度的 50% 位置
只在元素是 position: absolute 或 position: relative 或 position: fixed 时才生效。

chrome.runtime.getURL

chrome.runtime.getURL() 是 Chrome 扩展（Chrome Extension）专用 API，用于 根据扩展内的相对路径，生成一个可在网页 / 扩展脚本中使用的绝对 URL。

这是扩展开发中常用的一个函数，尤其在加载静态资源（图片、脚本、样式、模型文件等）时用得特别多。

作用

把扩展内的文件路径转换成可访问的完整 URL

扩展的资源文件不能直接用相对路径访问，比如：

assets/icon.png
Enter fullscreen mode Exit fullscreen mode

在扩展运行时，Chrome 会把这些文件映射到一个特殊的扩展 URL，例如：

chrome-extension://abcdefghijklmno/assets/icon.png
Enter fullscreen mode Exit fullscreen mode

但你 不能直接写死这个扩展 ID。
所以就需要用：

chrome.runtime.getURL('assets/icon.png');
Enter fullscreen mode Exit fullscreen mode

它会自动根据当前扩展的 ID 生成真正可访问的链接。

能够获取的文件

只能获取 manifest.json 中声明为可访问的文件，包括：

  • action.default_icon
  • content_scripts.js/css
  • web_accessible_resources 中列出的文件
  • 扩展包内任何资源（但如果要给网页访问，需要放进 web_accessible_resources）

常见用途

用途 示例
给 content script 注入图片 挂 UI 图标、按钮
注入 JS/CSS 在网页动态加载扩展自己的脚本、样式
Web Worker 加载脚本 new Worker(chrome.runtime.getURL('worker.js'))
Three.js / AR / 模型加载 loader.load(chrome.runtime.getURL('Duck.glb'))
读取扩展资源 JSON、配置文件、模型文件等

requestAnimationFrame()

requestAnimationFrame()（简称 rAF）是浏览器提供的一个用于 高性能动画 的 API。它让你可以在浏览器下一次重绘（render）前执行一个回调函数，用来实现 流畅、节能、同步刷新率 的动画。

这是前端中做动画、游戏、粒子效果、涟漪效果、Canvas 渲染等场景的标准方式。

基本用法 

function loop(timestamp) {
  console.log(timestamp);  // 当前帧的时刻（毫秒）

  // 下一帧继续
  requestAnimationFrame(loop);
}

// 启动动画循环
requestAnimationFrame(loop);
Enter fullscreen mode Exit fullscreen mode

作用

在浏览器每一帧渲染前自动执行你的回调，让动画紧跟屏幕刷新率（通常 60fps）。

比 setInterval() / setTimeout() 更流畅且不会无意义占用 CPU。

为什么不用 setInterval 做动画？

对比项 requestAnimationFrame setInterval / setTimeout
刷新同步 ✔ 自动与屏幕刷新同步（一般 60fps ✘ 时间固定，不跟屏幕同步
流畅度 ✔ 更流畅，无撕裂卡顿 ✘ 偶尔掉帧、卡顿
CPU 节能 ✔ Tab 不可见自动暂停动画 ✘ 即使页面隐藏也继续运行
延迟 ✔ 更低 ✘ setTimeout 最低 4ms（甚至更高）

停止动画

requestAnimationFrame() 会返回 ID：

const id = requestAnimationFrame(loop);
Enter fullscreen mode Exit fullscreen mode

停止方式：

cancelAnimationFrame(id);
Enter fullscreen mode Exit fullscreen mode

常见用途

  • DOM/CSS 动画（手写）:例如元素淡出、移动、缩放。
  • Canvas 动画:涟漪效果就可以用它实现。
  • 游戏循环（Game Loop）:比如 2D/3D 游戏引擎 (Three.js, Phaser) 都用它做渲染循环。
  • 粒子动画:烟花、烟雾、下雨、波纹等。
  • 物理动画:利用 timestamp 做速度、加速度模拟。

Top comments (0)