页面引入JS的四种方式

页面引入JS的四种方式

JavaScript（JS）是一种用于在网页中实现交互和动态效果的脚本语言。为了将JavaScript代码应用到网页上，我们需要将其引入到HTML文件中。以下是常见的四种页面引入JS的方式。

1. 行内方式

行内方式是最简单的页面引入JS的方法，直接将JavaScript代码写在HTML文件的标签属性中。例如：

<button onclick="alert('Hello, World!')">点击我</button>

这种方式适用于只有少量代码且仅在当前元素上生效的情况。然而，使用行内方式引入大量JS代码会导致HTML文件冗长且难以维护。

2. 内部引入

通过在HTML文件内部使用``标签来引入JS文件。例如：

<script>
    // JavaScript code goes here
</script>

在``标签内编写的JavaScript代码会在浏览器加载HTML文件时执行。这种方式适用于较小规模的项目，但对于复杂的应用程序，内部引入多个JS文件可能会导致文件冗长且难以管理。

3. 外部引入

将JS代码保存在外部文件中，然后通过``标签的`src`属性引入。例如：

<script src="script.js"></script>

在外部文件中编写JavaScript代码有助于代码的重用和维护。我们可以在多个HTML文件中使用相同的外部JS文件，从而提高开发效率。此外，浏览器可以缓存外部JS文件，从而加快页面加载速度。

4. 模块引入（ES6+）

在JS的新版本（ES6及以上）中，我们可以使用模块化的方式引入JS文件。模块化开发使代码更具结构性和可维护性，并允许我们在不同的文件中定义和导出功能。以下是模块引入的示例：

// 在 module.js 文件中
export function sayHello() {
    console.log('Hello, World!');
}
// 在 main.js 文件中
import { sayHello } from './module.js';
sayHello();

通过使用`export`关键字导出特定功能，并使用`import`关键字在其他文件中导入这些功能，我们可以创建模块化的应用程序。模块化开发通常用于大型项目和团队协作，以提高代码的可维护性和重用性。

综上所述，页面引入JS的四种方式是行内方式、内部引入、外部引入和模块引入。选择适合项目需求的方式可以提高代码的可读性、可维护性和可重用性。