静态js怎么使用方法

静态JavaScript使用方法非常简单且有效，主要包括嵌入HTML文件、外部文件引用、内联事件处理、模块化管理。下面我们将详细探讨其中的“外部文件引用”方法。

一、嵌入HTML文件

嵌入HTML文件是最基础的使用方式。你可以在HTML文档的 <head> 或 <body> 部分内嵌入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>
    <script>
        function sayHello() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">Click Me!</button>
</body>
</html>

在这个例子中，JavaScript代码嵌入在 <head> 部分，浏览器在解析HTML时会执行这个脚本。

二、外部文件引用

将JavaScript代码放在外部文件中，并在HTML文件中引用，这是推荐的做法。这样可以提升代码的可维护性和复用性。

创建一个JavaScript文件：

创建一个名为 main.js 的文件，并写入以下代码：
```
function sayHello() {
    alert('Hello, World!');
}
```

在HTML文件中引用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>
    <script src="main.js"></script>
</head>
<body>
    <button onclick="sayHello()">Click Me!</button>
</body>
</html>

外部文件引用的优点包括代码复用、易于维护、减少HTML文件大小。这些优点使得外部文件引用成为开发中广泛使用的方法。

三、内联事件处理

内联事件处理是指在HTML标签中直接绑定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>
    <button onclick="alert('Hello, World!')">Click Me!</button>
</body>
</html>

四、模块化管理

随着项目复杂度的增加，模块化管理变得越来越重要。ES6引入了模块化机制，使得代码可以按功能模块划分，提高了代码的可维护性和可读性。

创建模块文件：

创建一个名为 greet.js 的文件，并写入以下代码：
```
export function sayHello() {
    alert('Hello, World!');
}
```

在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 type="module">
        import { sayHello } from './greet.js';
        document.querySelector('button').addEventListener('click', sayHello);
    </script>
</head>
<body>
    <button>Click Me!</button>
</body>
</html>

五、总结

JavaScript作为前端开发的核心语言，其使用方法多种多样。嵌入HTML文件、外部文件引用、内联事件处理、模块化管理是最常用的几种方法。其中，外部文件引用和模块化管理是推荐的最佳实践，因为它们可以提升代码的可维护性、复用性、可读性。希望本文对你在使用静态JavaScript时有所帮助。