动态添加与移除JavaScript文件失效问题及解决方案咨询

为什么移除script元素后JS还在运行？ #

JavaScript脚本一旦被浏览器加载并执行，里面定义的函数、变量、事件监听等都会存入内存——哪怕删掉DOM里的script标签，这些已经执行过的逻辑也不会自动消失。所以单纯移除script元素根本没法“卸载”已经运行的JS代码。

实现脚本切换的有效方法 #

要实现你要的脚本切换逻辑，核心是给每个脚本的逻辑做可销毁的封装，同时管理脚本的加载状态和当前活跃的模块。下面是具体实现步骤：

1. 封装每个工作脚本

把work1.js和work2.js都写成带init（初始化）和destroy（销毁）方法的模块，确保所有可残留的逻辑都能被清理：

work1.js

window.Work1Module = {
  init: function() {
    // 这里写work1的所有初始化逻辑：绑定事件、创建DOM元素、启动定时器等
    console.log("work1 已启动");
  },
  destroy: function() {
    // 这里写work1的所有清理逻辑：移除事件监听、删除创建的DOM、清除定时器等
    console.log("work1 已销毁");
    // 删除全局引用，避免内存泄漏
    delete window.Work1Module;
  }
};

work2.js

window.Work2Module = {
  init: function() {
    console.log("work2 已启动");
  },
  destroy: function() {
    console.log("work2 已销毁");
    delete window.Work2Module;
  }
};

2. 编写脚本切换管理逻辑

用工具函数处理脚本加载、模块销毁与切换，避免重复加载和残留逻辑：

// 跟踪当前活跃的模块和已加载的脚本路径
let currentActiveModule = null;
const loadedScriptPaths = new Set();

// 加载指定脚本的异步函数
function loadScript(src) {
  return new Promise((resolve, reject) => {
    // 如果脚本已经加载过，直接返回成功
    if (loadedScriptPaths.has(src)) {
      resolve();
      return;
    }
    const scriptElem = document.createElement('script');
    scriptElem.src = src;
    scriptElem.onload = () => {
      loadedScriptPaths.add(src);
      resolve();
    };
    scriptElem.onerror = () => reject(new Error(`加载脚本 ${src} 失败`));
    document.body.appendChild(scriptElem);
  });
}

// 切换模块的核心函数
async function switchToModule(scriptSrc, moduleName) {
  // 先销毁当前活跃的模块
  if (currentActiveModule) {
    currentActiveModule.destroy();
    currentActiveModule = null;
  }

  // 加载目标脚本（如果未加载过）
  await loadScript(scriptSrc);

  // 初始化新模块并标记为活跃
  currentActiveModule = window[moduleName];
  currentActiveModule.init();
}

// 绑定按钮点击事件
document.getElementById('switchButton').addEventListener('click', async () => {
  // 替换成你的实际判断条件
  const condition1 = /* 比如：document.getElementById('someInput').value === 'xxx' */ true;

  if (condition1) {
    // 切换到work2
    await switchToModule('work2.js', 'Work2Module');
  } else {
    // 如果当前是work2，切换回work1
    if (currentActiveModule === window.Work2Module) {
      await switchToModule('work1.js', 'Work1Module');
    }
  }
});

关键注意事项 #

• 每个模块的destroy方法必须彻底清理所有残留：比如移除事件监听、清除定时器/计时器、删除自己创建的DOM元素、中止未完成的网络请求等，否则会出现内存泄漏或逻辑残留的问题。
• 如果你的脚本不需要重复加载，loadedScriptPaths集合可以避免重复创建script元素，节省资源。
• 用async/await处理脚本加载的异步过程，确保模块初始化在脚本加载完成后执行。

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