背景

某次大促期间，我们的平台推出优惠活动，用户量较日常增长3倍。大量交易完成的同时，问题随之而来。

问题集中出现在结算页的"确认支付"环节：

• 用户操作路径：商品详情页 → 加入购物车 → 结算页（填写收货地址）→ 选择支付方式（微信支付/支付宝/云闪付）→ 点击"确认支付"按钮
• 异常表现：点击按钮后，页面无响应（按钮不置灰、无加载态），部分用户反馈页面白屏，刷新后重新操作仍复现。

经过一系列排查，我们发现当多个支付SDK（如微信支付、支付宝、银联等）共存时，可能会因全局变量污染、事件冲突或依赖版本不兼容等问题导致支付流程崩溃，用户无法完成支付。

事实上，随着我们业务的极速扩张，系统中第三方SDK（如微信支付、支付宝、云闪付等）引入数量日渐增多增多，它们往往通过全局变量、DOM操作、事件监听等方式侵入应用环境，导致变量污染、API冲突、资源加载阻塞等问题。尤其在React单页应用中，组件生命周期与SDK异步加载的耦合，进一步放大了冲突风险。

本文将以这场真实事故为原型，详细还原从"用户无法支付"到"沙箱隔离方案落地"的全流程，包括问题排查的曲折过程、沙箱隔离的技术选型与实现细节，以及沉淀出的前端工程化最佳实践。希望能为面临类似问题的开发者提供可落地的解决方案，让支付环节从"事故高发区"转变为"稳定保障区"。

一、问题现象：支付链路的"断点时刻"

1.1 场景复现

在一个多支付渠道的在线商城中，我们集成了以下支付SDK：

• 微信支付H5 SDK
• 支付宝H5 SDK
• 银联云闪付SDK

用户行为：

• 用户选择商品后，点击“立即支付”。
• 页面加载支付SDK，弹出支付浮层。
• 用户选择“微信支付”，点击确认。

问题现象：

• 支付浮层卡死，控制台报错： Uncaught TypeError: Cannot read property 'invoke' of undefined 。
• 用户无法完成支付，刷新页面后问题依旧。

1.2 技术现象细化

通过用户反馈和线上监控（Sentry+Fundebug），我们收集到三类核心异常：

1、控制台报错（占比65%）

// 微信支付SDK冲突时
Uncaught TypeError: window.WeixinJSBridge.invoke is not a function
    at payment.js:23:15

// 支付宝SDK冲突时
Uncaught ReferenceError: AlipayJSBridge is not defined
    at alipay-sdk.js:45:20

// 全局变量冲突典型错误
Uncaught TypeError: Cannot read property 'init' of undefined
    at PayButton.jsx:89:22  // React组件中调用Pay.init()时

2、网络请求异常（占比20%）

• 部分用户的支付SDK资源（如https://res.wx.qq.com/open/js/jweixin-1.6.0.js）加载成功（HTTP 200），但window.wx对象未定义
• 支付宝SDK的https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.3.3/alipayjsapi.min.js加载后，window.AlipayJSBridge未挂载

3、React组件渲染异常（占比15%）

• 支付按钮组件（PayButton.jsx）在调用SDK后，因setState触发重渲染时，报"Maximum update depth exceeded"（无限循环更新）
• 结算页组件（CheckoutPage.jsx）因子组件错误导致整体卸载，触发componentWillUnmount时未清理SDK事件监听，导致内存泄漏。

1.3 初步假设

问题可能源于：

1. 全局变量冲突：多个支付SDK可能覆盖了相同的全局变量（如 window.WeixinJSBridge ）。
2. 事件监听冲突：SDK可能绑定了相同的事件名（如 message 事件）。
3. 依赖版本不兼容：某些SDK依赖的库版本冲突（如 axios 或 Promise polyfill）。

二、排查过程：从"表象"到"本质"的抽丝剥茧

面对线上紧急故障，我们遵循"先止血，后根治"的原则，先通过灰度发布临时回滚到上一版本（移除新接入的云闪付SDK），恢复支付功能，再启动深度排查。以下是排查的关键步骤：

