1.前言

在Blazor中，通常的做法是将JavaScript脚本放置在wwwroot/index.html（对于Blazor WebAssembly）或Pages/_Host.cshtml（对于Blazor Server）中，以便在应用程序中执行这些脚本。然而，这种全局加载方式存在两个主要问题：一是它会导致所有JS方法都被加载，即使某些方法仅在特定组件中需要使用，从而影响了加载性能；二是它可能造成全局命名空间的污染。

为了解决这些问题，我们需要实现JavaScript的隔离。通过隔离，我们可以确保每个组件仅加载和使用其所需的JavaScript方法，从而提高加载速度并减少全局命名空间冲突的风险。接下来，我们将探讨如何在Blazor中实现JavaScript的按需加载和隔离。

2. 标准方式

从.NET 5.0开始，Blazor引入了JavaScript隔离功能，允许在标准JavaScript模块中按需加载和执行JavaScript代码。这一特性可以通过在wwwroot目录下创建独立的js文件并导出所需函数来实现。在Blazor组件中，可以利用IJSRuntime接口将模块作为IJSObjectReference导入，并从该模块中调用导出的JavaScript函数。这种方式实现了JavaScript代码的按需加载和隔离，提高了应用程序的性能并减少了全局命名空间的冲突。 在Blazor中，我们可以利用OnAfterRenderAsync方法在组件渲染后执行某些操作。如果这是首次渲染（firstRender为true），我们可以异步导入一个JavaScript模块。这个模块的导入和调用都通过IJSRuntime接口实现，非常方便。

以下是一个简单的示例：

protected override async Task OnAfterRenderAsync(bool firstRender){ if (firstRender) { var module = await JS.InvokeAsync("import", "./scripts.js"); // 现在，你可以从module中调用JavaScript函数了。 }}

在上述代码中，我们使用了JS.InvokeAsync方法来异步导入一个JavaScript模块。这个方法接受两个参数：一个是模块的名称或路径，另一个是返回的类型（在这里是IJSObjectReference）。一旦模块被成功导入，我们就可以从该模块中调用任何导出的JavaScript函数了。

此外，我们还提供了一个示例函数TriggerPrompt，它展示了如何从导入的模块中调用一个JavaScript函数。这个函数接受一个字符串参数并返回一个字符串结果。通过这种方式，我们可以轻松地在Blazor应用程序中与JavaScript代码进行交互。

3. 使用LibMan方式

然而，这种方式的限制在于文件必须放置在wwwroot目录中。但更理想的情况是，JS文件能够与相应的Blazor组件保持一致，例如将它们放置在一起。 右键单击项目，选择“管理客户端库”，并编辑libman.json文件，内容如下：

"version": "1.0", "defaultProvider": "filesystem", "libraries": [ { "library": "Pages", "files": [ "FetchData.razor.js" ], "destination": "wwwroot/" } ]

接下来，右键单击libman.json文件，选择“生产时启用还原客户端库”。

之后，修改FetchData.razor代码，增加如下内容：

protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { var module = await JS.InvokeAsync("import", "./FetchData.razor.js"); // 在此处添加对JS模块的调用逻辑 } }

完成上述步骤后，再次运行应用程序，应该能够正常工作。

4. 内嵌资源方式

虽然之前的方法能够实现所需功能，但JS文件实际上还是被放置在wwwroot目录下，只是通过工具进行了复制操作。若你希望避免在wwwroot目录下出现多余文件，可以尝试以下方法。

修改JS文件的属性“生成操作”为“嵌入的资源”。

接着，在FetchData.razor代码中做出相应调整，以将资源文件作为JS代码进行加载：

protected override async Task OnAfterRenderAsync(bool firstRender){ if (firstRender) { string scriptContent; using (var stream = this.GetType().Assembly.GetManifestResourceStream(this.GetType().Assembly.GetName().Name + ".Pages.FetchData.razor.js")) using (var sr = new System.IO.StreamReader(stream)) { scriptContent = await sr.ReadToEndAsync(); } var module = await JS.InvokeAsync("import", "data:text/javascript;base64," + Convert.ToBase64String(Encoding.UTF8.GetBytes(scriptContent))); // 在此处添加对JS模块的调用逻辑 }}

完成上述步骤后，再次运行应用程序，应该能够实现预期效果。 + Convert.ToBase64String(System.Text.Encoding.UTF8.GetBytes(scriptContent)));

再次运行应用程序，一切运行正常，且wwwroot目录下并未新增任何文件。

综上所述，我们今天探讨了JavaScript脚本的几种加载方式，包括标准方法和两种变种。你可以根据自己的需求和偏好来选择适合的方法。