加载js函数怎么调

加载JavaScript函数的方式有多种，包括内嵌脚本、外部脚本、事件处理程序、页面加载完成后执行等。 在本文中，我们将详细探讨这些不同的加载方法，并推荐在不同场景下的最佳实践。

一、内嵌脚本

内嵌脚本是最简单的加载JavaScript函数的方法。通过在HTML文档的 <head> 或 <body> 标签中嵌入 <script> 标签，可以直接在页面中运行JavaScript代码。

优点：

简单直接：直接将JavaScript代码写在HTML中，便于调试和快速测试。
加载时立即执行：内嵌的JavaScript代码会在页面加载时立即执行。

缺点：

维护困难：代码和HTML混在一起，不利于代码的维护和管理。
性能问题：每次加载页面都要重新解析这些脚本，可能影响页面加载速度。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>内嵌JavaScript示例</title>
    <script type="text/javascript">
        function sayHello() {
            alert("Hello, World!");
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

二、外部脚本

将JavaScript代码放在独立的 .js 文件中，通过 <script> 标签的 src 属性加载。此方法能够将HTML结构和脚本逻辑分离，提升代码的可维护性。

优点：

可维护性强：代码分离，便于维护和版本控制。
缓存优势：外部脚本文件可以被浏览器缓存，提升页面加载速度。
复用性：同一个脚本文件可以在多个HTML页面中复用。

缺点：

依赖网络：如果外部脚本文件较大，可能会增加页面加载时间。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>外部JavaScript示例</title>
    <script type="text/javascript" src="script.js"></script>
</head>
<body>
    <button onclick="sayHello()">点击我</button>
</body>
</html>

script.js 文件内容：

function sayHello() {
    alert("Hello, World!");
}

三、事件处理程序

通过绑定事件处理程序来加载和执行JavaScript函数。常见的事件处理程序包括 onclick、onload、onmouseover 等。

优点：

灵活性高：可以根据用户的操作触发JavaScript函数。
增强用户体验：通过事件处理程序可以实现动态交互，提高用户体验。

缺点：

可能影响性能：如果绑定了过多的事件处理程序，可能会影响页面性能。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>事件处理程序示例</title>
    <script type="text/javascript">
        function sayHello() {
            alert("Hello, World!");
        }
        window.onload = function() {
            document.getElementById("myButton").onclick = sayHello;
        }
    </script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

四、页面加载完成后执行

为了确保JavaScript代码在DOM完全加载之后执行，可以使用 window.onload 或 DOMContentLoaded 事件。这些事件会在页面加载完成或DOM解析完成后触发。

优点：

避免脚本错误：确保在DOM完全加载之后执行JavaScript代码，避免因DOM未加载完全导致的脚本错误。
提升性能：页面加载完成后再执行JavaScript代码，可以提升页面加载速度。

缺点：

延迟执行：代码会在页面加载完成之后才执行，可能会稍微延迟用户的交互体验。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>页面加载完成后执行示例</title>
    <script type="text/javascript">
        document.addEventListener('DOMContentLoaded', function() {
            document.getElementById("myButton").onclick = function() {
                alert("Hello, World!");
            };
        });
    </script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

五、异步加载

为了提高页面加载性能，可以使用 async 和 defer 属性来异步加载外部JavaScript文件。这两个属性都会异步加载脚本，但其执行时机有所不同。

async：

异步加载和执行：脚本会在下载完成后立即执行，不会等待其他脚本或DOM的加载。
适用于独立脚本：适用于不依赖其他脚本或DOM的脚本。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>异步加载示例</title>
    <script async src="script.js"></script>
</head>
<body>
    <h1>异步加载JavaScript示例</h1>
</body>
</html>

defer：

异步加载、顺序执行：脚本会在下载完成后等待DOM解析完成再执行，多个 defer 脚本会按顺序执行。
适用于依赖DOM的脚本：适用于需要访问DOM的脚本。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>异步加载示例</title>
    <script defer src="script.js"></script>
</head>
<body>
    <h1>异步加载JavaScript示例</h1>
</body>
</html>

六、模块化加载

使用ES6模块（ES Modules）可以实现JavaScript代码的模块化加载和管理。通过 import 和 export 关键字，可以在不同文件之间导入和导出模块，提高代码的复用性和可维护性。

优点：

模块化：通过模块化加载和管理JavaScript代码，提高代码的组织性和可维护性。
复用性：可以在不同文件之间导入和导出模块，提高代码的复用性。

缺点：

浏览器兼容性：需要现代浏览器的支持，老旧浏览器可能不兼容。

示例：

main.js 文件内容：

import { sayHello } from './module.js';
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("myButton").onclick = sayHello;
});

module.js 文件内容：

export function sayHello() {
    alert("Hello, World!");
}

HTML 文件内容：

<!DOCTYPE html>
<html>
<head>
    <title>模块化加载示例</title>
    <script type="module" src="main.js"></script>
</head>
<body>
    <button id="myButton">点击我</button>
</body>
</html>

七、结论

在实际开发中，应根据具体需求选择合适的JavaScript函数加载方式。内嵌脚本适用于简单的快速测试，外部脚本适用于复杂项目的开发和维护，事件处理程序和页面加载完成后执行适用于提高用户体验，异步加载和模块化加载适用于提升页面性能和代码组织性。通过合理选择和组合这些加载方式，可以编写出性能优良、结构清晰的JavaScript应用。

在团队协作中，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，这些工具可以帮助团队更高效地管理和协作，提高项目开发效率。