2.1 第一步：复现环境搭建

为了模拟线上环境，我们搭建了包含多端、多SDK版本的测试矩阵：

结论：冲突仅发生在三个SDK同时加载时，初步判断为"多SDK共存时的环境污染"。

2.2 第二步：全局变量污染分析

通过Object.keys(window)对比"单SDK加载"和"多SDK加载"时的全局变量差异，发现关键冲突点：

典型冲突示例：支付宝SDK和云闪付SDK均定义了window.Pay全局对象：

// 支付宝SDK（alipay-sdk.js）
window.Pay = {
  init: function(config) { /* 支付宝初始化逻辑 */ },
  pay: function(params) { /* 支付宝支付逻辑 */ }
};

// 云闪付SDK（unionpay-sdk.js）
window.Pay = {
  init: function(options) { /* 云闪付初始化逻辑 */ },
  submit: function(data) { /* 云闪付提交逻辑 */ }
};

当两者同时加载时，后加载的云闪付SDK会覆盖window.Pay，导致支付宝支付调用Pay.init()时，实际执行的是云闪付的init方法，参数不匹配导致失败。

2.3 第三步：加载顺序与执行时机问题

（1）加载顺序随机性

项目中SDK通过index.html的<script>标签加载，未指定async/defer，导致加载顺序依赖网络速度：

<!-- index.html 原有加载方式 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.3.3/alipayjsapi.min.js"></script>
<script src="https://open.unionpay.com/ajs/quickpay-2.0.1.js"></script>

当网络波动时，云闪付SDK可能先于支付宝SDK加载，导致window.Pay被提前覆盖。

（2）React组件调用时机过早

支付按钮组件在componentDidMount中直接调用SDK初始化：

// PayButton.jsx 原有代码
componentDidMount() {
  // 未检查SDK是否加载完成
  window.Pay.init({  // 此时可能SDK未加载，或已被覆盖
    appId: this.props.appId,
    onSuccess: this.handleSuccess,
    onError: this.handleError
  });
}

React组件挂载时，SDK可能仍在异步加载中，导致window.Pay为undefined。

2.4 第四步：根本原因总结

通过上述排查，我们确定问题的核心矛盾是：第三方支付SDK普遍依赖全局变量暴露API，而多SDK共存时缺乏环境隔离机制，导致全局作用域污染、API命名冲突、加载顺序不可控。具体可归纳为"三个缺乏"：

• 缺乏变量隔离：所有SDK共享window全局作用域，无命名空间隔离。
• 缺乏加载控制：同步加载导致顺序不可控，异步加载又难以判断就绪状态。
• 缺乏执行沙箱：SDK的DOM操作、事件监听（如window.addEventListener('resize', ...)）直接影响主应用。

三、问题修复方案：前端沙箱隔离技术落地

3.1 方案一：沙箱隔离实现

基于上述分析，我们决定采用沙箱隔离技术来解决SDK冲突问题。通过为每个SDK创建独立的执行环境，避免全局变量污染。

// 沙箱隔离实现
/**
 * PaymentSandbox 类用于创建和管理多个 iframe 沙箱环境，实现不同 SDK 的隔离执行。
 */
class PaymentSandbox {
  constructor() {
    this.sandboxes = new Map();
  }

  /**
   * 创建一个以 iframe 为基础的沙箱环境
   * @param {string} name - 沙箱名称，用于标识和后续操作
   * @returns {Object} 返回包含 iframe、window 和 document 的沙箱对象
   */
  createSandbox(name) {
    // 创建iframe作为沙箱环境
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none';
    document.body.appendChild(iframe);

    // 获取沙箱window对象
    const sandboxWindow = iframe.contentWindow;

    // 复制必要的全局对象到沙箱
    sandboxWindow.console = window.console;
    sandboxWindow.Promise = window.Promise;
    sandboxWindow.JSON = window.JSON;

    // 存储沙箱引用
    this.sandboxes.set(name, {
      iframe,
      window: sandboxWindow,
      document: iframe.contentDocument,
    });

    console.log(`沙箱 ${name} 创建成功`);
    return this.sandboxes.get(name);
  }

