Blazor University （37）JavaScript 互操作 —— JavaScript 启动过程

Posted 2022-07-28 dotNET跨平台

原文链接：https://blazor-university.com/javascript-interop/javascript-boot-process/

JavaScript 启动过程

在 Blazor 启动过程中，浏览器将在 Blazor 初始化之前创建 html 文档，这意味着从引导 HTML 引用的任何 JavaScript 都将立即加载，并且在这些 JavaScript 文件中自动执行的任何代码都将在 Blazor 有机会在初始化之前执行。

源代码^[1]

要观察这一点，请创建一个新的 Blazor 服务器端应用程序：

• 编辑 /App.razor

• 添加以下 OnInitialized 方法。

@code 
  protected override void OnInitialized()
  
    System.Diagnostics.Debug.WriteLine("Blazor initialised: " + DateTime.Now.ToString("mm:ss.fff"));
    base.OnInitialized();
  

• 在 /wwwroot 文件夹下创建一个名为 scripts 的文件夹

• 在该文件夹中创建一个名为 JavaScriptBootProcess.js 的文件 -添加以下脚本

const now = new Date();
console.log('JavaScript initialised: ' + now.getMinutes() + ":" + now.getSeconds() + "." + now.getMilliseconds());

• 编辑 /Pages/_Host.cshtml

• 找到文本“ServerPrerendered”并将其更改为“Server”

• 在页面底部附近现有的 <script> 标记下方，添加以下标记

<script src="~/scripts/JavaScriptBootProcess.js"></script>

运行应用程序并查看浏览器的控制台输出和 Visual Studio 的输出窗口。比较输出，我们将看到如下内容：

JavaScript initialised: 15:20.317
Blazor initialised: 15:20.466

由于这种行为，JavaScript 不可能立即调用 .NET 方法。使用 JavaScript 互操作时，我建议尽可能从 Blazor 端启动通信。

ServerPrerendering

如果我们现在编辑同一个项目并将渲染模式更改回 ServerPrerendered，我们将看到如下内容：

Blazor initialised: 42:22.559
JavaScript initialised: 42:22.631
Blazor initialised: 42:22.690

当用户第一次访问我们应用的 URL 时，Blazor 将在浏览器之外呈现 App.razor 组件并将生成的 HTML 发送到浏览器。之后，初始化 JavaScript，最后初始化 Blazor 以供客户端交互。

参考资料

[1]

源代码: https://github.com/mrpmorris/blazor-university/tree/master/src/JavaScriptInterop/JavaScriptBootProcess