js实现只刷新js代码
动态加载 JavaScript 文件
在浏览器环境中，可以通过动态创建 <script> 标签的方式重新加载 JavaScript 文件。该方法不会刷新整个页面，仅替换目标脚本：
function reloadScript(src) {
const oldScript = document.querySelector(`script[src="${src}"]`);
if (oldScript) oldScript.remove();
const newScript = document.createElement('script');
newScript.src = src + '?t=' + Date.now(); // 添加时间戳避免缓存
document.body.appendChild(newScript);
}使用模块热替换（HMR）
如果使用现代前端构建工具（如Webpack/Vite），可通过模块热替换机制实现局部刷新：
if (module.hot) {
module.hot.accept('./your-module.js', () => {
console.log('模块已热更新');
// 执行更新后的逻辑
});
}通过 iframe 隔离执行
创建隐藏的 iframe 来加载新版本脚本，通过 postMessage 与主页面通信：
const iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
iframe.contentWindow.location.reload();
iframe.contentWindow.eval(updatedCode);利用 Service Worker 控制缓存
通过 Service Worker 拦截请求并返回更新后的脚本：
self.addEventListener('fetch', (event) => {
if (event.request.url.includes('your-script.js')) {
event.respondWith(
fetch('your-script.js?v=' + version)
);
}
});动态函数替换
对于特定函数的热更新，可通过重新定义函数实现：
window.myFunction = new Function('...新代码...');注意事项
- 时间戳或版本号是避免浏览器缓存的关键
- 动态加载可能引发变量污染问题
- 复杂状态应用需要考虑状态保持机制
- 生产环境建议使用专业的热更新方案（如Webpack HMR）
