网页中怎么调用js

在网页中调用JavaScript的常用方法有：内联脚本、嵌入脚本、外部脚本。在网页中调用JavaScript的方式有多种，其中外部脚本是最推荐的方式。它不仅有助于代码的维护和重用，还能提升页面加载速度。下面，我们将详细探讨这些方法，并介绍每种方法的使用场景和优缺点。

一、内联脚本

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

优点：

简单直观：适用于小型脚本，便于调试。
快速实现：无需额外的文件引用，直接在标签内添加。

缺点：

可读性差：代码分散在HTML文件中，难以维护。
不利于复用：每次需要相同的功能都要重复编写代码。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联脚本示例</title>
</head>
<body>
    <button onclick="alert('Hello, World!')">点击我</button>
</body>
</html>

二、嵌入脚本

嵌入脚本是指将JavaScript代码放置在HTML文件的<script>标签中，通常放在<head>或<body>标签内。

优点：

便于调试：所有脚本代码集中在一个位置，便于调试和修改。
更好的结构化：可以在HTML文件中组织复杂的脚本逻辑。

缺点：

代码膨胀：脚本和HTML混杂在一起，文件尺寸较大。
不利于缓存：每次加载页面都需要重新解析脚本。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>嵌入脚本示例</title>
    <script>
        function showMessage() {
            alert('Hello, World!');
        }
    </script>
</head>
<body>
    <button onclick="showMessage()">点击我</button>
</body>
</html>

三、外部脚本

外部脚本是指将JavaScript代码放置在独立的.js文件中，然后在HTML文件中通过<script>标签的src属性引入。

优点：

代码复用：同一个脚本文件可以被多个HTML文件引用。
提高加载速度：浏览器可以缓存外部脚本文件，减少重复下载。
分离关注点：使HTML结构与JavaScript逻辑分离，提高代码可读性和维护性。

缺点：

额外的HTTP请求：引入外部文件需要额外的HTTP请求，可能会影响加载速度（可以通过合并和压缩文件优化）。
依赖网络：如果外部脚本文件无法加载，页面功能会受到影响。

示例：

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
    <script src="script.js"></script>
</head>
<body>
    <button onclick="showMessage()">点击我</button>
</body>
</html>

JavaScript文件（script.js）：

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

四、异步和延迟脚本

为了优化页面加载性能，现代浏览器支持异步和延迟加载脚本。使用async和defer属性可以控制脚本的加载和执行顺序。

异步脚本（async）

异步脚本在下载时不会阻塞页面的解析，一旦下载完成立即执行。适用于独立性强、不依赖其他脚本的代码。

延迟脚本（defer）

延迟脚本在页面解析完成后执行，适用于依赖其他脚本或需要确保DOM完全加载的代码。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>异步和延迟脚本示例</title>
    <script src="async-script.js" async></script>
    <script src="defer-script.js" defer></script>
</head>
<body>
    <button onclick="showAsyncMessage()">异步点击</button>
    <button onclick="showDeferMessage()">延迟点击</button>
</body>
</html>

异步脚本（async-script.js）：

function showAsyncMessage() {
    alert('这是异步脚本的消息！');
}

延迟脚本（defer-script.js）：

function showDeferMessage() {
    alert('这是延迟脚本的消息！');
}

五、模块化脚本

ES6引入了模块化的概念，可以使用type="module"属性来定义模块化脚本。这种方式支持导入和导出模块，提高代码的组织性和复用性。

优点：

代码组织良好：支持模块化开发，便于维护和扩展。
避免全局污染：模块内部的变量和函数不会污染全局作用域。

缺点：

浏览器兼容性：需要现代浏览器支持，不适用于旧版浏览器。

示例：

HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模块化脚本示例</title>
    <script type="module" src="main.js"></script>
</head>
<body>
    <button onclick="showModuleMessage()">模块化点击</button>
</body>
</html>

主模块（main.js）：

import { showMessage } from './module.js';
window.showModuleMessage = showMessage;

子模块（module.js）：

export function showMessage() {
    alert('这是模块化脚本的消息！');
}

总结

在网页中调用JavaScript的方式多种多样，选择合适的方式可以提高代码的可维护性和页面的加载性能。内联脚本适用于简单的、一次性的操作，嵌入脚本适用于中小型项目，外部脚本是最推荐的方式，适用于大型项目和复杂应用。通过使用异步和延迟脚本可以进一步优化页面性能，而模块化脚本则为现代JavaScript开发提供了强大的支持。根据具体的项目需求和场景，灵活选择合适的调用方式，才能实现最佳的开发效果。