  /**
   * 销毁指定名称的沙箱环境
   * @param {string} name - 要销毁的沙箱名称
   */
  destroySandbox(name) {
    if (this.sandboxes.has(name)) {
      const sandbox = this.sandboxes.get(name);
      sandbox.iframe.remove();
      this.sandboxes.delete(name);
      console.log(`沙箱 ${name} 已销毁`);
    }
  }

  /**
   * 在指定沙箱中执行 JavaScript 脚本
   * @param {string} sandboxName - 沙箱名称
   * @param {string} script - 要执行的 JavaScript 脚本字符串
   * @returns {Promise<any>} 返回执行结果的 Promise
   */
  executeInSandbox(sandboxName, script) {
    const sandbox = this.sandboxes.get(sandboxName);
    if (!sandbox) {
      throw new Error(`沙箱 ${sandboxName} 不存在`);
    }

    // 在沙箱中执行脚本
    return new Promise((resolve, reject) => {
      try {
        const result = sandbox.window.eval(script);
        resolve(result);
      } catch (error) {
        reject(error);
      }
    });
  }
}

// 基于沙箱的支付管理器
/**
 * SandboxPaymentManager 类用于在隔离环境中初始化和管理支付宝与微信支付 SDK，
 * 并提供统一的支付处理接口。
 */
class SandboxPaymentManager {
  constructor() {
    this.sandbox = new PaymentSandbox();
    this.alipaySandbox = null;
    this.wechatSandbox = null;
    this.initSandboxPaymentSDKs();
  }

  /**
   * 初始化支付宝和微信支付的沙箱环境及 SDK
   */
  async initSandboxPaymentSDKs() {
    try {
      // 为支付宝创建独立沙箱
      this.alipaySandbox = this.sandbox.createSandbox('alipay');

      // 为微信支付创建独立沙箱
      this.wechatSandbox = this.sandbox.createSandbox('wechat');

      // 在各自沙箱中初始化SDK
      await this.initAlipaySDK();
      await this.initWechatSDK();

      console.log('沙箱化SDK初始化完成');
    } catch (error) {
      console.error('沙箱化SDK初始化失败:', error);
    }
  }

  /**
   * 在支付宝沙箱中加载并初始化支付宝 SDK
   */
  async initAlipaySDK() {
    if (!this.alipaySandbox) return;

    // 在支付宝沙箱中加载SDK代码
    const alipayScript = `
      // 模拟支付宝SDK代码
      window.AlipayJSBridge = function() {
        this.version = 'alipay-1.0';
        this.pay = function(options) {
          return new Promise((resolve) => {
            // 模拟支付逻辑
            setTimeout(() => {
              resolve({ 
                result: 'success', 
                tradeNo: 'ALI_' + Date.now() 
              });
            }, 1000);
          });
        };
      };
      new AlipayJSBridge();
    `;

    await this.sandbox.executeInSandbox('alipay', alipayScript);
  }

  /**
   * 在微信沙箱中加载并初始化微信支付 SDK
   */
  async initWechatSDK() {
    if (!this.wechatSandbox) return;

    // 在微信沙箱中加载SDK代码
    const wechatScript = `
      // 模拟微信SDK代码
      window.WeixinJSBridge = function() {
        this.version = 'wechat-1.0';
        this.requestPayment = function(options) {
          return new Promise((resolve) => {
            // 模拟支付逻辑
            setTimeout(() => {
              resolve({ 
                result: 'success', 
                transactionId: 'WX_' + Date.now() 
              });
            }, 1000);
          });
        };
      };
      new WeixinJSBridge();
    `;

    await this.sandbox.executeInSandbox('wechat', wechatScript);
  }

