如何在JS应用中实现类似Shopify的实时生成展示笛卡尔积变体功能

核心逻辑 #

缓存上一次生成的完整笛卡尔积集合，每次输入变更后生成新的全量笛卡尔积，比对两次结果的差集，仅将差集内容追加到展示容器即可，不需要重渲染已有内容，完全可以复现你提到的Shopify同款流畅效果。

实现步骤 #

• 全局缓存上一次的笛卡尔积结果，以及结果的唯一标识映射，减少重复比对的性能损耗
• 监听属性输入框的变更事件，每次触发时调用你已实现的方法生成最新的全量笛卡尔积数组
• 遍历新生成的数组，过滤出不在上一次缓存映射中的元素，即为本次新增的组合
• 将新增组合的DOM节点追加到展示容器末尾，同时更新缓存的结果集合和映射
• 如果需要支持删除属性/属性值的场景，可以给每个组合节点加自定义属性匹配唯一标识，直接删除对应节点即可，同样不需要全量重绘

代码示例 #

// 全局缓存变量
let cachedComboKeys = new Set()
const comboDisplayContainer = document.querySelector('#combination-display')

// 输入变更触发的回调函数
function handleAttrInputUpdate() {
  // 调用你已实现的笛卡尔积生成方法，入参为当前所有输入的属性参数
  const fullNewCombos = generateCartesianProduct(getCurrentInputAttrs())

  // 筛选本次新增的组合
  const addedCombos = fullNewCombos.filter(combo => {
    // 生成组合的唯一标识，可根据业务调整规则，只要保证同个组合标识稳定唯一即可
    const comboKey = typeof combo === 'string' ? combo : JSON.stringify(combo)
    return !cachedComboKeys.has(comboKey)
  })

  // 仅追加新增组合到展示容器
  addedCombos.forEach(combo => {
    const comboNode = document.createElement('div')
    comboNode.className = 'combination-card'
    const comboKey = typeof combo === 'string' ? combo : JSON.stringify(combo)
    comboNode.dataset.comboKey = comboKey
    // 自定义组合展示内容格式化逻辑
    comboNode.textContent = formatComboDisplayText(combo)
    comboDisplayContainer.appendChild(comboNode)
  })

  // 更新缓存
  fullNewCombos.forEach(combo => {
    const comboKey = typeof combo === 'string' ? combo : JSON.stringify(combo)
    cachedComboKeys.add(comboKey)
  })

  // 可选：处理属性/属性值删除的场景
  const newAllComboKeys = new Set(fullNewCombos.map(combo => typeof combo === 'string' ? combo : JSON.stringify(combo)))
  document.querySelectorAll('.combination-card').forEach(node => {
    if(!newAllComboKeys.has(node.dataset.comboKey)) {
      node.remove()
      cachedComboKeys.delete(node.dataset.comboKey)
    }
  })
}

效果参考 #

提示：如果笛卡尔积的量级特别大，可以用文档片段DocumentFragment批量插入新增节点，进一步减少DOM重排次数，提升渲染流畅度。

内容的提问来源于stack exchange，提问作者Harshana Nishshanka