【JS的三种引入方式】JavaScript（简称 JS）作为前端开发中不可或缺的一部分，其引入方式直接影响代码的执行效率和开发体验。在实际项目中，常见的 JS 引入方式主要有三种：内联脚本、外链脚本以及动态加载脚本。以下是对这三种方式的总结与对比。
一、内联脚本
内联脚本是将 JavaScript 代码直接写在 HTML 文件中的 `<script>` 标签内。这种方式适用于小型项目或简单的页面交互，能够快速实现功能，但不利于代码复用和维护。
优点：
- 简单直观，适合小规模应用。
- 不需要额外的文件请求，加载速度快。
缺点：
- 代码重复率高，难以维护。
- 不利于团队协作和模块化开发。
二、外链脚本
外链脚本是将 JavaScript 代码保存为独立的 `.js` 文件，并通过 `<script src="路径"></script>` 的方式引入到 HTML 页面中。这是目前最常用的引入方式，适合大型项目和模块化开发。
优点：
- 代码集中管理，便于维护和复用。
- 支持缓存机制，提升页面加载速度。
缺点：
- 需要额外的文件请求，可能影响性能。
- 如果依赖多个外部脚本，容易出现加载顺序问题。
三、动态加载脚本
动态加载脚本是通过 JavaScript 动态创建 `<script>` 标签并设置其 `src` 属性来加载外部脚本。这种方式常用于按需加载资源，优化页面性能。
优点：
- 可按需加载，减少初始加载时间。
- 支持异步加载，避免阻塞页面渲染。
缺点：
- 实现较为复杂，需要处理加载状态和错误处理。
- 对浏览器兼容性有一定要求。
二、三种引入方式对比表
| 引入方式 | 是否支持模块化 | 加载方式 | 适用场景 | 维护难度 | 性能表现 |
| 内联脚本 | 否 | 同步 | 小型页面 | 低 | 高 |
| 外链脚本 | 是 | 同步 | 中大型项目 | 中 | 中 |
| 动态加载脚本 | 是 | 异步 | 按需加载、大型应用 | 高 | 高 |
三、总结
在实际开发中，选择合适的 JS 引入方式至关重要。对于简单页面，内联脚本可以快速实现功能；对于结构复杂的项目，推荐使用外链脚本以提高可维护性；而对于性能敏感的应用，动态加载脚本则是更优的选择。根据项目需求合理选择引入方式，有助于提升开发效率与用户体验。
