浏览器中 JavaScript 模块的意义何在？答案

【问题标题】：What is the point of JavaScript modules in browsers?浏览器中 JavaScript 模块的意义何在？
【发布时间】：2020-07-17 11:30:05
【问题描述】：

所以我目前正在从事编码项目，当我四处寻找解决特定问题的解决方案时，我遇到了“模块”。虽然我之前听说过这个术语，但我认为值得研究一下模块的实际含义以及它们的使用方式。

根据我收集到的信息，模块是“一段代码”。无论是存在于一个 JavaScript 文件中的函数、变量、类，都可以从另一个 JavaScript 文件导出/导入。

这似乎有点毫无意义 - 如果我可以从另一个文件中使用它们，为什么还要麻烦导出脚本/脚本集？

这是我正在讨论的一个例子：

// File 1 - adding.js

var c;

function add(a, b) {
    c = a + b;
    return c;
}

// File 2 - main.js

var d;
d = add(6, 4);

据我所知，这可行，main.js 将能够访问adding.js 中的脚本，而无需导出add() 函数。

可能在使用非浏览器 JavaScript 时会有所不同，或者我误解了什么是模块，但如果是这样，为什么还要使用模块？

【问题讨论】：

因为将所有内容作为全局管理是背后的巨大痛苦。尝试添加 5 个库/文件。现在确保每个都在它需要之后加载。现在更新一个。哦，它有一个新的要求——在正确的地方添加它。现在意识到您将不会拥有 5 个库，但可能有 15-20 个。尝试离开一个项目 6 个月然后再回来 - 你记得每个项目的用途吗？哪个被用到了？
哦，当您添加 File12 时会发生什么，它也公开了一个全局 add 函数，但它的工作方式略有不同？也许它将所有论点都变成了肯定的。您甚至可能几个月都没有注意到 add(var1, var2) 在 var2 = -10 时不起作用。
如果您的整个程序是一个将两个数字相加的函数，那么，是的，您可能不需要用于管理代码复杂性的工具。不过，有些程序往往会变得比这更复杂。
最好不要污染全局命名空间。你的例子就是这样做的......
@MattSchofield：取决于如何定义“必需品”。有些人喜欢让一切都保持全局（不仅仅是在 JavaScript 中），并依靠足够的逻辑来使其工作。有些人不喜欢现代 IDE，更喜欢使用简单的文本编辑器，他们经常声称程序员应该能够使其工作。可以使用足够多的电线和烙铁对 Web 服务器进行编程，但维护起来会很困难。必要性通常是一种意见，或由正在构建的系统的特定需求驱动。

标签： javascript function module

【解决方案1】：

是的，你是对的，你不需要export添加函数，但你应该注意导入文件的顺序。这意味着您应该在导入 main.js 之前导入 adding.js。

<html>
    <head>
        ...
    </head>

    <body>
        ...
        <script src="adding.js">
        </script>
        <script src="main.js">
        </script>
    </body>
    
</html>

【讨论】：

这不是真正的答案