如何防止部分视图中的脚本多次加载并在同一页面中多次使用部分时导致错误

Question

在 ASP.NET MVC 中工作，我创建了一个在同一页面上呈现 2 次的局部视图。 我的问题是JavaScript 包含的次数与部分视图一样多，并且 JavaScript 不喜欢重新定义类。

我的问题是：如何在部分视图中包含 JavaScript 以使其保持模块化，但仅在页面中包含一次？ 我对需要将 .js 文件与部分视图的内容分开包含的解决方案不感兴趣，例如

<script src="some.js"></script>
@Html.Partial("some/partial.cshtml")
@Html.Partial("some/partial.cshtml")

但我可以接受包含在局部视图中的单独的.js 文件。 局部视图应包含使其工作所需的一切。

我的代码结构如下：

<div id=@ViewBag.id></div>
<script>
    class MyClass{ 
        constructor(divName){
            this._divId = divId;
        }

        doSomething(){
            /* do stuff with element that has id of divId */ 
        }
    }
</script>

然后，在调用文件中，我有

<body>
    @Html.Partial("/Views/MyPartial.cshtml", new ViewDataDictionary() { { "id", "id_1"} })
    @Html.Partial("/Views/MyPartial.cshtml", new ViewDataDictionary() { { "id", "id_2"} })
</body>
<script>
    $().ready(function(){
        id1Functionality = new MyClass("id_1"); // please forgive the poor naming :-)
        id2Functionality = new MyClass("id_2");

        id1Functionality.doSomething();
        id2Functionality.doSomething();
    })
</script>

Answer 1

一种解决方案是实现 Html 辅助扩展 function ，它只会加载一次脚本。 见下文。 （这也适用于 CSS 和其他包含的文件）。

为每个 HttpContext 实现 HtmlHelper class 和私有支持 class 的扩展作为 singleton。

public static class YourHtmlHelperExtensionClass 
{
    private class TagSrcAttrTracker
    {
        private TagSrcAttrTracker() { }

        public Dictionary<string, string> sources { get; } = new Dictionary<string, string>();

        public static TagSrcAttrTrackerInstance {
            get {
                IDictionary items = HttpContext.Current.Items;
                const string instanceName = "YourClassInstanceNameMakeSureItIsUniqueInThisDictionary";

                if(!items.Contains(instanceName)) 
                    items[instanceName] = new TagSrcAttrTracker();

                return items[instanceName] as TagSrcAttrTracker;
            }
        }
    }

    public static MvcHtmlString IncludeScriptOnlyOnce(this HtmlHelper helper, string urlOfScript) 
    {
        if(TagSrcAttrTracker.Instance.sources.ContainsKey(urlOfScript))
            return null;

        TagSrcAttrTracker.Instance.sources[urlOfScript] = urlOfScript;

        TagBuilder script = new TagBuilder("script");
        scriptTag.MergeAttribute("src", urlOfScript);

        return MvcHtmlString.Create(script.ToString());
    }
}

然后，将 JavaScript 和其他代码分离到单独的文件中。

Example.js 文件内容

class MyClass{
    myFunction() {
        constructor(divId){
            this._divId = divId
        }

        doSomething() {
            // do something with a div with id == divId
        }
    }
}

Example.cshtml 部分视图的文件内容

<link rel="stylesheet" type="text/css" href="~/Content/CustomCSS/MyPartialView.css"/>

<div id="@ViewBag.id">
    Some content!  Yay!
</div>

@Html.IncludeScriptOnlyOnce("/Scripts/CustomScripts/MyPartialView.js")

使用局部视图的 Example.cshtml 文件

...
<body>
    <h1>Here is some content!</h1>
    @Html.Partial("/Views/MyPartial.cshtml", new ViewDataDictionary() { { "id", "id_1"} })
    @Html.Partial("/Views/MyPartial.cshtml", new ViewDataDictionary() { { "id", "id_2"} })
    @Html.Partial("/Views/MyPartial.cshtml", new ViewDataDictionary() { { "id", "id_3"} })
</body>
<script>
$().ready(
    const id1Functionality = new MyClass("id_1") // forgive the poor naming :-)
    const id2Functionality = new MyClass("id_3")
    const id3Functionality = new MyClass("id_2")

    id1Functionality.doSomething();
    id2Functionality.doSomething();
    id3Functionality.doSomething();
)
</script>

部分视图可能被多次包含，并且 JavaScript 与部分视图一起打包，但 .js 文件仅包含在页面中一次，因此浏览器不会抱怨 MyClass 被多次声明。

如何防止部分视图中的脚本多次加载并在同一页面中多次使用部分时导致错误

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-05-26 20:31:32

如何防止部分视图中的脚本多次加载并在同一页面中多次使用部分时导致错误

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-05-26 20:31:32

解决方案1
0 已采纳 2020-05-26 20:31:32