javascript - 限制js文件内容范围

Question

我最近遇到了一个情况，我有 A.js，B.js 和 C.js。所有这些 JS 文件都导入相同的模块。 (例如:const hello = require ("hello");)。 一起运行它们时，我在控制台中得到以下 SyntaxError

未捕获的语法错误:标识符“home”已被声明

我正在使用 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 modules .然后你可以使用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);

但是，一些浏览器不支持模块。为了解决这个问题，您可以使用 bundler (例如 Webpack 、 Parcel 或 Rollup )来编译您的项目。这些还提供其他功能(例如代码缩小)。但是对于一个小项目，使用 bundler 可能不值得付出努力(尽管学习使用它们会对您进行 Web 开发有所帮助)。