浅拷贝快照适用于富文本undo/redo，仅捕获可写内联样式（如fontFamily、color、textAlign等）及选区位置与命令状态，不包含computedStyle或DOM引用，兼顾性能与还原精度。
在富文本编辑器中用浅拷贝暂存样式快照，本质是快速捕获当前选区或节点的可枚举、非嵌套的样式属性，适用于 undo/redo 场景下的轻量回溯。它不深挖 DOM 结构或 computedStyle，只取“表面一层”关键样式，兼顾性能与还原精度。
哪些样式适合用浅拷贝快照
富文本中真正需要回滚的样式通常是显式设置、可直接写入 style 属性的内联样式，例如：
- 字体类：fontFamily、fontSize、fontWeight、fontStyle、color、backgroundColor
- 对齐与装饰：textAlign、textDecoration、verticalAlign
- 行高与间距：lineHeight、letterSpacing
- 自定义数据：如 data-inline-type、data-mark-id 等业务标识字段
注意：不要拷贝 computedStyle（如 getComputedStyle(el).width），它不可写、含默认值、依赖布局，也不适合还原；也不要拷贝 classList 全量（除非你明确只关心 class 字符串本身）。
用 Object.assign 或展开运算符做安全浅拷贝
对一个已有的样式对象（比如从 el.style 或自定义配置中提取）执行浅拷贝即可，无需深克隆：
立即学习“Java免费学习笔记（深入）”；
// ✅ 推荐：从 el.style 提取并拷贝可写样式
function snapshotInlineStyle(el) {
const style = el.style;
// 只取有值的内联样式（排除空字符串和 'initial'/'inherit' 等）
const safeKeys = ['fontFamily', 'fontSize', 'fontWeight', 'fontStyle',
'color', 'backgroundColor', 'textAlign', 'textDecoration',
'lineHeight', 'letterSpacing', 'verticalAlign'];
const snapshot = {};
for (const key of safeKeys) {
const val = style[key];
if (val && val !== 'initial' && val !== 'inherit') {
snapshot[key] = val;
}
}
return { ...snapshot }; // 浅拷贝一份，防后续篡改
}
// 使用示例
const currentEl = window.getSelection().anchorNode.parentElement;
const styleSnapshot = snapshotInlineStyle(currentEl);
history.push(styleSnapshot); // 存入 undo 栈
结合 Range 和 Selection 做上下文快照
纯拷贝单个元素不够——富文本操作常跨标签（如加粗一段文字，可能包裹多个 span）。此时应记录选区范围 + 主要样式锚点：
- 保存
range.cloneRange()（注意：Range 对象不能直接序列化，需转为{startContainer, startOffset, endContainer, endOffset}） - 取
range.commonAncestorContainer或首个文本节点父元素，对其执行上述snapshotInlineStyle - 额外记录
document.queryCommandState('bold')等命令状态，补全逻辑样式（如 <strong> 标签是否激活）
这样一次快照既包含“样式值”，也隐含“作用位置”，还原时可精准重应用。
避免浅拷贝陷阱：DOM 引用与动态属性
浅拷贝只复制对象第一层属性值，但以下情况仍会互相影响：
-
style是CSSStyleDeclaration对象，直接拷贝el.style会保留引用 → 必须手动提取键值，不能 Object.assign(el.style) - 若样式对象里有
node: HTMLElement这类 DOM 引用，浅拷贝后仍指向原节点 → 快照中禁止存 DOM 实例，只存必要属性或 selector 路径 - 像
style.cssText是字符串，可拷贝，但解析成本高且易丢失结构 → 不推荐作为主要快照字段
一句话：快照 = 数据（样式键值 + 位置坐标 + 命令状态），不是 DOM 快照。
不复杂但容易忽略：浅拷贝在这里不是技术炫技，而是权衡——快、小、可逆。只要样式来源明确（内联 or commandState）、目标清晰（undo 时重写 style 或 toggle tag），一次干净的 Object.assign 就够用了。
