螺竹编程
发布于 2024-05-27 / 4 阅读
0

JavaScript/ECMAScript机制:模块

模块介绍

ECMAScript中的模块机制用于将代码分离为多个文件,并控制模块的导出和导入,以便于组织和管理大型项目。

ECMAScript中的模块使用了标准化的import和export语法,可以将一个或多个值从一个模块导出,然后在另一个模块中导入并使用这些值。例如:

// module1.js
export const foo = 1;
export function bar() {
  console.log('bar');
}

// module2.js
import { foo, bar } from './module1.js';
console.log(foo);
bar();

上面的例子中,module1.js通过export关键字导出了foo和bar,module2.js则通过import语法导入并使用了这些值。

除了单个值的导入和导出,ECMAScript的模块机制还支持默认导出和命名空间导出。默认导出可以使用export default语法导出一个默认的值,而命名空间导出可以使用export *语法将一个模块中的所有导出都重新导出为一个命名空间。例如:

// module1.js
const foo = 1;
function bar() {
  console.log('bar');
}
export default foo;
export { bar };

// module2.js
import myFoo, * as myModule1 from './module1.js';
console.log(myFoo);
myModule1.bar();

上面的例子中,module1.js通过export default关键字导出了默认值foo,同时也导出了bar函数。在module2.js中,通过import myFoo语法导入了默认值foo,同时通过import * as myModule1语法将module1.js中的所有导出都重新导出为一个myModule1命名空间。

总的来说,ECMAScript中的模块机制提供了一种组织和管理代码的方式,可以帮助开发者更好地组织和维护大型项目。

默认导出和命名空间

在 ECMAScript 中,export 和 import 语法用于导出和导入模块中的值。除了普通的导入和导出外,还有两种特殊的导入和导出方式:默认导出和命名空间导出。

默认导出是指一个模块只导出一个默认值,这个默认值可以是任意类型的值,包括函数、对象、基本数据类型等。默认导出可以使用 export default 语法导出,例如:

// module1.js
export default function() {
  console.log('default function');
}

// module2.js
import myFunction from './module1.js';
myFunction(); // 输出 "default function"

在上面的例子中,module1.js 使用 export default 导出了一个默认函数,而 module2.js 使用 import myFunction from './module1.js' 语法导入默认函数,并给它取了一个别名 myFunction。

命名空间导出是指将一个模块中的所有导出都重新导出为一个命名空间,这个命名空间可以包含模块中的所有导出,也可以选择导出其中的一部分。命名空间导出可以使用 export * as 语法导出,例如:

// module1.js
export const foo = 1;
export function bar() {
  console.log('bar');
}

// module2.js
export * as myModule1 from './module1.js';

在上面的例子中,module2.js 使用 export * as myModule1 from './module1.js' 语法将 module1.js 中的所有导出都重新导出为一个 myModule1 命名空间,然后可以通过 myModule1.foo 和 myModule1.bar() 访问 module1.js 中的导出。

需要注意的是,如果一个模块既使用了默认导出,又使用了命名空间导出,则默认导出的值不会被包含在命名空间中。