106 posts tagged with "全栈开发"

contextBridge 解决的不是"怎么把 API 传给页面"，而是"怎么让页面用 Node 能力但看不到 Node 环境"。

1. 本质：在 isolated world 创建一道有边界的桥，preload 能跑 Node，页面只能摸到白名单 API
2. 机制：preload 跑在 isolated world，主世界（页面）拿不到 preload 的闭包变量，只能拿到白名单出口
3. 能力：exposeInMainWorld 暴露受限 API，序列化约束守住边界（Function、Symbol、Error 不能裸传）
4. 类型系统：preload 内 typeof api + 全局 Window['electronAPI'] 声明，编译期对齐
5. 反模式：暴露整个 ipcRenderer、暴露 process、关掉 contextIsolation

Electron 渲染层的真正主角不是 BrowserWindow，是 webContents。

1. 定位：每个渲染页面背后都有一个 webContents 实例
2. 三种获取方式：BrowserWindow.webContents、webContents.getAllWebContents()、<webview> 标签
3. 核心 API：loadURL、loadFile、导航事件、executeJavaScript、openDevTools
4. 关键推送：webContents.send 是 main 主动通知 renderer 的唯一通道
5. 与 IPC 的关系：send 单向 main → renderer，invoke 反向，组合用才能双向
6. 踩坑：webContents 销毁后再 send 直接抛错
7. 与视图的关系：webContents 是内容，BrowserWindow / webContentsView 是宿主

Git submodule 是 Git 原生的多仓库嵌套机制，父仓库只记 commit hash，不存文件内容。

1. 是什么：主仓库子目录里嵌入独立 Git 仓库，各自有 commit 历史
2. 三个核心命令：submodule add / init + update / update --remote
3. 典型场景：第三方库源码嵌入、独立发布周期的子项目
4. 致命坑 1：新 clone 是空目录，必须 init + update 才有内容
5. 致命坑 2：子模块默认 detached HEAD，commit 容易推不上去
6. 致命坑 3：主仓库切分支后忘了 update --remote，代码对不上
7. 替代方案：monorepo 处理强耦合，subtree 处理简单嵌入

Electron 的渲染层不是"一个浏览器"，是 Chromium + 多层抽象。

1. Chromium 是底座：每个 Electron 版本绑定一个 Chromium 稳定版
2. webContents 是核心抽象：每个渲染页面背后都有一个 webContents 实例
3. <webview> 标签：在 renderer 里嵌入另一个 webContents
4. webContentsView 是新版抽象：替代已废弃的 BrowserView
5. webPreferences 是渲染配置：preload / contextIsolation / sandbox 等开关
6. 系统 WebView 完全不同：WKWebView / WebView2 是 OS 提供的

Electron 的本质是两个不同类型的进程，IPC 是它们之间唯一合法沟通的桥。

1. 进程模型：一个 main 进程（Node.js 全权限）+ N 个 renderer 进程（Chromium 受限沙箱）
2. IPC 核心：main 用 ipcMain 监听，renderer 用 ipcRenderer 发起，contextBridge 是安全转交
3. 三种调用模式：send/on（单向）、invoke/handle（异步返回值）、MessagePort（双向长连接）
4. 安全铁律：默认开 contextIsolation + nodeIntegration: false，主进程做权限守门人
5. 反模式：在 renderer 里直接 require('fs')、把 token 放 IPC payload、不校验 sender

Electron 日志的三个核心决策点：存哪、怎么切、怎么查。

1. 存哪：主进程写 app.getPath('userData')/logs，渲染进程通过 IPC 转交，不要直接写文件系统
2. 怎么切：按大小滚动 + 按天滚动，绝对不要单文件无上限写入
3. 怎么查：开发环境直接 tail，生产环境用 electron-log 的文件路径 + 崩溃堆栈上报
4. 级别分级：error/warn/info 写文件，debug/trace 仅本地 console
5. 崩溃捕获：JS 异常走 uncaughtException，native 崩溃走 crashReporter，两条路不能混
6. 敏感信息：token / cookie / 密码进日志前必须 redact() 脱敏

React ref 和 forwardRef 不是一个层级的概念。

ref 是 React 故意不放入 props 的"逃生通道"，forwardRef 是把这个通道从 class 实例延伸到函数组件的桥梁。

• ref 是 React 特殊处理的 prop：class 组件默认挂到实例，函数组件默认拿不到
• forwardRef 把 ref 这个逃生通道"打通"到函数组件内部的 DOM 或组件实例
• 经典组合：forwardRef + useImperativeHandle，自定义暴露给父组件的方法集合
• displayName 给 DevTools 留个可读名字，避免看到一堆 "ForwardRef" / "Anonymous"
• React 19 起 ref 已经是普通 prop，forwardRef 即将退役——但理解它仍是排查老代码的基础

Chrome 用 4 个发布通道（Canary / Dev / Beta / Stable）同步推进，同一份代码按顺序流过所有通道后才进入 Stable。

1. Canary：每天构建，测试最少，可能导致崩溃。
2. Dev：每周 1-2 次构建，可能和 Canary 在同一个 MAJOR。
3. Beta：每周小更新 + 每 4 周大更新，比 Stable 早一个月以上拿到新功能。
4. Stable：每 2-3 周小更新 + 每 4 周大更新，分阶段从 1-5% 灰度到 100%。

核心反直觉："渠道 ≠ 版本"。MAJOR 号是里程碑（M101、M102、M103…），不是"我现在用的是第几代 Chrome"。同一时刻 Stable、Beta、Dev/Canary 经常对应 3 个连续的 MAJOR —— 但 Dev 和 Canary 可以共享同一个 MAJOR。

Vercel Labs 开源 scriptc，把 TypeScript 编译成不含 V8 的原生二进制。这条路 2016 年就有人走了。

• 不是新叙事：从 ts2c 到 Porffor 已经走了十年
• 分水岭在 三 档：静态编译 / 嵌引擎 / 拒绝编译并报错码
• 静态产物：170–200 KB，启动 2.4 ms，内存 1–4 MB
• 对照 Node SEA：60–100 MB，47 ms，67–116 MB
• Perry 早半年：押的是 Node 兼容性和 11 个平台
• 真正的争议：不是谁抄谁，是两边都由 AI 大规模生成
• 结论：CLI 和 Serverless 可以试，别现在卸载 Node

核心观点：CSS 级联按"属性"算胜负，不是按"类名"合并。

1. 裁决顺序：specificity → layer → 源码顺序，最后登场者赢
2. 冲突点：同一属性只能保留一个值，类名再多也是同一个声明位
3. 典型坑：layout.css 后加载的 .flex-col 会把 utils.css 的 .lg:flex-row 改回去
4. 回答"flex-col flex 能不能拆开"：不能，CSS 不按类名分摊属性
5. 推论：抢不同属性时互不干扰，按 reset/utilities/components 拆文件完全可行
6. 排查路径：DevTools → Computed → 看属性右边列出哪些规则在抢