外部js怎么调

外部JS调用的方法有多种：通过<script>标签引入、动态加载JavaScript文件、使用模块加载器。下面将详细介绍通过<script>标签引入的方法。

通过<script>标签引入JavaScript文件是最常见的方式。你可以在HTML文件的<head>部分或<body>部分的末尾添加<script>标签，并通过src属性指定外部JS文件的路径。例如：

<script src="path/to/your/script.js"></script>

这种方法不仅简单易懂，而且在大多数情况下都能很好地满足需求。

一、使用`<script>`标签引入外部JS文件

1、基本用法

在HTML文件中，通过<script>标签的src属性指定外部JavaScript文件的路径是最常见也是最简单的方式。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="path/to/your/script.js"></script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

在这个例子中，script.js文件将会在页面加载时被引入并执行。

2、引入多个JS文件

如果你需要引入多个JavaScript文件，可以按顺序添加多个<script>标签。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="path/to/your/first-script.js"></script>
    <script src="path/to/your/second-script.js"></script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

浏览器会按顺序加载并执行这些文件。

3、放置位置

你可以将<script>标签放置在<head>或<body>部分。将<script>标签放在<body>部分的末尾是一个常见的做法，因为这样可以确保HTML内容在JavaScript文件加载之前完全加载。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <script src="path/to/your/script.js"></script>
</body>
</html>

4、使用`defer`和`async`属性

defer和async属性可以用于控制脚本的加载和执行顺序。使用defer属性可以确保脚本在HTML文档完全解析后执行，而async属性则允许脚本异步加载并在加载完成后立即执行。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="path/to/your/script.js" defer></script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

使用async属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="path/to/your/script.js" async></script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

二、动态加载JavaScript文件

1、使用JavaScript动态加载

在某些情况下，你可能希望在特定条件下动态加载JavaScript文件。可以使用JavaScript的createElement方法创建<script>元素，并将其添加到DOM中。例如：

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/script.js', function() {
    console.log('Script loaded and ready');
});

在这个例子中，当script.js文件加载完成后，回调函数会被调用。

2、通过API动态加载

有些库和框架提供了动态加载JavaScript文件的API。例如，RequireJS是一个流行的JavaScript文件和模块加载器，它允许你按需加载模块：

require(['path/to/your/module'], function(module) {
    // 模块加载完成后执行
});

三、使用模块加载器

1、RequireJS

RequireJS是一个流行的JavaScript模块加载器，它使用AMD（异步模块定义）规范。你可以通过配置RequireJS来定义模块及其依赖关系，并按需加载。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script data-main="path/to/main" src="path/to/require.js"></script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

在main.js中定义模块：

define(['path/to/dep1', 'path/to/dep2'], function(dep1, dep2) {
    // 模块逻辑
});

2、ES6模块

现代浏览器支持ES6模块语法，可以通过<script>标签的type属性和import语句来引入模块。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="module" src="path/to/your/module.js"></script>
</head>
<body>
    <h1>Hello World</h1>
</body>
</html>

在module.js中使用import语句：

import { myFunction } from './myModule.js';
myFunction();

这种方式不仅简洁，而且支持模块化开发，有助于代码的组织和维护。

四、常见问题和解决方案

1、文件路径问题

确保外部JS文件的路径正确。如果路径错误，浏览器将无法找到并加载文件。可以使用相对路径或绝对路径。例如：

相对路径：src="js/script.js"
绝对路径：src="/assets/js/script.js"

2、跨域问题

如果外部JS文件位于不同的域名下，可能会遇到跨域问题。你可以使用CORS（跨域资源共享）或JSONP（JSON with Padding）来解决跨域问题。例如，使用CORS：

<script src="https://example.com/script.js" crossorigin="anonymous"></script>

3、文件缓存问题

浏览器会缓存外部JS文件，以提高加载速度。如果你在开发过程中更新了JS文件，可能会遇到缓存问题。可以通过在文件路径后添加查询参数来避免缓存问题。例如：

<script src="path/to/your/script.js?v=1.0.0"></script>

这样可以确保每次加载最新的JS文件。

五、最佳实践

1、合并和压缩JavaScript文件

为了提高网页的加载速度，可以将多个JavaScript文件合并为一个文件，并进行压缩。工具如Webpack、Gulp和Grunt可以帮助你实现这一目标。例如，使用Webpack：

// webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: __dirname + '/dist'
    },
    mode: 'production'
};

2、使用CDN

将常用的JavaScript库（如jQuery、React等）托管在CDN（内容分发网络）上，可以提高加载速度并减少服务器负载。例如，使用CDN引入jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

3、延迟加载和按需加载

对于不需要立即加载的JavaScript文件，可以使用延迟加载或按需加载的方式。这样可以减少初始加载时间，提高用户体验。例如，使用Intersection Observer API延迟加载：

document.addEventListener('DOMContentLoaded', function() {
    var script = document.createElement('script');
    script.src = 'path/to/your/script.js';
    script.defer = true;
    document.body.appendChild(script);
});

总之，通过正确地引入外部JS文件，你可以提高网页的性能和用户体验。了解并掌握以上方法和技巧，可以帮助你在实际开发中更好地管理和优化JavaScript文件的加载和执行。