如何在Barba.js页面切换时重新初始化自定义JS文件？

这是Barba.js使用中非常常见的问题——因为Barba通过AJAX异步加载新页面内容，只会替换barba-container内的DOM，而初始页面加载时执行的自定义脚本不会自动重新运行，导致新页面的交互逻辑失效。下面是具体的解决步骤：

1. 把所有初始化逻辑封装成独立函数 #

首先，你需要将每个JS文件中的初始化代码提取成可重复调用的函数，这样方便在页面切换时重新触发。比如：

修改introParams.js： #

// 封装初始化函数
function initIntro() {
  // 这里放原来introParams.js中的所有初始化逻辑
  // 例如动画初始化、事件绑定等
  anime({
    targets: '.intro-element',
    opacity: 1,
    duration: 1000
  });
}

// 初始页面加载时执行一次
$(document).ready(() => {
  initIntro();
});

同理修改其他脚本文件： #

• parallaxParams.js → 封装成initParallax()函数
• content.js → 封装成initContent()函数
• videoModal.js → 封装成initVideoModal()函数

每个文件都保留初始页面加载时的调用，同时暴露初始化函数供Barba钩子调用。

2. 在Barba的页面切换钩子中重新调用初始化函数 #

接下来，修改你的pageTransitions.js，在Barba的enter钩子（或afterEnter钩子）中调用所有初始化函数。同时，建议在leave钩子中清理旧的事件监听或实例，避免内存泄漏：

barba.init({
  transitions: [{
    name: 'diffuse-transition',
    leave(data) {
      // 离开旧页面时清理资源，比如：
      // 1. 销毁parallax实例（如果有）
      if (window.parallaxInstance) {
        window.parallaxInstance.destroy();
      }
      // 2. 解绑旧的事件监听，防止重复触发
      $(document).off('click', '.video-modal-trigger');
      
      return gsap.to(data.current.container, { opacity: 0 });
    },
    beforeEnter: ({ next }) => {
      window.scrollTo(0, 0);
    },
    enter(data) {
      // 新页面DOM插入完成后，重新初始化所有脚本
      initIntro();
      initParallax();
      initContent();
      initVideoModal();
      
      return gsap.from(data.next.container, { opacity: 0 });
    }
  }]
});

为什么这样有效？ #

Barba的enter钩子会在新页面内容已经插入到DOM中后触发，此时调用初始化函数，就能针对新的DOM元素绑定事件、初始化动画或插件。而leave钩子中的清理步骤，能避免旧页面的事件监听或插件实例干扰新页面，同时防止内存泄漏。

额外注意事项 #

• 如果你的脚本中有依赖全局变量的逻辑，确保在初始化前重置这些变量，避免旧数据残留。
• 对于一些第三方插件（比如parallax），一定要查看其文档是否有destroy或reset方法，确保在离开页面时正确清理。

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