  /**
   * 处理指定支付方式的支付请求
   * @param {string} paymentMethod - 支付方式，'alipay' 或 'wechat'
   * @param {number} amount - 支付金额
   * @returns {Promise<Object>} 返回支付结果的 Promise
   */
  async processPayment(paymentMethod, amount) {
    console.log('处理沙箱化支付请求:', { paymentMethod, amount });

    try {
      if (paymentMethod === 'alipay') {
        // 在支付宝沙箱中执行支付
        const result = await this.sandbox.executeInSandbox(
          'alipay',
          `
          window.AlipayJSBridge.prototype.pay({
            amount: ${amount},
            subject: '商品支付'
          });
        `,
        );
        return result;
      } else if (paymentMethod === 'wechat') {
        // 在微信沙箱中执行支付
        const result = await this.sandbox.executeInSandbox(
          'wechat',
          `
          window.WeixinJSBridge.prototype.requestPayment({
            amount: ${amount},
            description: '商品支付'
          });
        `,
        );
        return result;
      }
    } catch (error) {
      console.error('沙箱支付失败:', error);
      throw error;
    }
  }

  /**
   * 销毁所有支付相关的沙箱环境
   */
  destroy() {
    this.sandbox.destroySandbox('alipay');
    this.sandbox.destroySandbox('wechat');
    console.log('支付沙箱已清理');
  }
}

（1）架构解析：

• PaymentSandbox 类负责创建和管理沙箱环境。
• SandboxPaymentManager 类基于沙箱实现支付功能。

（2）设计思路：

• 使用iframe创建完全隔离的执行环境。
• 每个SDK在独立沙箱中运行，避免相互干扰。

（3）重点逻辑：

• 沙箱的创建和销毁。
• 跨沙箱的代码执行和数据通信。

（4）参数解析：

• name: 沙箱标识名称。
• script: 在沙箱中执行的脚本代码。

3.2 方案二：动态加载与命名空间隔离

除了沙箱隔离，我们还实现了另一种轻量级的解决方案：动态加载配合命名空间隔离。

// 命名空间隔离方案
/**
 * NamespacePaymentManager 类用于管理多个支付 SDK 的动态加载与命名空间隔离，
 * 避免不同 SDK 之间的全局变量冲突，并提供统一的支付处理接口。
 */
class NamespacePaymentManager {
  constructor() {
    this.sdkRegistry = new Map();       // 存储已加载的 SDK 命名空间副本
    this.loadingPromises = new Map();   // 存储正在加载中的 SDK Promise，防止重复加载
  }

  /**
   * 动态加载指定路径的 SDK 脚本，并将其封装到命名空间中进行隔离。
   * @param {string} src - SDK 脚本的加载地址
   * @param {string} namespace - SDK 对应的命名空间标识（如 'alipay'、'wechat'）
   * @returns {Promise<Object>} 返回一个 Promise，解析为封装后的 SDK 命名空间对象
   */
  loadSDKScript(src, namespace) {
    // 如果已经在加载中，返回现有Promise
    if (this.loadingPromises.has(namespace)) {
      return this.loadingPromises.get(namespace);
    }

    const loadPromise = new Promise((resolve, reject) => {
      const script = document.createElement('script');
      script.src = src;
      script.onload = () => {
        // 保存原始SDK引用
        const originalSDK = this.extractOriginalSDK(namespace);
        if (originalSDK) {
          this.sdkRegistry.set(namespace, originalSDK);
          resolve(originalSDK);
        } else {
          reject(new Error(`无法提取 ${namespace} SDK`));
        }
      };
      script.onerror = reject;
      document.head.appendChild(script);
    });

    this.loadingPromises.set(namespace, loadPromise);
    return loadPromise;
  }

  /**
   * 提取并封装原始 SDK 到命名空间对象中，并清理全局污染变量。
   * @param {string} namespace - SDK 的命名空间标识
   * @returns {Object|null} 返回封装后的命名空间对象，若未找到则返回 null
   */
  extractOriginalSDK(namespace) {
    switch (namespace) {
      case 'alipay':
        if (window.AlipayJSBridge) {
          // 创建命名空间副本
          const AlipayNamespace = {
            SDK: window.AlipayJSBridge,
            instance: new window.AlipayJSBridge(),
          };
          // 清理全局变量
          delete window.AlipayJSBridge;
          return AlipayNamespace;
        }
        break;
      case 'wechat':
        if (window.WeixinJSBridge) {
          // 创建命名空间副本
          const WechatNamespace = {
            SDK: window.WeixinJSBridge,
            instance: new window.WeixinJSBridge(),
          };
          // 清理全局变量
          delete window.WeixinJSBridge;
          return WechatNamespace;
        }
        break;
    }
    return null;
  }

