如何在JavaScript中用字符串加变量命名函数？表格滑块场景

首先明确：可以通过字符串加变量的方式动态命名函数，比如直接在全局作用域创建window['slider' + id] = function() {}，但这种方式会污染全局命名空间，容易引发命名冲突，维护起来也麻烦，更推荐以下两种更优雅的方案：

方案1：用对象映射管理专属滑块函数 #

创建一个对象，将单元格id作为键，对应的滑块操作函数作为值，既能实现每个单元格的滑块逻辑唯一，又能避免全局污染。

示例代码修改：

// 存储各单元格的专属滑块函数
const sliderHandlers = {
  cell1: {
    open: (cell) => {
      // cell1专属的打开滑块逻辑
      console.log('打开cell1的滑块', cell);
      // 这里写具体的滑块创建/显示逻辑
    },
    close: (cell) => {
      // cell1专属的关闭滑块逻辑
      console.log('关闭cell1的滑块', cell);
      // 这里写具体的滑块销毁/隐藏逻辑
    }
  },
  cell2: {
    open: (cell) => {
      // cell2专属的打开滑块逻辑
      console.log('打开cell2的滑块', cell);
    },
    close: (cell) => {
      // cell2专属的关闭滑块逻辑
      console.log('关闭cell2的滑块', cell);
    }
  }
  // 其他cell的滑块逻辑依次添加
};

function handleCellClick(clickedCell) {
  const row = clickedCell.parentElement;
  const cells = row.children;
  const display = cells[cells.length - 1].style.display ? '' : 'none';
  const cellId = clickedCell.id; // 获取当前点击单元格的id

  for (let i = 0; i < cells.length; i++) {
    cells[i].style.display = display;
  }
  
  if (display) { 
    const newCell = clickedCell.cloneNode(true);
    newCell.style.display = '';
    newCell.colSpan = cells.length;
    row.insertBefore(newCell, row.firstChild);
    // 调用对应id的打开滑块函数
    sliderHandlers[cellId]?.open(newCell);
  } else {
    clickedCell.remove();
    // 调用对应id的关闭滑块函数
    sliderHandlers[cellId]?.close(clickedCell);
  }
}

方案2：通过参数区分通用滑块逻辑 #

如果每个滑块的逻辑差异不大，只是依赖单元格标识，可以在通用的openSlider和closeSlider函数中传入单元格id，内部根据id做差异化处理。

示例代码修改：

function openSlider(cell) {
  const cellId = cell.id;
  // 根据不同id执行专属逻辑
  switch(cellId) {
    case 'cell1':
      createSlider(cell, '#ff0000'); // 比如cell1用红色滑块
      break;
    case 'cell2':
      createSlider(cell, '#00ff00'); // cell2用绿色滑块
      break;
    case 'cell3':
      createSlider(cell, '#0000ff'); // cell3用蓝色滑块
      break;
  }
}

function closeSlider(cell) {
  const slider = cell.nextElementSibling;
  if (slider?.classList.contains('cell-slider')) {
    slider.remove();
  }
}

// 通用滑块创建函数，根据参数区分样式/内容
function createSlider(cell, color) {
  const slider = document.createElement('div');
  slider.className = 'cell-slider';
  slider.style.backgroundColor = color;
  slider.textContent = `${cell.id} 的专属滑块`;
  cell.parentElement.insertBefore(slider, cell.nextSibling);
}

关于动态命名函数的补充（不推荐但可行） #

如果一定要用字符串加变量命名函数，可以通过全局对象（比如window）动态创建：

const id = clickedCell.id;
// 动态创建打开滑块函数
window['openSlider' + id] = function(cell) {
  // 该单元格专属的打开逻辑
  console.log(`打开${id}的滑块`);
};
// 调用时
window['openSlider' + id](newCell);

但这种方式会让全局作用域变得混乱，调试和维护难度高，不建议在实际项目中使用。

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