ES7 中的模块级别作用域

随着 JavaScript 语言的不断发展和更新，模块化的重要性也日益凸显。ES6 引入了模块化的概念，但是ES7 进一步加强了模块化，引入了模块级别作用域，使我们能够更加灵活地控制变量的作用范围。

模块化的意义

• 模块化使得程序的结构更加清晰明了，易于维护和扩展。
• 模块化提高了代码的可读性和可维护性，减少了错误的发生。

ES6 模块化回顾

在 ES6 中，我们可以使用 import 和 export 两个关键字来实现模块化。例如：

// 外部文件 a.js
export const a = 1;

// 外部文件 b.js
import {a} from './a.js';

console.log(a); // 输出1

上述代码中，a.js 中的 a 变量可以被 export 出来，其它文件中则可以通过 import {a} from './a.js' 的方式引用它。

ES7 模块级别作用域

在 ES7 中，我们可以使用 let 和 const 关键字定义模块级别的变量，这些变量只在模块内可见，不会被外部文件访问到，这可以避免变量污染，并提高代码的安全性。

// a.js
let a = 1;
const b = 2;

// b.js
console.log(a); // 报错
console.log(b); // 报错

在上述代码中，变量 a 和常量 b 都是在 a.js 中定义的，它们只能在 a.js 中被访问到，其它文件中的代码无法访问它们。

需要注意的是，使用 let 和 const 定义的变量具有块级作用域，即只在当前的 {} 块中有效。

// a.js
if (true) {
  let a = 1;
}
console.log(a); // 报错

在上述代码中，变量 a 只在 if 语句块中有效，外层的 console.log(a) 就会报错。

模块级别变量的导出

我们可以像普通变量一样导出模块级别的变量，但是它们仅能在当前模块中访问到。

// a.js
let a = 1;
export {a};

// b.js
import {a} from './a.js';

console.log(a); // 输出1

在上述代码中，变量 a 可以被导出并在其它模块中引用。

模块级别的 import

我们可以在模块内部使用 import 对外部模块进行引入，但是这是一种实验特性，需要先启用 es2015 模块化语法。

import('./foo.js')
  .then(module => {
    // ...
  })
  .catch(err => {
    // ...
  });

在上述代码中，我们使用 import 动态地加载了一个模块。

总结

ES7 中的模块级别作用域，可以更加灵活地控制变量的作用范围，避免变量污染，并提高代码的安全性。同时，模块化也使得程序的结构更清晰明了，易于维护和扩展。我们需要在实践中仔细体会它的使用，尽可能地发挥其优点。

代码示例

• a.js

let a = 1;
export {a};

• b.js

import {a} from './a.js';
console.log(a); // 输出1

• c.js

console.log(a); // 报错
import {a} from './a.js';

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