在 ECMAScript 2015 中使用模块封装你的代码
在前端开发中，我们经常需要封装一些可复用的代码。传统的做法是使用全局变量和函数来组织代码，但是这样会容易导致命名空间污染和变量冲突。在 ECMAScript 2015 中，新添加了模块的概念，我们可以使用模块化的方式来封装我们的代码。本文将介绍如何在 ECMAScript 2015 中使用模块封装你的代码。
什么是模块
在 ECMAScript 2015 中，模块是一个独立的文件，它的代码被封装在一个私有作用域中。模块可以导出（export）一些公共的接口，而其他模块可以导入（import）这些接口来使用。模块的导出和导入是静态的，在模块加载的时候就确定了。
模块的导出和导入
导出
模块可以通过 export 关键字来导出接口。有两种 export 的方式：命名导出（named export）和默认导出（default export）。
-- -------------------- ---- ------- -- ---- ------ ----- ------- - -------- ------ -------- -------------- - -- --- - -- ---- ------ ------- ---------- - -- --- -
命名导出可以导出多个接口，而默认导出只能导出一个接口。注意，使用默认导出时，导出的接口没有名称，import 时需要自己起一个名称。
导入
模块可以通过 import 关键字来导入接口。有两种 import 的方式：命名导入（named import）和默认导入（default import）。
// 命名导入
import {varName, functionName} from './module.js';
// 默认导入
import defaultName from './module.js';命名导入可以导入多个接口，而默认导入只能导入一个接口。
实例
下面是一个使用模块封装的计数器的例子。
counter.js
-- -------------------- ---- ------- --- ----- - -- ------ -------- ---------- - ----- -- -- - ------ -------- ---------- - ----- -- -- - ------ -------- ---------- - ------ ------ -
app.js
import {increase, decrease, getCount} from './counter.js';
increase();
increase();
decrease();
console.log(getCount()); // 1在 app.js 中，我们使用 import 导入了 counter.js 中导出的 increase、decrease 和 getCount 函数，并在程序中调用了它们。通过使用模块化的方式，我们可以避免全局变量和函数的冲突，使代码更加安全和可维护。
总结
在 ECMAScript 2015 中，模块是一种封装代码的方式，它可以避免全局变量和函数的冲突，使代码更加安全和可维护。可以使用 export 导出接口，使用 import 导入接口，来实现模块封装。我们可以尝试使用模块化的方式来组织和封装我们的代码，使程序更加清晰和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ae1fb548841e9894a1b1b3