解决变量重复定义的问题 has already been declared

oliver.chau

于 2025-03-03 17:43:33 发布

阅读量665

点赞数 4

分类专栏：前端开发文章标签：前端

本文链接：https://blog.youkuaiyun.com/zybsjn/article/details/145994745

版权

前端开发专栏收录该内容

17 篇文章

订阅专栏

在 Django HTML 模块化拆分后，如果你的 JavaScript 报错：

Uncaught SyntaxError: Identifier 'isSimplifiedMode' has already been declared

这通常意味着 某个 JavaScript 变量被重复声明，可能的原因包括：

重复导入了 JavaScript 文件（多个 HTML 模板引用同一个 JS）。
多个 Django 模板包含了相同的 <script> 代码，导致变量重复声明。
变量声明方式不对，例如 let/const 在多个 <script> 作用域下重复定义。

解决方案

✅ 方案 1：检查是否重复引入 JS

在 Django 模块化拆分时，确保 公共 JS 只加载一次。

🔹 方式 1：将公共 JS 放在 `base.html` 里

base.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <script src="{% static 'js/main.js' %}"></script> <!-- 仅加载一次 -->
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

子模板（example.html）

{% extends "base.html" %}
{% block content %}
    <h1>子页面</h1>
{% endblock %}

👉 确保 main.js 不会在多个子页面重复加载。

✅ 方案 2：使用 `var` 代替 `let`/`const`

如果变量 isSimplifiedMode 可能会被重复声明，可以用 var 代替 let/const：

var isSimplifiedMode = true;

⚠️ 注意：var 变量会被覆盖，如果 isSimplifiedMode 需要全局唯一，建议方案 3。

✅ 方案 3：使用 `window` 变量避免重复定义

可以在 window 上存储变量，确保它不会重复定义：

if (typeof window.isSimplifiedMode === "undefined") {
    window.isSimplifiedMode = true;
}

这样，如果 isSimplifiedMode 已经存在，就不会再次声明，避免报错。

✅ 方案 4：把 JS 代码包裹在 `IIFE` 里

使用 IIFE（立即执行函数） 避免变量污染：

(function() {
    let isSimplifiedMode = true;
    console.log("模式状态：", isSimplifiedMode);
})();

⚡ 好处：

变量不会污染全局作用域，在模块化 Django 代码时更安全。
不会重复声明，因为每个 IIFE 都是一个独立作用域。

✅ 方案 5：用 `ES6 module`

如果你的项目支持 ES6，可以使用 import/export 让变量在不同模块中引用，而不会重复声明：

// utils.js
export const isSimplifiedMode = true;

// main.js
import { isSimplifiedMode } from "./utils.js";
console.log(isSimplifiedMode);

但需要确保 HTML 里 <script> 采用 type="module"：

<script type="module" src="{% static 'js/main.js' %}"></script>

总结

方案	适用场景	解决方式
✅ 方案 1	JS 重复加载	确保 `base.html` 只引入一次 JS
✅ 方案 2	变量重复定义	改用 `var`（不推荐）
✅ 方案 3	变量不应重复声明	用 `window.isSimplifiedMode` 保护变量
✅ 方案 4	避免作用域冲突	用 `IIFE` 包裹代码
✅ 方案 5	现代前端（Vue/React）	使用 `import/export`（需 `module`）