当前位置：首页 > 前端开发 > 正文

如何在HTML中写JS？

在HTML中嵌入JavaScript有两种主要方式：内联脚本使用` 标签直接编写代码，外部脚本通过`引入，内联脚本可置于head或body中，但通常放在body末尾避免阻塞页面渲染。

在HTML中编写JavaScript（JS）是构建动态网页的核心技术，以下是详细方法及最佳实践,遵循现代Web标准并兼顾性能与可维护性：

直接嵌入JS的三种方式

内联脚本（不推荐）
直接在HTML标签的事件属性中添加JS：
```
<button onclick="alert('点击成功！')">点我</button>
```
适用场景：简单交互测试；缺点：难以维护,违反结构与行为分离原则。
内部脚本
在<script>标签内写JS代码：
```
<body>
  <script>
    document.querySelector('button').addEventListener('click', () => {
      console.log("按钮被点击");
    });
  </script>
</body>
```
注意：
- 通常放在</body>前避免阻塞页面渲染。
- 小型项目适用,但中大型项目会降低可维护性。
外部脚本（强烈推荐）
通过src引入独立.js文件：
```
<head>
  <script src="scripts/main.js" defer></script>
</head>
```
优势：
- 代码复用性强
- 浏览器可缓存文件提升加载速度
- 符合模块化开发规范

示例：

<script src="jquery.js" async></script> <!-- 独立库 -->
<script src="app.js" defer></script>    <!-- 主业务逻辑 -->

使用type="module"支持模块化：

如何在HTML中写JS？第2张

<script type="module">
  import { init } from './module.js';
  init(); // 调用导入的函数
</script>

优势：

位置优化
- 非模块化脚本置于</body>前
- 使用defer/async避免渲染阻塞
  安全策略（CSP）**
  在HTTP头添加CSP防止XSS攻击：
```
Content-Security-Policy: script-src 'self' https://trusted.cdn.com
```
兼容性处理
为旧浏览器提供降级方案：
```
<script nomodule src="legacy-bundle.js"></script>
```
代码验证
使用JSHint或ESLint检查语法错误。

问题	解决方案
脚本未生效	检查控制台报错、路径是否正确
变量被墙	改用模块化或IIFE封装作用域
DOM操作失败	确保脚本在DOM加载后执行（用`DOMContentLoaded`事件）
跨域请求被阻	配置CORS或使用代理