js代码怎么放到html里运行

将JavaScript代码嵌入到HTML中运行的方式有三种：内联脚本、内部脚本、外部脚本。其中，外部脚本是推荐的最佳实践，因为它能使代码更易于维护和复用。下面我们详细介绍这三种方式，并重点讨论外部脚本的优点。

一、内联脚本

直接在HTML标签内嵌入JavaScript代码

内联脚本是指将JavaScript代码直接嵌入到HTML元素的事件属性中。常见的事件属性包括 onclick、onmouseover 等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Inline Script Example</title>
</head>
<body>
    <button onclick="alert('Hello, World!')">Click Me!</button>
</body>
</html>

优点：

简单易用，适合小型的快速测试。

缺点：

不易维护，不推荐在生产环境中使用。

二、内部脚本

在HTML文件内部的 `<script>` 标签中嵌入JavaScript代码

内部脚本是指在HTML文件的 <script> 标签中直接书写JavaScript代码。这种方式适合页面中包含少量的JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Internal Script Example</title>
    <script>
        function showMessage() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">Click Me!</button>
</body>
</html>

优点：

代码集中易于查找，适合小型项目。

缺点：

随着代码量增加，HTML文件会变得冗长，难以维护。

三、外部脚本

将JavaScript代码放在独立的 `.js` 文件中，并通过 `<script src="">` 标签引入

外部脚本是将JavaScript代码放在独立的 .js 文件中，然后通过 <script src=""> 标签在HTML文件中引入。这是推荐的最佳实践，尤其适合大型项目。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Script Example</title>
    <script src="scripts/main.js"></script>
</head>
<body>
    <button onclick="showMessage()">Click Me!</button>
</body>
</html>

main.js 文件内容：

function showMessage() {
    alert('Hello, World!');
}

优点：

代码模块化、易于维护。外部脚本将HTML和JavaScript分离，使代码更清晰，便于团队协作。
代码复用性高。可以在多个HTML文件中复用同一个JavaScript文件，提高开发效率。
提高页面加载速度。外部脚本文件可以被浏览器缓存，从而减少重复下载。

缺点：

初学者可能需要花费一些时间理解文件间的引用关系。

四、如何在项目中更好地管理JavaScript代码

使用模块化工具

现代JavaScript项目通常会使用模块化工具如Webpack、Parcel或Rollup来管理代码。这些工具可以将多个JavaScript文件打包成一个或多个文件，方便在HTML中引入。

版本控制

使用Git等版本控制工具可以帮助团队管理代码的不同版本，跟踪代码的变化，提高协作效率。

项目管理系统

在大型项目中，使用项目管理系统来分配任务、跟踪进度是非常重要的。推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，这两款工具都能有效提升团队协作效率。

代码规范和Lint工具

为了保持代码的一致性和可读性，团队可以制定统一的代码规范，并使用ESLint等Lint工具进行代码检查。

五、最佳实践

1、将脚本放在页面底部

为了提高页面加载速度，可以将 <script> 标签放在页面的底部，即在 </body> 标签之前。这可以确保HTML内容先加载，然后再加载和执行JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best Practice Example</title>
</head>
<body>
    <button onclick="showMessage()">Click Me!</button>
    <script src="scripts/main.js"></script>
</body>
</html>

2、使用`defer`和`async`属性

在引入外部脚本时，可以使用 defer 和 async 属性来控制脚本的加载和执行时机。

defer：脚本会在HTML解析完成后执行，且多个 defer 脚本按顺序执行。
async：脚本会在下载完成后立即执行，且多个 async 脚本的执行顺序无法保证。

<script src="scripts/main.js" defer></script>

3、避免全局变量

为了避免命名冲突和全局变量污染，建议使用IIFE（Immediately Invoked Function Expression）或模块化工具来封装代码。

(function() {
    function showMessage() {
        alert('Hello, World!');
    }
    window.showMessage = showMessage;
})();

六、总结

1、内联脚本、内部脚本、外部脚本的优缺点

通过本文的介绍，我们了解到内联脚本、内部脚本、外部脚本的优缺点。推荐使用外部脚本来管理JavaScript代码，因为它能够提高代码的模块化、复用性和维护性。

2、项目管理系统的重要性

在团队协作中，使用项目管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile可以有效提升效率。

3、最佳实践

遵循最佳实践如将脚本放在页面底部、使用 defer 和 async 属性、避免全局变量，可以提升页面加载速度和代码的可维护性。

通过这些方法和工具，你可以更好地将JavaScript代码嵌入到HTML中，并在项目中高效地管理和运行JavaScript代码。