js导入其他js的方法

在JavaScript开发中，导入其他JavaScript文件是一项常见且重要的操作，它有助于提升代码的模块化与可维护性。以下将介绍几种常见的js导入其他js的方法。

script标签

这是最基础、最常用的方法。在HTML文件中，通过多个script标签来引入不同的JavaScript文件。例如：

<script src="script1.js"></script>
<script src="script2.js"></script>

src属性指定要导入的JavaScript文件路径。这种方式简单直接，浏览器会按照script标签在HTML文档中的顺序依次加载并执行脚本。需要注意的是，如果script标签位于head标签内，可能会阻塞页面的渲染，所以对于一些不影响页面渲染的脚本，可以将script标签放置在body标签的末尾。

ES6模块导入

ES6引入了模块系统，使用import语句来导入其他模块。在要导出内容的js文件中，使用export关键字定义导出内容。例如，在math.js文件中：

export function add(a, b) {
    return a + b;
}

然后在另一个文件中导入：

import { add } from './math.js';
let result = add(2, 3);

也可以使用默认导出：

// math.js
export default function(a, b) {
    return a + b;
}
// main.js
import add from './math.js';
let result = add(2, 3);

ES6模块导入使得代码结构更加清晰，便于管理和维护。它具有静态导入的特性，在编译阶段就能确定导入关系。

CommonJS模块导入

在Node.js环境中，使用CommonJS模块规范。通过require函数来导入模块。例如，在app.js中导入fs模块：

const fs = require('fs');

对于自定义模块，同样使用require。比如有一个util.js文件：

// util.js
exports.add = function(a, b) {
    return a + b;
}
// app.js
const util = require('./util.js');
let result = util.add(2, 3);

CommonJS模块导入是动态导入，在运行时才会解析导入路径。

以上这些js导入其他js的方法各有特点，在实际开发中，要根据项目的需求、运行环境等因素来选择合适的导入方式，以实现高效、可维护的代码结构。