外部js函数怎么调用

外部JS函数的调用方法包括以下几种：通过HTML文件中的<script>标签引入、通过动态创建<script>标签、使用模块化加载工具。本文将详细介绍这几种方法，并深入探讨每种方法的优缺点以及适用场景。

一、通过HTML文件中的`<script>`标签引入

1. 基本引入方法

最常见的方法是通过在HTML文件中使用<script>标签引入外部JS文件。例如：

<!DOCTYPE html>
<html>
<head>
    <title>External JS Function Call</title>
</head>
<body>
    <h1>Hello World</h1>
    <script src="path/to/your/external.js"></script>
</body>
</html>

在这个例子中，external.js文件中的所有函数都可以在HTML文件中调用。

2. 多个外部文件引入

如果有多个外部JS文件需要引入，可以使用多个<script>标签。例如：

<!DOCTYPE html>
<html>
<head>
    <title>Multiple External JS Files</title>
</head>
<body>
    <h1>Hello World</h1>
    <script src="path/to/your/first.js"></script>
    <script src="path/to/your/second.js"></script>
</body>
</html>

需要注意的是，这些文件的加载顺序是按照它们在HTML文件中出现的顺序。因此，如果第二个文件依赖于第一个文件中的某些函数，则必须确保第一个文件先加载。

3. 模块化引入

HTML5引入了<script>标签的新特性type="module"，它允许我们以模块化的方式引入JS文件。例如：

<!DOCTYPE html>
<html>
<head>
    <title>Module Example</title>
</head>
<body>
    <h1>Hello World</h1>
    <script type="module" src="path/to/your/module.js"></script>
</body>
</html>

在module.js文件中，可以使用ES6的export和import语法来导出和导入函数或变量：

// module.js
export function myFunction() {
    console.log("Hello from module!");
}

在另一个JS文件中，可以这样导入并使用：

// anotherModule.js
import { myFunction } from './module.js';
myFunction(); // 输出: Hello from module!

总结：通过HTML文件中的<script>标签引入外部JS文件是最常见且简单的方法，适用于大多数小型和中型项目。

二、通过动态创建`<script>`标签

1. 基本方法

有时候我们需要在运行时动态加载JS文件，这可以通过JavaScript代码动态创建<script>标签来实现。例如：

function loadScript(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    script.onload = function() {
        if (callback) {
            callback();
        }
    };
    document.head.appendChild(script);
}
// 使用
loadScript("path/to/your/external.js", function() {
    console.log("Script loaded and ready to use");
});

在这个例子中，当外部JS文件加载完成后，会调用传入的回调函数。

2. 异步加载

动态创建<script>标签的另一个好处是可以异步加载JS文件，这对于提升页面加载性能非常有用。例如：

function loadScriptAsync(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    script.async = true;
    script.onload = function() {
        if (callback) {
            callback();
        }
    };
    document.head.appendChild(script);
}
// 使用
loadScriptAsync("path/to/your/external.js", function() {
    console.log("Script loaded asynchronously and ready to use");
});

3. 错误处理

在动态加载JS文件时，处理加载错误也非常重要。例如：

function loadScriptWithErrorHandling(url, callback) {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src = url;
    script.onload = function() {
        if (callback) {
            callback();
        }
    };
    script.onerror = function() {
        console.error("Failed to load script: " + url);
    };
    document.head.appendChild(script);
}
// 使用
loadScriptWithErrorHandling("path/to/your/external.js", function() {
    console.log("Script loaded with error handling and ready to use");
});

总结：通过动态创建<script>标签可以在运行时灵活地加载JS文件，适用于需要动态加载资源的场景。

三、使用模块化加载工具

1. CommonJS 和 Node.js

在Node.js环境中，CommonJS模块系统被广泛使用。例如：

// external.js
module.exports = function() {
    console.log("Hello from CommonJS module!");
};
// main.js
const myFunction = require('./external.js');
myFunction(); // 输出: Hello from CommonJS module!

2. AMD 和 RequireJS

在浏览器环境中，可以使用AMD（Asynchronous Module Definition）规范和RequireJS库。例如：

// external.js
define(function() {
    return function() {
        console.log("Hello from AMD module!");
    };
});
// main.js
require(['path/to/your/external'], function(myFunction) {
    myFunction(); // 输出: Hello from AMD module!
});

3. ES6 模块

现代浏览器和JavaScript引擎支持ES6模块系统。例如：

// external.js
export function myFunction() {
    console.log("Hello from ES6 module!");
}
// main.js
import { myFunction } from './external.js';
myFunction(); // 输出: Hello from ES6 module!

总结：使用模块化加载工具可以更好地组织和管理代码，适用于大型项目和需要模块化开发的场景。

四、最佳实践

1. 尽量使用ES6模块

ES6模块是现代JavaScript的标准，具有良好的浏览器支持和工具支持。尽量使用ES6模块来组织和管理代码。

2. 使用模块化加载工具

对于复杂和大型项目，使用模块化加载工具（如Webpack、Parcel）可以帮助更好地管理依赖关系和打包代码。

3. 异步加载和错误处理

在动态加载JS文件时，确保异步加载和错误处理，以提升页面性能和用户体验。

4. 安全性考虑

在加载外部JS文件时，确保来源可信，避免引入恶意代码。使用Subresource Integrity（SRI）可以确保加载的资源未被篡改。

<script src="https://example.com/script.js" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux1T3Gg8/7OXm1G6t7W56eZzrc1S8g7" crossorigin="anonymous"></script>

5. 使用项目管理系统

在团队协作开发中，使用项目管理系统如研发项目管理系统PingCode和通用项目协作软件Worktile，可以帮助更好地管理项目进度和任务分配，提高开发效率。

通过以上方法和最佳实践，你可以根据具体需求选择合适的方式来调用外部JS函数，从而提升项目的开发效率和代码质量。