使用Swup时如何加载各页面body内JS、卸载旧请求且不刷新全局JS

第一步：启用Swup脚本执行插件 #

默认Swup不会自动执行新页面body内的script标签，你需要引入官方的Scripts插件处理该需求，在全局初始化Swup的代码中修改配置即可：

import Swup from 'swup';
import SwupScriptsPlugin from '@swup/scripts-plugin'; 

const swup = new Swup({
  plugins: [new SwupScriptsPlugin()]
});
// 如果用CDN引入的话直接调用SwupScriptsPlugin全局变量即可

这个插件默认就会执行新页面body内的所有script标签，而且不会重复加载已经存在的全局JS文件，完全符合你不重载全局JS的要求。

第二步：给单页专属逻辑添加清理入口 #

修改每个页面内的script代码，把当前页面的定时器、AJAX请求实例、事件监听器等资源统一挂载到窗口专属变量上，方便切换页面时统一清理：

<script defer>
    $(document).ready(function () {
        // 初始化当前页面的资源清理对象
        window.pageCleanup = window.pageCleanup || {};

        // 保存定时任务ID
        window.pageCleanup.intervalId = setInterval(() => {
            // 保存AJAX请求实例，方便终止
            window.pageCleanup.currentAjax = $.ajax({
                // 你的AJAX请求配置
            });
        }, 3000); // 你的请求间隔时长

        // 其他页面专属的事件监听也挂载到该对象上
        window.pageCleanup.customHandler = function() {
            // 自定义业务逻辑
        }
        document.addEventListener('customEvent', window.pageCleanup.customHandler);
    });
</script>

第三步：全局监听页面切换事件，自动清理前页资源 #

在你的全局JS文件中添加Swup的页面切换钩子，每次加载新页面前先清理上一页的所有专属资源：

// 和Swup初始化代码放在同一个全局JS文件中
swup.hooks.on('page:view', () => {
    if (!window.pageCleanup) return
    // 终止未完成的AJAX请求
    if (window.pageCleanup.currentAjax) {
        window.pageCleanup.currentAjax.abort()
    }
    // 清除定时任务
    if (window.pageCleanup.intervalId) {
        clearInterval(window.pageCleanup.intervalId)
    }
    // 移除绑定的事件监听器
    if (window.pageCleanup.customHandler) {
        document.removeEventListener('customEvent', window.pageCleanup.customHandler)
    }
    // 清空对象释放内存
    window.pageCleanup = null
});

以上配置完成后即可完全满足需求：切换页面时自动执行新页面body内的JS逻辑、离开页面时自动卸载前一页的AJAX请求和专属JS逻辑、全局JS全程仅加载一次不会重复执行。

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