怎么把js写在外面

将JavaScript代码写在外部文件的最佳实践包括：提高代码可读性、简化HTML文件、提高代码重用性、改善网站性能。 其中最重要的一点是提高代码重用性，将JavaScript代码写在外部文件中，可以在多个HTML文件中引用同一个JavaScript文件，避免重复编写相同的代码，从而提高开发效率和代码的一致性。

将JavaScript代码写在外部文件的具体步骤如下：

创建一个新的JavaScript文件并保存为.js后缀名。
在HTML文件中通过<script>标签引入外部JavaScript文件。
将所有的JavaScript代码从HTML文件中移除，并将它们放置在新创建的JavaScript文件中。

下面将详细介绍这些步骤，并探讨将JavaScript代码写在外部文件中的更多优势和注意事项。

一、创建JavaScript文件

1.1 创建文件

首先，在你的项目目录下创建一个新的文件，并将其保存为.js文件。例如，我们可以创建一个名为script.js的文件。

// script.js
console.log("Hello, World!");

1.2 保存文件

确保将文件保存到你的项目目录中，以便稍后可以在HTML文件中引用。

二、在HTML文件中引入JavaScript

2.1 使用`<script>`标签

在HTML文件中，我们使用<script>标签来引入外部JavaScript文件。<script>标签的src属性指定了外部JavaScript文件的路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <script src="script.js"></script>
</body>
</html>

2.2 放置位置

通常，我们将<script>标签放置在</body>标签之前，以确保HTML文档的所有元素都已加载，然后再执行JavaScript代码。这有助于避免在JavaScript尝试操作DOM元素之前，DOM元素尚未完全加载的问题。

三、提高代码可读性和维护性

3.1 分离关注点

将JavaScript代码从HTML文件中分离出来，有助于将结构（HTML）、表现（CSS）和行为（JavaScript）分离。这种做法符合现代Web开发的最佳实践，并使得代码更加模块化和易于维护。

3.2 减少HTML文件的复杂度

将JavaScript代码放在外部文件中，可以显著减少HTML文件的复杂度，使HTML文件更简洁、更易读。例如，以下是包含JavaScript代码的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            console.log("Hello, World!");
        });
    </script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

通过将JavaScript代码移到外部文件中，HTML文件变得更加简洁：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

四、提高代码重用性

4.1 多个HTML文件引用同一JavaScript文件

将JavaScript代码放在外部文件中，最大的优势之一是可以在多个HTML文件中引用同一个JavaScript文件。这样可以避免重复编写相同的代码，从而提高开发效率和代码一致性。

例如，有两个HTML文件index.html和about.html，它们都可以引用同一个script.js文件：

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home Page</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>Home Page</h1>
</body>
</html>

<!-- about.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About Us</title>
    <script src="script.js"></script>
</head>
<body>
    <h1>About Us</h1>
</body>
</html>

4.2 更新代码更加便捷

当需要更新JavaScript代码时，只需修改一个JavaScript文件，而不需要在多个HTML文件中逐一修改。这可以显著减少维护工作量和错误的可能性。

五、改善网站性能

5.1 浏览器缓存

将JavaScript代码放在外部文件中，可以利用浏览器的缓存机制。浏览器会缓存外部JavaScript文件，从而在用户访问多个页面时避免重复下载相同的文件。这可以显著减少页面加载时间和服务器负载。

5.2 分离下载

将JavaScript代码分离到外部文件中，浏览器可以并行下载HTML文件和JavaScript文件，从而提高页面加载速度。

六、使用模块化JavaScript

6.1 ES6模块

现代JavaScript支持模块化，通过import和export关键字，可以将代码拆分成多个模块，每个模块负责不同的功能。这种方式可以进一步提高代码的可维护性和重用性。

例如，我们可以将一些常用的函数放在一个名为utils.js的文件中：

// utils.js
export function greet(name) {
    return `Hello, ${name}!`;
}

然后在其他JavaScript文件中引用这个模块：

// main.js
import { greet } from './utils.js';
console.log(greet('World'));

6.2 引入模块

在HTML文件中，我们需要使用type="module"属性来引入模块化的JavaScript文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modular JavaScript</title>
    <script type="module" src="main.js"></script>
</head>
<body>
    <h1>Modular JavaScript</h1>
</body>
</html>

七、项目管理系统的使用

在开发过程中，管理和协作是非常重要的。使用项目管理系统可以显著提高团队的效率和项目的成功率。在这里，我推荐两个项目管理系统：研发项目管理系统PingCode 和 通用项目协作软件Worktile。

7.1 研发项目管理系统PingCode

PingCode是一款专为研发团队设计的项目管理系统，提供了从需求管理、任务管理、缺陷管理到版本管理的一站式解决方案。它支持敏捷开发、看板管理、自动化测试等功能，非常适合研发团队使用。

7.2 通用项目协作软件Worktile

Worktile是一款通用的项目协作软件，适用于各种类型的团队和项目。它提供了任务管理、时间跟踪、文件共享、团队沟通等功能，帮助团队更高效地协作和管理项目。

八、总结

将JavaScript代码写在外部文件中，是一种符合现代Web开发最佳实践的方法。它不仅可以提高代码可读性和维护性，还可以提高代码重用性和网站性能。在项目开发过程中，使用合适的项目管理系统，如PingCode和Worktile，可以进一步提高团队的效率和项目的成功率。

通过遵循这些最佳实践，我们可以构建更加高效、可维护和性能优越的Web应用程序。