ES6 中的 import 和 export 实现模块化编程

在传统的 JavaScript 中，我们往往需要使用全局变量或命名空间来组织代码，这样会导致代码的可维护性和可读性较差。而 ES6 中引入了 import 和 export 语法来实现模块化编程，它可以帮助我们更好地组织代码，提高代码的可维护性和可读性。

import 和 export 的基本用法

在 ES6 中，我们可以使用 import 和 export 语法来导入和导出模块。比如，我们可以使用 export 关键字来导出一个模块：

// moduleA.js
export const name = 'moduleA';
export function sayHello() {
  console.log('Hello from moduleA!');
}

然后，我们可以使用 import 关键字来导入该模块：

// moduleB.js
import { name, sayHello } from './moduleA.js';
console.log(name); // 'moduleA'
sayHello(); // 'Hello from moduleA!'

上面的代码中，我们使用 import 关键字从 moduleA.js 文件中导入了 name 和 sayHello 两个变量和函数，并使用它们来输出一些信息。

import 和 export 的高级用法

除了基本的用法，import 和 export 还有一些高级用法，比如：

导入和导出默认值

我们可以使用 export default 语法来导出默认值：

// moduleA.js
export default function sayHello() {
  console.log('Hello from moduleA!');
}

然后，我们可以使用 import 语法来导入默认值：

// moduleB.js
import sayHello from './moduleA.js';
sayHello(); // 'Hello from moduleA!'

上面的代码中，我们使用 export default 导出了一个默认的函数，然后使用 import 导入了该函数，并直接调用它。

导入和导出多个值

除了默认值，我们还可以使用 export 关键字来导出多个值：

// javascriptcn.com 代码示例
// moduleA.js
const name = 'moduleA';
function sayHello() {
  console.log('Hello from moduleA!');
}
function sayBye() {
  console.log('Bye from moduleA!');
}
export { name, sayHello, sayBye };

然后，我们可以使用 import 语法来导入多个值：

// moduleB.js
import { name, sayHello, sayBye } from './moduleA.js';
console.log(name); // 'moduleA'
sayHello(); // 'Hello from moduleA!'
sayBye(); // 'Bye from moduleA!'

上面的代码中，我们使用 export 导出了多个变量和函数，并使用 import 导入了这些变量和函数。

导入和导出命名空间

我们还可以使用 import * as 语法来导入命名空间：

// javascriptcn.com 代码示例
// moduleA.js
const name = 'moduleA';
function sayHello() {
  console.log('Hello from moduleA!');
}
function sayBye() {
  console.log('Bye from moduleA!');
}
export { name, sayHello, sayBye };

然后，我们可以使用 import * as 语法来导入命名空间：

// moduleB.js
import * as moduleA from './moduleA.js';
console.log(moduleA.name); // 'moduleA'
moduleA.sayHello(); // 'Hello from moduleA!'
moduleA.sayBye(); // 'Bye from moduleA!'

上面的代码中，我们使用 import * as 导入了一个命名空间 moduleA，并使用它来访问 moduleA 中的变量和函数。

总结

使用 import 和 export 语法可以帮助我们更好地组织代码，提高代码的可维护性和可读性。我们可以使用 export 关键字来导出模块，使用 import 关键字来导入模块。除了基本的用法，还可以使用 export default 导出默认值，使用 export 导出多个值，使用 import * as 导入命名空间。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65092f4a95b1f8cacd3f1c9e