CSHTML视图中JavaScript变量重复声明报错，求原因与解决方法

问题描述 #

在IndexJson.cshtml视图中定义了如下脚本：

@section Scripts{
    @await Html.PartialAsync("_ValidationScriptsPartial")
    <script type="text/javascript">
        var area = "@ViewContext.RouteData.Values["area"].ToString()"
    </script>
}

通过左侧菜单发起Ajax请求加载视图到容器：

function MenuClickItem(item) {
    $.ajax({
        type: "GET",
        url: item.dataset.area + "/" + item.dataset.controller + "/IndexJson",
        success: function (result) {
            $("#main-container").html(result);
        },
        error: function (res) {
            console.log("Error:" + res)
        }
    });
}

再次访问该视图时，报错：Identifier 'area' has already been declared

原因分析 #

• 用var声明的area变量属于全局作用域（直接在<script>标签顶层声明，未包裹在函数或块级作用域内）。
• 第一次加载视图时，脚本执行后全局环境已存在area变量；第二次通过Ajax加载视图并插入页面时，脚本再次执行，重复使用var声明同名全局变量，触发语法报错。

解决办法 #

提供几种可行方案，按需选择：

1. 改用块级作用域声明（推荐） #

用let或const替换var，它们支持块级作用域，每次<script>块都是独立作用域，不会重复声明：

<script type="text/javascript">
    let area = "@ViewContext.RouteData.Values["area"].ToString()"
    // 若值无需修改，用const更合适
    // const area = "@ViewContext.RouteData.Values["area"].ToString()"
</script>

2. 检查变量是否存在再声明 #

声明前判断全局环境中是否已存在该变量，避免重复声明：

<script type="text/javascript">
    if (typeof area === 'undefined') {
        var area = "@ViewContext.RouteData.Values["area"].ToString()"
    }
</script>

3. 将变量包裹在局部作用域内 #

把变量放在立即执行函数表达式（IIFE）中，隔离作用域，避免污染全局：

<script type="text/javascript">
    (function() {
        var area = "@ViewContext.RouteData.Values["area"].ToString()"
        // 在此作用域内使用area变量，不会影响全局
    })()
</script>

4. 使用命名空间管理变量 #

创建全局命名空间对象，把area作为该对象的属性，避免直接声明全局变量：

<script type="text/javascript">
    // 确保命名空间存在
    window.MyApp = window.MyApp || {}
    MyApp.area = "@ViewContext.RouteData.Values["area"].ToString()"
</script>

内容的提问来源于stack exchange，提问作者pikk