时间戳

首页 > 解决方案 > 具有 Razor 语法的 Javascript 命名空间？

javascript - 具有 Razor 语法的 Javascript 命名空间？

问题描述

我在嵌入 .cshtml 文件（部分视图）中的脚本片段中大量使用了这种“Javascript 命名空间”模式：

<script type="text/javascript">
    (function (MyNamespace) {
        MyNamespace.PublicFunc1 = function (p1, p2) {
            localFunc1('abc');
            MyNamespace.PublicFunc2(p1, p2, 'abc');
        }

        MyNamespace.PublicFunc2 = function (p1, p2, p3) {
            // ...
        }

        localFunc1(p1) {
            // ...
        }
    }(window.MyNamespace = window.MyNamespace || {}));
</script>

它就像一个魅力，我可以从脚本片段之外调用这些MyNamespace.PublicFunc1和函数。MyNamespace.PublicFunc2

当需要同时渲染两个或更多部分视图时，就会出现问题，因此任何外部 JS 代码调用，例如，MyNamespace.PublicFunc1将不再能够这样做，因为会有两个或更多实例功能。

为了解决这个问题，我尝试通过 Razor 语法为这些脚本使用服务器端唯一的命名空间 ID/名称，即：

@{
    // server-side variable with a unique namespace identifier/name
    string _namespace = Model.MyUniqueNamespace;
}

<script type="text/javascript">
    (function (@_namespace) {
        @_namespace.PublicFunc1 = function (p1, p2) {
            @_namespace.PublicFunc2(p1, p2, 'abc');
        }

        @_namespace.PublicFunc2 = function (p1, p2, p3) {
            // ...
        }

        localFunc1(p1) {
          // ...
        }
    }(window.@_namespace = window.@_namespace || {}));
</script>

这种方法的问题是整个@_namespace.PublicFunc1部分都由 Razor 和服务器端处理——这是有道理的，但不是我需要的；我只需要该@_namespace部分是服务器端的，而它周围的所有其他部分都是客户端/JS。

我的问题是：

  1. 有没有办法使用 Razor 语法解决这个问题？
  2. 是否有另一种/更好的方法来处理这些场景（通过 Javascript 魔术），而不必编写一个成熟的 JS 插件/小部件/库（对于每个这样的本地化/特定于页面的脚本片段来说似乎太多了）？

标签： javascriptrazor

解决方案

将其更改为@(_namespace)应该适用于问题 1。对于问题 2，重要的是要注意您传递给函数的变量名并不...真的...很重要。IE：

(function(foo) {
  foo.func1 = function() { ... }
})(window.bar = window.bar || {});

这仍然会设置window.bar.func1。

推荐阅读