应将JavaScript代码移至外部文件、使用事件委托替代内联事件绑定、通过data属性传递配置参数、采用模块化加载器隔离执行上下文、借助模板字符串与DOM操作动态注入内容。
如果您在开发网页时发现HTML文件中混杂了大量JavaScript代码，导致结构混乱、维护困难，则可能是由于未遵循关注点分离原则。以下是实现HTML与JavaScript代码分离的具体方法：
一、将JavaScript代码移至外部文件
通过将所有脚本逻辑提取到独立的.js文件中，并在HTML中仅保留引用，可彻底解除内联脚本对HTML结构的侵入。该方式支持缓存复用、提升可读性并便于团队协作。
1、新建一个文本文件，命名为script.js，将原HTML中<script>标签内的全部JavaScript代码复制粘贴至该文件。</script>
2、在HTML文件的
或底部（推荐前）插入<script src="script.js"></script>标签。立即学习“Java免费学习笔记（深入）”；
3、删除HTML中所有内联的<script>块及onxxx事件属性（如onclick、onload等）。</script>
二、使用事件委托替代内联事件绑定
当需要为动态生成的元素绑定行为时，直接写onclick等属性会破坏分离原则；采用事件委托机制，可在外部JS中统一监听父容器事件，避免HTML中出现任何JavaScript痕迹。
1、确保HTML中按钮、链接等交互元素仅保留语义化属性，例如，不包含onclick。
2、在外部JS文件中获取该元素：const btn = document.getElementById('submit-btn');
3、使用addEventListener绑定事件：btn.addEventListener('click', function() { /* 处理逻辑 */ });
三、通过data属性传递配置参数
HTML需向JavaScript传递少量上下文信息（如API路径、初始状态）时，应避免在HTML中嵌入JS变量或内联函数调用，而改用自定义data-*属性存储数据，由外部JS读取解析。
1、在HTML元素上添加data属性，例如
。2、在外部JS中获取：const userList = document.getElementById('user-list'); const apiUrl = userList.dataset.apiUrl; const limit = userList.dataset.limit;
3、将获取到的值用于后续AJAX请求或初始化逻辑，确保HTML中不出现任何JavaScript表达式或函数调用。
四、使用模块化加载器隔离执行上下文
现代浏览器支持ES模块语法，可通过type="module"声明脚本为模块，天然阻止全局污染，并允许import/export显式依赖声明，使HTML仅承担加载入口职责。
1、将主逻辑拆分为多个.js模块，例如main.js、utils.js、api.js。
2、在HTML中引入主模块：<script type="module" src="./main.js"></script>。
3、在main.js中使用import从其他模块加载功能：import { fetchData } from './api.js';，HTML中不再出现任何变量声明、函数定义或执行语句。
五、借助模板字符串与DOM操作动态注入内容
当页面需根据数据动态生成结构时，应避免在HTML中拼接JS字符串或使用document.write，而是将静态结构保留在HTML中，由外部JS控制显示/隐藏或填充内容。
1、在HTML中预留空容器，例如
，不包含任何内联JS生成的内容。2、在外部JS中构造安全的DOM节点或使用textContent/innerText设置文本，避免innerHTML直插未过滤字符串。
3、使用appendChild、replaceChildren等方法将生成的内容插入目标容器，所有HTML结构定义严格保留在HTML文件内，JS仅负责控制行为与数据流。