  /**
   * 按需加载并初始化指定支付方式的 SDK。
   * @param {string} paymentMethod - 支付方式标识（如 'alipay'、'wechat'）
   * @returns {Promise<Object|null>} 返回封装后的 SDK 命名空间对象，失败或不支持时返回 null
   */
  async initPaymentSDK(paymentMethod) {
    try {
      switch (paymentMethod) {
        case 'alipay':
          if (!this.sdkRegistry.has('alipay')) {
            await this.loadSDKScript('/sdk/alipay.js', 'alipay');
          }
          break;
        case 'wechat':
          if (!this.isWechatEnvironment()) {
            console.warn('微信支付只能在微信浏览器中使用');
            return null;
          }
          if (!this.sdkRegistry.has('wechat')) {
            await this.loadSDKScript('/sdk/wechat.js', 'wechat');
          }
          break;
      }
      return this.sdkRegistry.get(paymentMethod);
    } catch (error) {
      console.error(`初始化 ${paymentMethod} SDK失败:`, error);
      return null;
    }
  }

  /**
   * 判断当前环境是否为微信浏览器。
   * @returns {boolean} 若是微信浏览器则返回 true，否则返回 false
   */
  isWechatEnvironment() {
    return navigator.userAgent.toLowerCase().includes('micromessenger');
  }

  /**
   * 判断当前环境是否为支付宝浏览器。
   * @returns {boolean} 若是支付宝浏览器则返回 true，否则返回 false
   */
  isAlipayEnvironment() {
    return navigator.userAgent.toLowerCase().includes('alipay');
  }

  /**
   * 根据支付方式和金额处理支付流程。
   * @param {string} paymentMethod - 支付方式标识（如 'alipay'、'wechat'）
   * @param {number} amount - 支付金额
   * @returns {Promise<any>} 返回支付操作的结果
   * @throws {Error} 若 SDK 不可用则抛出错误
   */
  async processPayment(paymentMethod, amount) {
    console.log('处理命名空间隔离支付:', { paymentMethod, amount });

    // 按需初始化SDK
    const sdkNamespace = await this.initPaymentSDK(paymentMethod);
    if (!sdkNamespace) {
      throw new Error(`${paymentMethod} SDK不可用`);
    }

    // 使用命名空间中的SDK实例
    if (paymentMethod === 'alipay') {
      return await sdkNamespace.instance.pay({
        amount: amount,
        subject: '商品支付',
      });
    } else if (paymentMethod === 'wechat') {
      return await sdkNamespace.instance.requestPayment({
        amount: amount,
        description: '商品支付',
      });
    }
  }
}

（1）架构解析：

• 采用动态加载机制按需加载SDK。
• 通过命名空间隔离避免全局变量冲突。

（2）设计思路：

• 加载对应SDK。
• 加载后立即将 只在需要时其从全局作用域移除并保存到命名空间。

（3）重点逻辑：

• SDK脚本的动态加载。
• 原始SDK的提取和命名空间保存。

（4）参数解析：

• src: SDK脚本地址。
• namespace: 命名空间标识。

3.3 最终实现与部署

综合考虑性能和兼容性，我们选择了命名空间隔离方案作为生产环境的解决方案，并进行了优化：

// 生产环境优化版支付管理器
/**
 * ProductionPaymentManager 类用于管理多种支付方式的加载与调用。
 * 支持支付宝和微信支付，具备环境检测、SDK隔离、参数构建等功能。
 */
