JavaScript 程序中如何使用 import 语句

导入模块和功能是现代JavaScript开发中的基础内容。使用import语句可以引入模块、文件、或特定的绑定， 从而实现代码的重用和模块化。例如，在基于ES6的项目中，可以使用import关键字来引入另外一个文件中默认导出的模块：import moduleName from 'modulePath';。导入特定功能的语法如下：import { functionName } from 'modulePath';。此外，也可以一次性导入模块中的所有导出绑定：import * as alias from 'modulePath';。import语句大大提升了代码的组织性和可维护性，是现代开发中不可或缺的一部分。

一、IMPORT 语句基础使用

在使用import语句之前，有必要了解Node.js或者浏览器中的JavaScript模块系统。ES6模块化标准定义了import和export两种操作，为JavaScript提供了官方的模块系统实现。ES6模块化的出现是为了解决脚本文件依赖管理混乱以及命名空间污染的问题。

导入整个模块

当需要从外部模块或库中导入全部功能时，可以使用import * as语法。这允许你通过一个别名（alias）来引用模块中导出的所有内容。

import * as myModule from './myModule.js';

// 使用模块中导出的功能
console.log(myModule.someFunction());

在这个例子中，myModule将代表一个包含./myModule.js导出所有内容的对象。对这个别名下的属性或方法的任何引用，都将对应到该模块导出的绑定。

导入模块的默认导出

如需导入模块的默认导出，可以使用以下语法：

import defaultExport from './module.js';

// 使用模块的默认导出
defaultExport();

defaultExport是你为导入的默认值自定义的名称。通常情况下，模块的默认导出是一个函数或一个类。

二、导入特定的导出绑定

当不需要模块中的所有功能，只需要导入模块内的特定功能时，可以使用大括号{}来解构需要的绑定。

导入单个或多个特定绑定

import { export1 } from './module.js';

import { export1, export2 } from './module.js';

这里，export1和export2是模块./module.js中具体导出的命名绑定。需要注意的是，这些命名需要和模块中对外导出的命名一致。

导入时重命名绑定

有时候，可能需要将导入的绑定重命名以避免与本地变量的命名冲突，或简化变量名。这可以通过as关键字来实现。

import { export1 as alias1, export2 as alias2 } from './module.js';

// 使用重命名后的绑定
alias1();
alias2();

三、导入模块的副作用

有时，某些模块导入的目的并不是为了使用其中的绑定，而是为了利用它们的副作用。例如，可能需要在模块中运行某些代码，但不需要实际导入任何值。这种副作用通常包括注册全局插件或扩展等。

仅导入模块以触发副作用

import './module.js';

在这个例子中，./module.js将被执行，但不会导入任何值。这种情况适用于那些不需要显式接口，只需执行初始化代码的模块。

四、与导出语句结合的实践

为了更有效地使用import语句，需要了解与之相对应的export语句。导出分为命名导出和默认导出，默认导出每个文件最多只能有一个，而命名导出则可以有多个。接下来，我们来看一些与导出结合的示例。

结合默认导出和命名导出

// module.js

export default function defaultFunction() {
    console.log('This is the default export.');
}
export function namedFunction() {
    console.log('This is a named export.');
}

在这个模块中，包含了一个默认导出和一个命名导出。导入时，可以组合使用：

import defaultFunction, { namedFunction } from './module.js';

defaultFunction();
namedFunction();

单个import语句同时导入了默认导出和命名导出，这样的结构使得导入更为高效。

五、高级导入技巧

尽管import语句的基本用法已经非常强大和灵活，但有时可能需要进一步处理导入模块。

动态导入

当你需要根据某些条件或在特定时机导入模块时，动态导入可以被用作一个函数，返回一个promise。

async function loadModule() {

    const module = awAIt import('./module.js');
    module.default();
    module.namedFunction();
}
loadModule();

动态导入对于实现代码分割和懒加载非常有用。使用动态导入时，可以在应用运行期间根据用户的行为或其他条件导入特定的代码块，降低初次加载负担。

总结

import语句作为ES6模块系统的核心特性，极大地提高了JavaScript代码的模块化程度和开发效率。掌握import的各种用法对于任何现代JavaScript开发者来说都是必须的。使用适当的导入方法可以提升代码的整洁性、可维护性，并减轻代码之间的耦合度。通过专业、有组织的方式使用import语句，开发者可以构建出强大而灵活的前端和后端应用。

相关问答FAQs：

1. 在JavaScript程序中如何使用import语句？

在JavaScript中，import语句用于导入其他模块或库中的变量、函数或类。您可以按照以下步骤使用import语句：

• 确保您的JavaScript环境支持ES6模块导入。
• 在需要导入的JavaScript文件中添加一个import语句。
• 指定要导入的模块的路径和名称。
• 使用imported变量来访问导入的内容。

举个例子，如果您想在一个文件中导入一个名为"utils"的模块，您可以按照以下方式编写import语句：

import { functionName } from 'utils';

然后，您就可以使用函数名在您的程序中调用函数。

2. JavaScript中import语句的常见问题有哪些？

在使用import语句时，常见的问题包括：

• 导入的模块路径不正确：请确保您指定的模块路径是正确的，并且该模块已经安装或可访问。
• 缺少导出的变量或函数：如果导入的模块中缺少您想要导入的变量或函数，可能会导致错误。
• 对ES6模块导入的环境支持不足：某些旧版本的JavaScript环境可能不支持ES6模块导入语句。在这种情况下，您可以考虑使用Babel等工具来将代码转换为支持的语法。
• 循环依赖问题：当两个或多个模块相互依赖时，可能会导致循环依赖问题。这可能会导致导入报错或运行时错误。确保在设计模块时避免循环依赖。

3. import语句和require语句有什么不同？

在JavaScript中，import语句和require语句是两种不同的模块导入方式。

• import语句：是ES6模块系统中的一种导入方式，用于导入其他模块中的变量、函数或类。它是静态导入，意味着导入会在代码执行之前解析和处理。
• require语句：是CommonJS模块系统中的一种导入方式，用于导入其他模块中的变量、函数或类。它是动态导入，意味着导入会在代码执行时动态加载和解析。

虽然两者实现了相同的目标，但它们的语法和用法略有不同。在ES6模块系统中，使用import语句来导入模块已成为主流，特别是在现代的JavaScript项目中。而在旧的JavaScript项目中，您可能会看到require语句的使用。

最后建议，企业在引入信息化系统初期，切记要合理有效地运用好工具，这样一来不仅可以让公司业务高效地运行，还能最大程度保证团队目标的达成。同时还能大幅缩短系统开发和部署的时间成本。特别是有特定需求功能需要定制化的企业，可以采用我们公司自研的企业级低代码平台：织信Informat。 织信平台基于数据模型优先的设计理念，提供大量标准化的组件，内置AI助手、组件设计器、自动化（图形化编程）、脚本、工作流引擎（BPMN2.0）、自定义API、表单设计器、权限、仪表盘等功能，能帮助企业构建高度复杂核心的数字化系统。如ERP、MES、CRM、PLM、SCM、WMS、项目管理、流程管理等多个应用场景，全面助力企业落地国产化/信息化/数字化转型战略目标。