如何优雅地针对不同HTML元素类重复调用同一JavaScript函数

你说得对，这种重复写函数调用的方式确实不够优雅，维护起来也麻烦——以后新增或修改 gallery 还要逐个找这些调用语句。这里有几个更整洁的方案，既能解决重复代码问题，还能让后续维护更轻松：

方案1：用数组存储选择器，循环遍历调用 #

把所有需要初始化的选择器集中存到一个数组里，然后通过遍历数组来批量调用函数。这种方式最直观，也方便后续扩展：

// 集中管理所有需要处理的gallery选择器
const gallerySelectors = [
  '.images-container01nnb figure',
  '.images-container02nnc figure',
  '.images-container03rv figure'
];

// 遍历数组，逐个调用初始化函数
gallerySelectors.forEach(selector => {
  initPhotoSwipeFromDOM(selector);
});

以后要加新的 gallery，只需要在数组里新增一行选择器就行，不用重复写函数调用的代码，可读性和维护性都提升了不少。

方案2：利用共同特征统一处理（如果你的容器有规律） #

如果这些 gallery 容器有共同的标识——比如都带有一个通用的类名（比如photo-gallery-wrapper），或者类名有统一的命名规则，还可以用更灵活的方式批量处理：

比如给每个 gallery 容器都加一个通用类photo-gallery-wrapper，然后这样处理：

// 获取所有带有通用类的容器
const galleryWrappers = document.querySelectorAll('.photo-gallery-wrapper');

// 遍历每个容器，针对容器内的figure元素初始化
galleryWrappers.forEach(wrapper => {
  // 生成当前容器内figure的选择器
  const figureSelector = `${wrapper.tagName.toLowerCase()}.${wrapper.classList.value} figure`;
  initPhotoSwipeFromDOM(figureSelector);
  
  // 或者如果原函数支持直接传入DOM元素集合，效率会更高：
  // const figures = wrapper.querySelectorAll('figure');
  // initPhotoSwipeFromDOM(figures);
});

这种方式的好处是不用手动维护选择器数组，新增 gallery 只要给容器加上通用类就行，适合动态生成的内容场景。

关于性能的疑问 #

其实你完全不用担心性能问题——不管是手动重复调用还是循环调用，本质上都是执行相同次数的函数调用，性能差异可以忽略不计。只要你的页面里 gallery 和图片的数量不是特别夸张（比如上千级别的规模），这种批量处理的方式不会有任何性能负担。

备注：内容来源于stack exchange，提问作者movethathoof