限制js文件內容的范圍

Question

我最近遇到了一種情況，我有 A.js、B.js 和 C.js。 所有這些 JS 文件都導入了相同的模塊。 （例如： const hello = require ("hello"); ）。 一起運行它們時，我在控制台中遵循 SyntaxError

Uncaught SyntaxError: Identifier 'home' has already been declared

我正在使用如下所示的 Script 標簽從 HTML 加載這些 JS 文件

<script src="../js/A.js"></script>
<script src="../js/B.js"></script>
<script src="../js/C.js"></script>

將每個 js 文件的內容移動到{ }大括號中是修復 SyntaxError 的一種選擇。

但我想知道這（{}）是否是正確的解決方案，或者我們是否有其他更好的解決方案來解決這種情況

Answer 1

一個常見的解決方案是使用IIFE （立即調用函數表達式）。 基本上，將您的代碼包裝在一個函數中並同時調用它。 這既保護了代碼的范圍，又防止了查看頁面的人在他們的開發人員工具中訪問您的數據。

(function() {
    /* your code here */
})();

一個更現代、更有爭議的更正確的解決方案是使用JavaScript 模塊。 然后您可以使用import而不是require ，並且您可以更像您對 Python 或 Java 所期望的那樣組織您的代碼。

<!-- index.html -->
<script type="module" src=".../module.js"></script>
<script type="module" src=".../src1.js"></script>
<script type="module" src=".../src2.js"></script>

// module.js
export const MESSAGE = "Hello, world!";

// src1.js (src2.js looks basically the same)
import { MESSAGE } from ".../module.js";
console.log("src1 says:", MESSAGE);

但是，一些瀏覽器不支持模塊。 為了解決這個問題，您可以使用捆綁程序（例如Webpack 、 Parcel或Rollup ）來編譯您的項目。 這些還提供其他功能（例如代碼縮小）。 但是對於一個小項目，使用 bundler 可能不值得付出努力（盡管如果你進入 web 開發，學習使用它們會很有幫助）。

Answer 2

將每個 js 文件的內容移動到 { } 大括號中是修復 SyntaxError 的一種選擇。

是的。 該語法錯誤僅是由重新聲明用let或const聲明的變量引起的，並且這些是塊范圍的，因此引入新塊可以解決該問題。

請注意， var s 和function s 會通過它泄漏（但重新聲明它們不會導致錯誤¹）：

 {
    function test() { }
 }

 test();

¹ 因為您通常需要強封裝，因為重新聲明全局變量通常會導致不可預測的副作用，我會使用 IIFE 或使用 ES 模塊。

Answer 3

將您的代碼包裹在匿名函數中始終是一個好習慣，如下所示

 (function(){ /* all your variables, and functions ... everything goes in here */ })();