如何在myRoute.svelte中调用transactionEvents的userPressedButton POST操作？

我正在搭建一个系统，用于持久化应用中用户「事务（会话）」内发生的单个事件数据。设计思路是为每个事件创建不同的POST操作，采用通用POST方法但使用不同payload；通过从service导入操作集合，在应用不同部分调用对应操作记录事件。目前已通过工厂模式makeTransactionEvents创建了transactionEvents对象，现在需要知道如何在myRoute.svelte中调用其中的userPressedButton POST操作。

相关代码如下：

service.js #

/**
 * 对对象执行类似Array.prototype.map()的操作
 *
 * @param {object} obj - 要映射的对象
 * @param {Function} func - 对对象每个项执行的函数
 * @returns {object} 映射后的新对象
 */
function objectMap(obj, func) {
  return Object.fromEntries(
    Object.entries(obj).map(([key, value], index) => [
      key,
      func(value, key, index),
    ])
  );
}

const eventPayloads = {
  userPressedButton() {
    return {
      eventType: TRANSACTION_EVENT_TYPES.UserAction,
      eventSubType: TRANSACTION_EVENT_SUBTYPES.PressedButton
    }
  },

  userDidSomethingElse() {
    return {
      eventType: TRANSACTION_EVENT_TYPES.UserAction,
      eventSubType: TRANSACTION_EVENT_SUBTYPES.DidSomethingElse
    }
  }
};

/**
 * 创建一个事务事件服务调用函数
 * 发送请求
 *
 * @param {Function} payloadFunc - 创建payload的函数
 * @returns {Function} 初始化事务事件的函数
 */
function makeTransactionEvent(payloadFunc) {
  return (...args) => {
    initialiseTransactionEvent(payloadFunc(...args));
  };
}

/**
 * 为每个事务事件payload创建对应的调用函数
 */
function makeTransactionEvents() {
  return objectMap(eventPayloads, (payloadFunc) => makeTransactionEvent(payloadFunc));
}

function initialiseTransactionEvent(body) {
  logger.info(`Recording transaction event.`);
  fetch(myUri, {
    method: 'POST',
    // ... 其他HTTP配置
    body: JSON.stringify(body),
  })
}

const transactionEvents = makeTransactionEvents();

export default {
  ...transactionEvents,
}

myRoute.svelte #

import { transactionEvents } from 'service.js';

// 如何通过transactionEvents的key调用userPressedButton()？

1. 修正导入方式 #

首先注意service.js中导出的是默认导出，不是命名导出，所以Svelte组件中的导入语句需要修改：

// 去掉花括号，因为是默认导出
import transactionEvents from 'service.js';

2. 直接调用目标函数 #

修正导入后，直接通过对象属性访问并调用userPressedButton函数即可：

import transactionEvents from 'service.js';

// 在需要记录事件的地方调用，比如按钮点击事件中
function handleButtonClick() {
  transactionEvents.userPressedButton();
}

3. 传递额外参数（可选） #

如果需要为事件添加额外的自定义数据（比如按钮ID、用户操作详情），可以先修改eventPayloads中的函数接收参数：

// service.js中修改userPressedButton
userPressedButton(buttonId) {
  return {
    eventType: TRANSACTION_EVENT_TYPES.UserAction,
    eventSubType: TRANSACTION_EVENT_SUBTYPES.PressedButton,
    buttonId: buttonId // 添加自定义字段
  }
}

然后在组件中调用时传入参数：

function handleButtonClick() {
  transactionEvents.userPressedButton('submit-btn');
}

内容的提问来源于stack exchange，提问作者Chris Halcrow