js实现只刷新js代码
实现仅刷新 JavaScript 代码的方法
在开发过程中，有时需要仅刷新 JavaScript 代码而不重新加载整个页面。以下是几种常见的方法：
使用动态脚本加载
通过动态创建和替换 <script> 标签来加载新的 JavaScript 文件。这种方法不会刷新整个页面，但会执行新的 JavaScript 代码。
function reloadScript(src) {
const oldScript = document.querySelector(`script[src="${src}"]`);
if (oldScript) {
const newScript = document.createElement('script');
newScript.src = src + '?t=' + Date.now(); // 添加时间戳避免缓存
oldScript.parentNode.replaceChild(newScript, oldScript);
}
}利用模块热替换(HMR)
现代前端构建工具如 Webpack、Vite 等支持模块热替换功能，可以在不刷新页面的情况下替换修改的模块。
if (module.hot) {
module.hot.accept('./module.js', function() {
// 模块更新后的回调
});
}通过 AJAX 加载并执行代码
使用 AJAX 获取最新的 JavaScript 代码，然后通过 eval 或 Function 执行。
function reloadCode(url) {
fetch(url)
.then(response => response.text())
.then(code => {
new Function(code)();
});
}利用 Service Worker
Service Worker 可以拦截网络请求，实现资源的动态更新和控制。
navigator.serviceWorker.register('sw.js').then(registration => {
registration.update(); // 强制更新 Service Worker
});注意事项
- 动态加载的代码可能会与现有代码产生冲突
- 使用
eval存在安全风险，应确保代码来源可信 - 模块热替换需要相应的构建工具配置
- 某些情况下可能需要手动清理旧代码的副作用
这些方法可以根据具体场景选择使用，动态脚本加载是最通用的方案，而模块热替换则提供了更完善的开发体验。
