将 HTML 与 JavaScript 分离可提升性能、维护性和灵活性。具体步骤包括：创建外部 .js 文件。在 HTML 中使用 链接外部文件。在 HTML 中通过事件处理程序、ID 选择器或类选择器调用 JavaScript 函数。使用 addEventListener() 处理 HTML 元素上的 DOM 事件。利用模块化 JavaScript 组织代码，增强可维护性和灵活性。
如何将 HTML 与 JavaScript 分离
HTML 和 JavaScript 是构建现代网站的关键技术，但将它们分离可以带来以下优势：
- 提高性能：外部 JavaScript 文件不会阻止 HTML 渲染，从而提高页面加载速度。
- 可维护性：将 JavaScript 逻辑与 HTML 结构分离，使得代码更容易维护和调试。
- 灵活性：您可以轻松更新或替换 JavaScript 文件，而无需修改 HTML。
以下是如何将 HTML 与 JavaScript 分离：
1. 创建外部 JavaScript 文件
立即学习“前端免费学习笔记（深入）”；
使用 .js 文件扩展名创建一个新文件，例如 script.js。将您的 JavaScript 代码放入该文件中。
2. 将 JavaScript 文件链接到 HTML
在 HTML 文档的部分中，使用标签链接到外部 JavaScript 文件：
一个功能强大的B2B与B2C的购物平台，除了原本OSC功能外，增加更新的功能： 一、 取消了register_globals必须开启的限制 二、 將HTML程式碼与PHP程式碼完全分离，採用了smarty 樣板引擎 三、 每支档案includes所需函数与资料库连结，使的网页显示速度明显提升 四、 检视、购买商品群组权限设定 五、 十八岁以下禁购机制 六、 折价券购物抵扣机制 七、 礼券购物机制
3. 在 HTML 中调用 JavaScript
您可以使用以下方法在 HTML 中调用 JavaScript 函数：
- 事件处理程序：例如，onClick、onLoad
-
ID 选择器：
document.getElementById("id").method() -
类选择器：
document.querySelector(".class").method()
4. 处理 DOM 事件
当 HTML 元素发生事件（例如点击或悬停）时，可以使用 JavaScript 来响应。使用 addEventListener() 方法将事件监听器附加到元素。例如：
const button = document.getElementById("button");
button.addEventListener("click", function() {
// 执行操作
});5. 使用模块化 JavaScript
将 JavaScript 代码组织成模块可以进一步提高可维护性和灵活性。可以使用 JavaScript 模块语法或框架（如 React）来实现模块化。
通过将 HTML 与 JavaScript 分离，您可以创建更快速、更易于维护且更灵活的网站。
