如何通过Object.assign构建支持多层级合并策略的动态主题配置引擎

Object.assign虽只能浅拷贝，但结合递归与策略映射表，可构建支持多层级合并的主题配置引擎。下文将详细解析实现方案。

Object.assign 仅支持单层属性拷贝，要实现嵌套对象合并需配合递归策略。核心方案是：顶层属性用 Object.assign 处理，对象类型字段则根据预设策略递归合并，支持覆盖、深合并、数组合并等多种模式。

明确多层级合并的常见策略类型

不同字段需采用差异化处理策略：

1. 覆盖策略（override）：子主题直接替换父主题对应字段，如修改 colors.primary 值；
2. 深合并策略（deepMerge）：递归处理嵌套对象，如分别更新 typography 下的 h1 和 body 属性；
3. 数组合并策略（concat/unique）：数组类型字段追加新元素而非替换，如 fonts.families；
4. 保留策略（preserve）：关键字段（如 id）始终保留基础配置值。

设计可声明式配置的合并策略表

通过策略映射表定义各路径合并行为：

const mergeStrategy = {
  'colors': 'deepMerge',
  'typography': 'deepMerge',
  'fonts.families': 'concat',
  'id': 'preserve',
  'metadata': 'override' // 默认 fallback
};

需实现 getStrategy(path) 函数，支持点号路径匹配和通配符查找。

封装递归合并函数，桥接 Object.assign

创建 smartMerge(target, source, strategyMap, path = '') 函数：

1. 当策略为 'deepMerge' 且双方均为对象时，递归合并各属性；
2. 策略为 'concat' 且双方为数组时，执行数组合并；
3. 策略为 'preserve' 时保留目标值不变；
4. 其他情况直接调用 Object.assign 处理。

注意：Object.assign 仍用于单层属性快速赋值，在递归过程中承担基础合并功能。

构建主题引擎类，支持动态加载与运行时切换

封装主题引擎实现动态配置：

class ThemeEngine {
  constructor(baseTheme, strategyMap) {
    this.base = baseTheme;
    this.strategy = strategyMap;
  }
  
  extend(overlay) {
    const merged = {};
    Object.assign(merged, this.base);
    smartMerge(merged, overlay, this.strategy);
    return merged;
  }
  
  use(themeName) {
    this.current = this.extend(themes[themeName]);
  }
}

通过递归策略与Object.assign的协同使用，可实现灵活高效的多层级主题配置合并方案，完美解决浅拷贝的局限性问题。