如何在Asp.Net Core ViewComponents中避免加载重复的JavaScript脚本？

本文共计307个文字，预计阅读时间需要2分钟。

例如，我有这个PrimitiveViewComponent组件：如果我不止一次调用它们，就像这样：

例如,我有这个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函数,如何防止它们被多次包含,以及在哪里存储它们？

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

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

这是视图组件代码.

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

希望能帮助到你