javascript中的模块化导入和导出

1.概括

ES6（ECMAScript 2015）引入了模块（Modules）的概念，使开发者可以方便地导入和导出模块。我们可以用单独的js文件,来封装功能代码,导出.在需要使用的地方导入

导出分为默认导出（Default Export)和命名导出（Named Export),在同一个js文件中同时使用这两种导出方式也叫混合导出

2.默认导出与导入

导出

// myModule.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

导入

// main.js
import greet from './myModule.js';

console.log(greet('Bob')); // 输出: Hello, Bob!

3.命名导出与导入

导出

// myModule.js
export const name = "Alice";
export const age = 30;

function greet(name) {
  return `Hello, ${name}!`;
}

export { greet };

导入

// main.js
import { name, age, greet } from './myModule.js';

console.log(name); // 输出: Alice
console.log(age);  // 输出: 30
console.log(greet('Bob')); // 输出: Hello, Bob!

4.重命名导入

将模块文件中的命名导出对象进行重命名导入

// main.js
import { name as userName, age as userAge, greet as sayHello } from './myModule.js';

console.log(userName); // 输出: Alice
console.log(userAge);  // 输出: 30
console.log(sayHello('Bob')); // 输出: Hello, Bob!

5.导入所有导出

使用 * 和 as 关键字来导入模块中的所有命名导出，并将它们放在一个对象中。

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

console.log(myModule.name); // 输出: Alice
console.log(myModule.age);  // 输出: 30
console.log(myModule.greet('Bob')); // 输出: Hello, Bob!

6.混合导出与导入

导出

// myModule.js
export const name = "Alice";
export const age = 30;

function greet(name) {
  return `Hello, ${name}!`;
}

export { greet };

export default function farewell(name) {
  return `Goodbye, ${name}!`;
}

导入

// main.js
import farewell, { name, age, greet } from './myModule.js';

console.log(name); // 输出: Alice
console.log(age);  // 输出: 30
console.log(greet('Bob')); // 输出: Hello, Bob!
console.log(farewell('Bob')); // 输出: Goodbye, Bob!

7.动态导入

动态导入使用 import() 函数，可以在运行时动态加载模块。

// main.js
async function loadModule() {
  const module = await import('./myModule.js');
  console.log(module.name); // 输出: Alice
  console.log(module.age);  // 输出: 30
  console.log(module.greet('Bob')); // 输出: Hello, Bob!
  console.log(module.default('Bob')); // 输出: Goodbye, Bob!
}

loadModule();

8.总结

默认导出：每个模块只能有一个默认导出，导入时可以使用任何名称。
命名导出：可以有多个命名导出，导入时需要使用相同的名称或解构赋值重命名。
混合导出：一个模块可以同时有默认导出和命名导出。
动态导入：使用 import() 函数在运行时动态加载模块。

原文地址：https://blog.csdn.net/Summer_Uncle/article/details/144334904

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！