如何不使用eval()为事件动态添加变量中存储的代码？

核心问题分析 #

当前矛盾点在于：ES模块加载时配置文件先被导入，主文件中定义的核心函数尚未初始化，配置里的箭头函数就尝试引用这些函数，触发ReferenceError。同时我们需要避免eval的安全风险，还要保持核心代码与配置文件分离。

方案一：函数对象导出+循环引用 #

将主文件的核心函数封装成对象导出，配置文件通过导入该对象引用函数，利用ES模块的循环引用特性（引用传递而非值拷贝）解决加载顺序问题。

主文件（main.js）

// 先导出核心函数集合
export const actions = {
  someAction: () => {
    // someAction核心逻辑
    console.log('执行someAction');
  },
  someOtherCode: () => {
    console.log('执行someOtherCode');
  },
  someOtherCode2: () => {
    console.log('执行someOtherCode2');
  },
  doSomethingElse: (param) => {
    console.log('执行doSomethingElse，参数：', param);
  }
};

// 导入配置文件
import configuration from './config.js';

// 批量绑定事件
configuration.btnAssign.forEach(item => {
  $(item.el).on(item.onEvent, item.action);
});

配置文件（config.js）

// 导入主文件的函数集合
import { actions } from './main.js';

export default {
  btnAssign: [
    { el: '#elem1', onEvent: 'click', action: () => actions.someAction() },
    { el: '#elem2', onEvent: 'change', action: () => {
        actions.someOtherCode();
        actions.someOtherCode2();
      }
    },
    { el: '#elem3', onEvent: 'click', action: () => actions.doSomethingElse('自定义参数') }
  ]
};

方案二：配置文件存元数据+主文件映射执行 #

让配置文件只存储函数名、参数等元数据，主文件通过函数映射表找到对应函数并执行。此方案下配置文件完全是纯数据，无需依赖主文件的函数定义，彻底解决加载顺序问题，且更易维护。

配置文件（config.js）

export default {
  btnAssign: [
    // 单函数无参数
    { el: '#elem1', onEvent: 'click', action: { name: 'someAction', params: [] } },
    // 多函数依次执行
    { el: '#elem2', onEvent: 'change', action: {
        sequence: [
          { name: 'someOtherCode', params: [] },
          { name: 'someOtherCode2', params: [] }
        ]
      }
    },
    // 单函数带参数
    { el: '#elem3', onEvent: 'click', action: { name: 'doSomethingElse', params: ['测试参数'] } }
  ]
};

主文件（main.js）

import configuration from './config.js';

// 定义所有核心函数
function someAction() {
  console.log('执行someAction');
}

function someOtherCode() {
  console.log('执行someOtherCode');
}

function someOtherCode2() {
  console.log('执行someOtherCode2');
}

function doSomethingElse(param) {
  console.log('执行doSomethingElse，参数：', param);
}

// 构建函数映射表，方便快速查找
const actionMap = {
  someAction,
  someOtherCode,
  someOtherCode2,
  doSomethingElse
};

// 批量绑定事件逻辑
configuration.btnAssign.forEach(item => {
  $(item.el).on(item.onEvent, () => {
    if (item.action.sequence) {
      // 处理多函数序列执行
      item.action.sequence.forEach(act => {
        actionMap[act.name](...act.params);
      });
    } else {
      // 处理单函数执行
      actionMap[item.action.name](...item.action.params);
    }
  });
});

方案对比 #

• 方案一：保留配置文件中箭头函数的写法，逻辑直观，但存在模块循环引用，适合简单场景。
• 方案二：配置与代码完全分离，扩展性更强（支持多函数序列、参数传递），无循环依赖问题，是更推荐的生产级方案。

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