Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/silverlight/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
在Blazor客户端加载JS模块的最佳实践是什么?_Blazor_Blazor Client Side_Blazor Webassembly_Asp.net Blazor - Fatal编程技术网

在Blazor客户端加载JS模块的最佳实践是什么?

在Blazor客户端加载JS模块的最佳实践是什么?,blazor,blazor-client-side,blazor-webassembly,asp.net-blazor,Blazor,Blazor Client Side,Blazor Webassembly,Asp.net Blazor,在Blazor中,有几个用于执行JavaScript代码的选项: 将js文件加载到IJSObjectReference的实例中,并对其调用InvokeAsync: Blazor组件的代码隐藏文件: AfterRenderAsync(bool firstRender)上的受保护重写异步任务 { if(firstRender) { IJSObjectReference模块=等待JSRuntime.InvokeAsync(“导入”,“脚本1.js”); wait module.InvokeVoidAs

在Blazor中,有几个用于执行JavaScript代码的选项:

  • 将js文件加载到IJSObjectReference的实例中,并对其调用InvokeAsync
  • Blazor组件的代码隐藏文件:

    AfterRenderAsync(bool firstRender)上的受保护重写异步任务
    {
    if(firstRender)
    {
    IJSObjectReference模块=等待JSRuntime.InvokeAsync(“导入”,“脚本1.js”);
    wait module.InvokeVoidAsync(“sampleFunction1”);
    }
    }
    
  • 将js文件作为脚本添加到HTML标记中,并在IJSRuntime实例上调用InvokeAsync
  • index.html:

    
    
    Blazor组件的代码隐藏文件:

    AfterRenderAsync(bool firstRender)上的受保护重写异步任务
    {
    if(firstRender)
    {
    等待JSRuntime.InvokeVoidAsync(“sampleFunction1”);
    }
    }
    
    这两种方法都有效,但从性能、代码维护和代码清洁度的角度来看,哪种方法更可取?

    我将使用第一种方法(在OnAfterRenderAsync期间导入),下面是我的解释:

  • 如果您将js作为特定组件的扩展来编写,您将获得一个可重用、可分解和可维护的js模块,这可以很容易地被将来的单元测试/重构所覆盖

  • 未使用但加载到浏览器中的js内容的百分比将很小,而且效率更高。最终用户不应收到“以防万一”的js束。遗憾的是blazor本身并没有使用这样的前端优化,并且加载了很多“以防万一”的代码。

  • 无需在render中放置javascript链接。它带来了一些好处:

    • 预渲染html不受关键渲染路径阻止程序()的污染
    • 在将其标记为async以修复渲染阻塞之后,无需等待加载它来调用某些方法:)
    • 最终用户的网络开销更小
    • 与blazor()生成的PWA service-worker.js的开箱即用集成