class ProductionPaymentManager {
  /**
   * 构造函数初始化支付管理器配置和状态。
   * @param {Object} options - 配置选项
   * @param {string} [options.alipayScript='/sdk/alipay.js'] - 支付宝SDK脚本路径
   * @param {string} [options.wechatScript='/sdk/wechat.js'] - 微信SDK脚本路径
   * @param {boolean} [options.debug=false] - 是否开启调试日志
   */
  constructor(options = {}) {
    this.options = {
      alipayScript: '/sdk/alipay.js',
      wechatScript: '/sdk/wechat.js',
      debug: false,
      ...options,
    };

    this.sdkRegistry = new Map();
    this.loadingPromises = new Map();
    this.paymentCache = new Map();

    this.init();
  }

  /**
   * 初始化方法，执行环境检测和推荐SDK预加载。
   */
  init() {
    // 检测运行环境
    this.detectEnvironment();

    // 预加载当前环境推荐的支付方式
    this.preloadRecommendedSDK();
  }

  /**
   * 检测当前运行环境（浏览器类型、设备类型等）。
   */
  detectEnvironment() {
    const ua = navigator.userAgent.toLowerCase();
    this.environment = {
      isWechat: ua.includes('micromessenger'),
      isAlipay: ua.includes('alipay'),
      isMobile:
        /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(
          navigator.userAgent,
        ),
      isIOS: /iPad|iPhone|iPod/.test(navigator.userAgent),
    };

    this.log('运行环境检测:', this.environment);
  }

  /**
   * 根据当前环境预加载推荐的支付SDK。
   */
  preloadRecommendedSDK() {
    // 根据环境预加载推荐的SDK
    if (this.environment.isWechat) {
      this.initPaymentSDK('wechat');
    } else if (this.environment.isAlipay) {
      this.initPaymentSDK('alipay');
    }
  }

  /**
   * 输出调试日志信息。
   * @param {...any} args - 日志内容
   */
  log(...args) {
    if (this.options.debug) {
      console.log('[PaymentManager]', ...args);
    }
  }

  /**
   * 初始化指定支付方式的SDK。
   * @param {string} paymentMethod - 支付方式名称（如 'alipay' 或 'wechat'）
   * @returns {Promise<Object>} 返回SDK实例对象
   */
  async initPaymentSDK(paymentMethod) {
    // 检查是否已加载
    if (this.sdkRegistry.has(paymentMethod)) {
      return this.sdkRegistry.get(paymentMethod);
    }

    // 检查是否正在加载
    if (this.loadingPromises.has(paymentMethod)) {
      return this.loadingPromises.get(paymentMethod);
    }

    // 环境检查
    if (paymentMethod === 'wechat' && !this.environment.isWechat) {
      const error = new Error('微信支付只能在微信浏览器中使用');
      this.log(error.message);
      return Promise.reject(error);
    }

    // 创建加载Promise
    const loadPromise = this.loadAndIsolateSDK(paymentMethod);
    this.loadingPromises.set(paymentMethod, loadPromise);

    try {
      const sdk = await loadPromise;
      this.sdkRegistry.set(paymentMethod, sdk);
      this.loadingPromises.delete(paymentMethod);
      this.log(`${paymentMethod} SDK加载成功`);
      return sdk;
    } catch (error) {
      this.loadingPromises.delete(paymentMethod);
      this.log(`${paymentMethod} SDK加载失败:`, error);
      throw error;
    }
  }

