在前端开发中，我们通常需要使用不同的 JavaScript 文件来组织代码、提高可维护性和重用性。在过去，我们通常使用 <script> 标签来引入这些文件。但是，随着 ES6 的到来，我们现在可以使用带有 JavaScript 导入语法的括号来改善我们的代码管理。
导入语法的基础知识
ES6 引入了一种新的导入语法，它允许我们以声明方式导入其他模块中的功能。这个语法如下所示：
import { thing1, thing2 } from './my-module.js';其中，{} 是用于指定要导入的功能的对象字面量，而 './my-module.js' 是指定要从中导入功能的模块路径。
优点
使用带有 JavaScript 导入语法的括号有以下几个优点：
模块化
使用导入语法可以使我们更好地组织代码。我们可以将相关功能分组到一个模块中，并只导出必要的接口。这样，我们就可以避免全局命名冲突，并使代码更易于理解和维护。
可靠性
使用导入语法可以确保依赖项已经被正确加载。当我们导入一个模块时，任何未定义的变量或函数都会在编译时引发错误。这有助于我们避免运行时错误和代码中的隐式依赖关系。
可测试性
使用导入语法可以使我们更容易地编写可测试的代码。我们可以轻松地替换模块的任何部分，以模拟和隔离不同的功能。这样，我们就可以更好地测试我们的应用程序，而不必在环境中运行它们。
示例
以下是一个简单的示例，说明如何在 Webpack 中使用带有 JavaScript 导入语法的括号：
-- -------------------- ---- ------- -- -------- ------ -------- ------ -- - ------ - - -- - -- -------- ------ - --- - ---- ------------- ------------------ ---- -- -- -
在此示例中，我们定义了一个 add 函数，并从另一个文件中导入它。我们还展示了如何使用导入函数来执行导入操作，以及如何使用导出函数来公开功能。
总结
使用带有 JavaScript 导入语法的括号可以使我们更好地组织和管理代码，并提高代码的可靠性和可维护性。虽然这种语法需要一些学习和适应，但一旦掌握，它将成为您前端开发工具箱中不可或缺的一部分。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/11375
