如何避免將 JavaScript ES6 模塊導出添加到全局范圍以用於普通腳本塊？

Question

到目前為止，我已經設法避免了硬核 JavaScript 編程，但看起來這種情況即將結束。 在為一個重要的新項目做准備時，我試圖了解 2018 年的最佳實踐。我閱讀了很多關於不同模塊方法的文章，並使用了一些類似 Dojo 的基於 AMD 的模塊。 在思考如何設計自己的模塊架構時，似乎 ES6 是進行新開發的正確方法。 到目前為止，我了解導入/導出語法，並且已經使用了一些簡單的模塊。 但是我目前將模塊加載回 HTML 並使用它們的技術“感覺不對”。 讓我總結一下我到目前為止所做的工作。

模塊 foo.js

import (bar} from '/Scripts/bar.js'

export function foo() {
    bar();
    console.log("I'm in foo");
}

模塊 bar.js

export function bar() {
    console.log("I'm in bar");
}

索引.html

<head>
    <script type="module">
        import {foo} from "/Scripts/foo.js"
        window.foo = foo;   // save for later but "feels wrong"
   </script>
</head>

<body>
    <script>
        // foo();      // doesn't work - foo by itself is only defined in the module scope
        window.foo();  // unless "stashed" somewhere else
    </script>
</body>

也許這是正確的技術（我發現了一個與我基本相同的舊問題），但我仍然覺得我不應該像這樣污染全局命名空間。 假設這很糟糕，我還應該做什么？

Answer 1

如果您希望該功能在全局范圍內可用，那么實現這一目標的唯一方法就是將其放在全局范圍內（也稱為window對象）。

然而，將事物放在全局范圍內的一個更好的方法是擁有某種包含所有globals對象，而不是將函數/屬性名稱直接放在可能導致與其他對象沖突的window對象上第三方庫。

所以你會說globals.foo()而不是window.foo()

Answer 2

通過將函數重新導入到許多模塊，可以在任何地方訪問該函數。

您只需要將對象添加到全局范圍內，在該范圍內跨模塊維護和需要狀態。

Answer 3

創建文件 ajax.js：生成類，示例 Ajax，以導出 Ajax 結束該類。
創建一個 main.js 文件，type=module
放入 main.js：帶有 import { Ajax } from "ajax.js" 的 Ajax 類
在 main.js 中創建：一個帶有 var ajax = new Ajax() 的新類；
然后將該變量放在一個窗口對象中：window.ajax = ajax。
現在您已准備就緒，可以在應用程序的任何地方使用該 ajax 對象。
如果您將所有代碼捆綁在類中並將它們放在相同命名的文件中，您將擁有一個非常模塊化的應用程序，

如何避免將 JavaScript ES6 模塊導出添加到全局范圍以用於普通腳本塊？

問題描述

3 個解決方案

解決方案1
1 已采納 2018-09-24 17:24:07

解決方案2
0 2019-12-11 08:48:31

解決方案3
0 2020-05-07 19:03:13

如何避免將 JavaScript ES6 模塊導出添加到全局范圍以用於普通腳本塊？

問題描述

3 個解決方案

解決方案1 1 已采納 2018-09-24 17:24:07

解決方案2 0 2019-12-11 08:48:31

解決方案3 0 2020-05-07 19:03:13

解決方案1
1 已采納 2018-09-24 17:24:07

解決方案2
0 2019-12-11 08:48:31

解決方案3
0 2020-05-07 19:03:13