  /**
   * 加载并隔离指定支付方式的SDK。
   * @param {string} paymentMethod - 支付方式名称
   * @returns {Promise<Object>} 返回封装后的SDK对象
   */
  loadAndIsolateSDK(paymentMethod) {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      let scriptSrc;

      switch (paymentMethod) {
        case 'alipay':
          scriptSrc = this.options.alipayScript;
          break;
        case 'wechat':
          scriptSrc = this.options.wechatScript;
          break;
        default:
          return reject(new Error(`不支持的支付方式: ${paymentMethod}`));
      }

      // 保存加载前的全局状态
      const beforeGlobals = this.captureGlobalState();

      script.src = scriptSrc;
      script.onload = () => {
        try {
          // 提取SDK并恢复全局状态
          const sdk = this.extractAndRestoreSDK(paymentMethod, beforeGlobals);
          if (sdk) {
            resolve(sdk);
          } else {
            reject(new Error(`${paymentMethod} SDK提取失败`));
          }
        } catch (error) {
          reject(error);
        }
      };
      script.onerror = error => {
        reject(new Error(`加载 ${scriptSrc} 失败: ${error.message}`));
      };

      document.head.appendChild(script);
    });
  }

  /**
   * 捕获当前全局变量状态，用于后续SDK隔离。
   * @returns {Object} 包含全局键名和时间戳的对象
   */
  captureGlobalState() {
    return {
      keys: Object.keys(window),
      timestamp: Date.now(),
    };
  }

  /**
   * 提取SDK并还原全局状态。
   * @param {string} paymentMethod - 支付方式名称
   * @param {Object} beforeState - 加载前的全局状态
   * @returns {Object|null} 封装后的SDK对象或null
   */
  extractAndRestoreSDK(paymentMethod, beforeState) {
    let sdkInstance = null;
    let sdkClass = null;

    // 根据支付方式提取SDK
    switch (paymentMethod) {
      case 'alipay':
        sdkClass = window.AlipayJSBridge;
        if (sdkClass) {
          sdkInstance = new sdkClass();
        }
        break;
      case 'wechat':
        sdkClass = window.WeixinJSBridge;
        if (sdkClass) {
          sdkInstance = new sdkClass();
        }
        break;
    }

    // 恢复全局状态（清理SDK添加的全局变量）
    const afterKeys = Object.keys(window);
    const newKeys = afterKeys.filter(key => !beforeState.keys.includes(key));

    newKeys.forEach(key => {
      if (key.startsWith('Alipay') || key.startsWith('Weixin')) {
        delete window[key];
      }
    });

    if (sdkClass && sdkInstance) {
      return {
        Class: sdkClass,
        instance: sdkInstance,
        method: paymentMethod,
      };
    }

    return null;
  }

  /**
   * 处理支付流程。
   * @param {string} paymentMethod - 支付方式
   * @param {number} amount - 支付金额
   * @param {Object} options - 其他支付参数
   * @returns {Promise<any>} 支付结果
   */
  async processPayment(paymentMethod, amount, options = {}) {
    this.log('开始处理支付:', { paymentMethod, amount, options });

    try {
      // 初始化对应SDK
      const sdk = await this.initPaymentSDK(paymentMethod);
      if (!sdk) {
        throw new Error(`${paymentMethod} SDK不可用`);
      }

      // 构造支付参数
      const paymentParams = this.buildPaymentParams(
        paymentMethod,
        amount,
        options,
      );

      // 执行支付
      let result;
      if (paymentMethod === 'alipay') {
        result = await sdk.instance.pay(paymentParams);
      } else if (paymentMethod === 'wechat') {
        result = await sdk.instance.requestPayment(paymentParams);
      }

      this.log('支付成功:', result);
      return result;
    } catch (error) {
      this.log('支付失败:', error);
      throw error;
    }
  }

  /**
   * 构建支付参数。
   * @param {string} paymentMethod - 支付方式
   * @param {number} amount - 支付金额
   * @param {Object} options - 自定义参数
   * @returns {Object} 构造好的支付参数对象
   */
  buildPaymentParams(paymentMethod, amount, options) {
    const baseParams = {
      amount: amount,
      timestamp: Date.now(),
    };

    switch (paymentMethod) {
      case 'alipay':
        return {
          ...baseParams,
          subject: options.subject || '商品支付',
          body: options.body || '商品描述',
          ...options,
        };
      case 'wechat':
        return {
          ...baseParams,
          description: options.description || '商品支付',
          ...options,
        };
      default:
        return { ...baseParams, ...options };
    }
  }

  /**
   * 获取当前环境下可用的支付方式列表。
   * @returns {Array<string>} 可用支付方式数组
   */
  getAvailablePaymentMethods() {
    const methods = [];

    if (this.environment.isWechat) {
      methods.push('wechat');
    }

    if (!this.environment.isWechat || this.options.allowAlipayInWechat) {
      methods.push('alipay');
    }

    return methods;
  }

  /**
   * 销毁支付管理器资源。
   */
  destroy() {
    this.sdkRegistry.clear();
    this.loadingPromises.clear();
    this.paymentCache.clear();
    this.log('支付管理器已销毁');
  }
}

