javascript - 防止在 Asp.Net Core ViewComponents 中加载多个 JavaScript 脚本

Question

例如，我有这个 PrimitiveViewComponent:

<button type="button" onClick="sayHello"></button>
<script>
    function sayHello() {
        console.log("Hello")
    }
</script>

如果我多次调用它们，就像这样:

<div>@await Component.InvokeAsync("Primitive")</div>
<div>@await Component.InvokeAsync("Primitive")</div>
<div>@await Component.InvokeAsync("Primitive")</div>

这会产生歧义，因为函数 sayHello 将被包含三次，这是不必要的。

我应该如何为 ViewComponents 定义 JavaScript 函数，如何防止它们被多次包含，以及将它们存储在哪里？

Answer 1

我认为服务器端没有办法解决这个问题。但是使用 Javascript 和 JQuery 可以解决这个问题。

在这段代码中，我将脚本移动到 wwwroot 中 js 文件夹下的文件 scripts.js。加载页面时，我正在检查 SayHello 是一个函数还是未定义的，如果它是一个函数意味着它被加载到页面，如果它是未定义的，我正在使用 JQuery getscript 方法加载脚本。

这是 View 组件代码。

<button type="button" onClick="sayHello()">Hello</button>
<script>
    if (typeof sayHello !== 'function') {
        $.getScript( "/js/scripts.js" ).done(function( script, textStatus ) {
            console.log( textStatus );
        });
    }
</script>

希望对你有帮助