使用swup.js/barba.js实现页面切换后表单等组件失效如何解决

这类问题是swup、barba这类PJAX库的运行原理和常规前端代码的加载逻辑不匹配导致的，核心原因有3个：

• 事件绑定没有同步清理/重新绑定：常规业务代码通常在DOMContentLoaded/页面加载完成时给表单、交互元素绑定事件，swup/barba切换页面时只会移除容器内的DOM元素，不会自动清理这些绑定的事件监听。等你切回原页面时，要么旧的事件残留导致冲突，要么新插入的DOM没有绑定对应的事件，最终表现为表单、交互模块失效。
• 全局上下文残留冲突：第一次页面加载时初始化的组件实例、全局变量、定时器都会存在于window全局作用域，切换页面时不会被销毁。切回原页面重复初始化时，就会出现同名变量冲突、实例重复初始化的报错，导致功能无法正常运行。
• 资源加载逻辑错误：把CSS/JS放到容器内的操作不会生效，浏览器对已加载过的静态资源会走缓存，重复插入相同的资源标签不会重新执行代码，反而会加重重复绑定、上下文冲突的问题。另外Django表单依赖的CSRF Token如果被全局缓存，切页后Token更新就会导致表单提交被拦截，看起来就是表单失效。

• 按PJAX库的生命周期管理业务逻辑：不要把JS初始化逻辑写在页面加载事件中，改为绑定到swup/barba提供的页面加载完成钩子（比如swup的contentReplaced事件、barba的enter钩子），每次DOM替换完成后再执行当前页的初始化逻辑；同时绑定页面离开钩子，离开页面前手动移除绑定的事件、销毁组件实例、清理全局变量和定时器。
• 优化静态资源加载逻辑：全局通用的CSS、JS统一放到页面头部或body底部，不要放在swup/barba的替换容器内；页面独有的JS/CSS使用swup/barba官方提供的脚本处理插件，自动处理单页脚本的加载、执行和清理，避免重复加载。
• 修复Django表单适配逻辑：不要全局缓存CSRF Token，每次表单提交、AJAX请求发起时，实时读取当前页面的input[name="csrfmiddlewaretoken"]元素值或者Cookie中的csrftoken值，避免旧Token导致的提交失败。

排查时可以先打开浏览器控制台，切换页面后查看有无JS报错，大部分失效问题都可以通过报错定位到具体未处理的初始化/清理逻辑。

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