// 使用示例
const paymentManager = new ProductionPaymentManager({
  debug: true,
  allowAlipayInWechat: true,
});

// 处理支付
async function handlePayment() {
  try {
    const result = await paymentManager.processPayment('alipay', 99.99, {
      subject: '商品购买',
      body: '商品详细描述',
    });
    console.log('支付结果:', result);
  } catch (error) {
    console.error('支付失败:', error);
  }
}

四、避坑总结

通过这次问题的解决，我们总结了以下关键经验和避坑指南：

4.1 常见问题及解决方案

• 全局变量冲突

• 问题：多个SDK修改相同全局变量导致功能异常
• 解决：使用沙箱或命名空间隔离

• 按需加载时机

• 问题：SDK加载时机不当影响用户体验
• 解决：根据运行环境预加载推荐SDK

• 错误处理不完善

• 问题：SDK加载失败或支付异常未正确处理
• 解决：建立完整的错误捕获和处理机制

4.2 性能优化建议

/**
 * 性能监控装饰器
 * 用于监控方法的执行时间，支持同步和异步方法
 * @param {Object} target - 装饰器应用的目标对象
 * @param {string} propertyName - 被装饰的方法名
 * @param {Object} descriptor - 方法描述符对象
 * @returns {Object} 修改后的描述符对象
 */
// 性能监控装饰器
function performanceMonitor(target, propertyName, descriptor) {
  const method = descriptor.value;
  descriptor.value = function (...args) {
    const start = performance.now();
    const result = method.apply(this, args);

    // 处理异步方法的性能监控
    if (result instanceof Promise) {
      return result.then(res => {
        const end = performance.now();
        console.log(`${propertyName} 执行时间: ${end - start}ms`);
        return res;
      });
    } else {
      // 处理同步方法的性能监控
      const end = performance.now();
      console.log(`${propertyName} 执行时间: ${end - start}ms`);
      return result;
    }
  };
}

/**
 * 受监控的支付管理器
 * 继承自ProductionPaymentManager，对关键支付方法添加性能监控
 */
// 应用到支付管理器
class MonitoredPaymentManager extends ProductionPaymentManager {
  /**
   * 处理支付流程，添加性能监控
   * @param {string} paymentMethod - 支付方式
   * @param {number} amount - 支付金额
   * @param {Object} options - 支付选项
   * @returns {Promise} 支付处理结果的Promise
   */
  @performanceMonitor
  async processPayment(paymentMethod, amount, options = {}) {
    return super.processPayment(paymentMethod, amount, options);
  }

  /**
   * 初始化支付SDK，添加性能监控
   * @param {string} paymentMethod - 支付方式
   * @returns {Promise} SDK初始化结果的Promise
   */
  @performanceMonitor
  async initPaymentSDK(paymentMethod) {
    return super.initPaymentSDK(paymentMethod);
  }
}

结语

本文通过一个真实的在线商城支付SDK冲突问题，详细展示了从前端问题排查到解决方案实现的完整过程。我们分析了问题的根本原因——第三方SDK之间的全局变量冲突，并提出了两种有效的解决方案：沙箱隔离和命名空间隔离。

通过实际代码实现和架构设计，我们不仅解决了当前问题，还建立了一套可复用的支付SDK管理机制。这套机制具有以下优势：

• 高兼容性：有效解决第三方SDK冲突问题。
• 按需加载：提升页面加载性能。
• 易于维护：模块化设计便于扩展和维护。
• 完善监控：内置日志和性能监控机制。

随着业务复杂度的提升和第三方服务的广泛使用，类似的冲突问题会越来越常见。通过本文的实践，我们不仅解决了一个具体问题，更重要的是建立了一套处理此类问题的方法论，为今后应对类似挑战提供了宝贵经验。

希望本文的内容能够帮助读者在面对复杂的前端集成问题时，能够快速定位问题根源并采用合适的解决方案，提升开发效率和产品质量。