js 中怎么引进js

在 JavaScript 中引入 JavaScript 的方法有多种，包括 <script> 标签、动态加载脚本和模块化加载等方式。最常见的方法是使用 <script> 标签、动态加载脚本、模块化加载（ES6 模块）。以下将详细介绍如何使用这些方法并深入探讨每一种方法的优缺点和适用场景。

一、使用 `<script>` 标签

1. 内嵌 JavaScript

在 HTML 文件中，最简单的方法是使用 <script> 标签直接在页面中嵌入 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello World</h1>
    <script>
        console.log('Hello from inline script!');
    </script>
</body>
</html>

这种方式适用于简单的、少量的 JavaScript 代码，但不适合大型项目，因为代码难以维护和复用。

2. 外部 JavaScript 文件

另一种常见的方法是将 JavaScript 代码放在一个独立的文件中，然后在 HTML 文件中通过 <script> 标签引入它。

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

这种方式有利于代码的组织和复用，适用于中大型项目。

二、动态加载脚本

动态加载脚本是指在运行时通过 JavaScript 代码动态地加载其他 JavaScript 文件。这种方式适用于需要根据用户操作或特定条件动态加载脚本的场景。

function loadScript(url) {
    const script = document.createElement('script');
    script.src = url;
    document.head.appendChild(script);
}
loadScript('dynamic.js');

优点：

按需加载：可以按需加载脚本，提高页面初始加载速度。
灵活性：可以根据用户操作或其他条件动态加载脚本。

缺点：

复杂性：需要额外的代码和逻辑来管理脚本加载。
依赖管理：需要处理脚本之间的依赖关系，可能会增加复杂性。

三、使用 ES6 模块

ES6 引入了模块化的概念，使得 JavaScript 代码可以更加模块化和结构化。通过 import 和 export 关键字，可以轻松地在不同文件之间引入和导出代码。

1. 导出模块

在一个 JavaScript 文件中使用 export 关键字导出变量、函数或类。

// module.js
export const hello = 'Hello World';
export function greet(name) {
    return `Hello, ${name}`;
}

2. 引入模块

在另一个 JavaScript 文件中使用 import 关键字引入导出的内容。

// main.js
import { hello, greet } from './module.js';
console.log(hello);
console.log(greet('Alice'));

这种方式适用于现代浏览器和支持 ES6 的环境，适合构建复杂的、大型的应用程序。

优点：

模块化：代码更加模块化和结构化，易于维护和复用。
静态分析：可以静态分析模块依赖关系，有助于优化和打包。

缺点：

兼容性：不支持老旧浏览器，需要通过 Babel 等工具进行转换。
配置：需要配置打包工具（如 Webpack）来处理模块化代码。

四、使用模块化加载工具

1. CommonJS 模块

CommonJS 是 Node.js 中使用的模块系统，适用于服务器端 JavaScript 环境。

// module.js
module.exports = {
    hello: 'Hello World',
    greet: function(name) {
        return `Hello, ${name}`;
    }
};
// main.js
const { hello, greet } = require('./module');
console.log(hello);
console.log(greet('Alice'));

2. AMD 模块

Asynchronous Module Definition（AMD）是一种适用于浏览器环境的模块化加载方案，通常与 RequireJS 一起使用。

// module.js
define([], function() {
    return {
        hello: 'Hello World',
        greet: function(name) {
            return `Hello, ${name}`;
        }
    };
});
// main.js
require(['module'], function(module) {
    console.log(module.hello);
    console.log(module.greet('Alice'));
});

优点：

兼容性：适用于不同环境（浏览器和服务器）。
生态系统：有丰富的模块和库支持。

缺点：

复杂性：需要额外的工具和配置。
学习曲线：需要学习和理解不同的模块系统。

五、使用模块化打包工具

1. Webpack

Webpack 是一个流行的模块打包工具，可以将多个模块打包成一个或多个文件。

配置 Webpack

首先，安装 Webpack 和相关依赖：

npm install --save-dev webpack webpack-cli

创建一个简单的配置文件 webpack.config.js：

const path = require('path');
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development'
};

在 src/index.js 中编写代码：

import { hello, greet } from './module';
console.log(hello);
console.log(greet('Alice'));

在 src/module.js 中导出模块：

export const hello = 'Hello World';
export function greet(name) {
    return `Hello, ${name}`;
}

运行 Webpack 来打包模块：

npx webpack

2. Rollup

Rollup 是另一个流行的模块打包工具，特别适用于库的打包。

配置 Rollup

首先，安装 Rollup 和相关依赖：

npm install --save-dev rollup

创建一个简单的配置文件 rollup.config.js：

import { terser } from 'rollup-plugin-terser';
export default {
    input: 'src/index.js',
    output: {
        file: 'dist/bundle.js',
        format: 'iife',
        name: 'MyBundle'
    },
    plugins: [terser()]
};