Blazor University (37)JavaScript 互操作 —— JavaScript 启动过程

原文链接: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 以供客户端交互。

614f8ef55b183fe20fca36274262de79.png

参考资料

[1]

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/284621.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

时代聚焦AI安全——可解释性

今年的NIPS多集中在人工智能安全上&#xff0c;此外精彩的部分还有凯特克劳福德关于人工智能公平性问题上被忽视的主题演讲、ML安全研讨会、以及关于“我们是否需要可解释性&#xff1f;”可解释ML讨论会辩论。 值校准文件 逆向奖励设计是为了解决RL代理根据人类设计的代理奖励…

【BIM入门实战】渲染器Vray for 3d max 2018图文安装教程

VRay是由chaosgroup和asgvis公司出品的一款高质量渲染软件。VRay是业界最受欢迎的渲染引擎。基于V-Ray 内核开发的有VRay for 3ds max、Maya、Sketchup、Rhino等诸多版本,为不同领域的优秀3D建模软件提供了高质量的图片和动画渲染。方便使用者渲染各种图片。 Vray for 3d max …

Android--Activity四种启动模式

launchMode在多个Activity跳转的过程中扮演着重要的角色&#xff0c;它可以决定是否生成新的Activity实例&#xff0c;是否重用已存在的Activity实例&#xff0c;是否和其他Activity实例公用一个task里。这里简单介绍一下task的概念&#xff0c;task是一个具有栈结构的对象&…

Hibernate初探

Hibernate对数据库结构提供了较为完整的封装&#xff0c;Hibernate的O/R Mapping实现了POJO 和数据库表之间的映射&#xff0c;以及SQL 的自动生成和执行。程序员往往只需定义好了POJO 到数据库表的映射关系&#xff0c;即可通过Hibernate 提供的方法完成持久层操作。程序员甚至…

【BIM入门实战】InfraWorks2018图文安装教程

Autodesk InfraWorks是易于使用的草图绘制工具,适用于土地规划师和基础设施设计师。AutodeskInfraWorks可以生成可视化的高级模型,而无需借助辅助,可以独立进行建模的BIM可视化软件。 InfraWorks2018软件预览: 双击安装包进行安装。 自解压中,等待即可。 点击【安装】。 点…

有点酷,使用 .NET MAUI 探索太空

设计 我准备用 .NET Maui 实现一个非常有意思的 "前往太空" 的程序。第一步&#xff0c;需要图片素材&#xff0c;我使用了 Aan Ragil 的一组非常棒的 Dribbble 素材图片。当然&#xff0c;你也可以在最下面的链接进行下载。实现 这个应用程序的完整源代码可以在 G…

实例讲解——系统登录

一&#xff0c;程序分析 首先使用参数的方式输入用户名和密码&#xff0c;所以&#xff0c;首先要判断输入参数的个数是否合法&#xff0c;如果不合法&#xff0c;则必须提示程序执行不对&#xff0c;并退出。 如果正确输入&#xff0c;则可以进行密码和用户名的验证&#xff0…

【Microsoft Office】Word 2019空格下划线不显示的解决办法

解决办法&#xff1a;点击【文件】→【选项】→【高级】选项卡→勾选【为尾部空格添加下划线(U)】&#xff0c;解决&#xff01;

1.安装

转自&#xff1a;http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html Mocha&#xff08;发音"摩卡"&#xff09;诞生于2011年&#xff0c;是现在最流行的JavaScript测试框架之一&#xff0c;在浏览器和Node环境都可以使用。 所谓"测试框…

SkiaSharp 之 WPF 自绘弹跳球(案例版)

熟悉下SkiaSharp的基础操作&#xff0c;这次搞个弹跳球效果&#xff0c;实现后&#xff0c;发现效果还真不错。大概效果如下:原理分析先是实现了网格效果&#xff0c;这个比较简单&#xff0c;直接横线&#xff0c;竖线&#xff0c;就OK了。另外一个就是随机一个圆形&#xff0…

Windows11 发布更新 Insider Preview Build 22000.100

微软今天凌晨向开发频道中的所有用户发布Windows 11 Insider Preview Build 22000.100&#xff01; 变化和改进 我们已经开始在 Dev Channel 中将 Chat 从 Microsoft Teams 推广到 Insiders。不是每个人都会马上看到&#xff0c;任务栏右下方的隐藏图标弹出窗口已更新&#x…

常见RGB格式

计算机世界中&#xff0c;最终对于颜色和画面的显示&#xff0c;更多的采用的是RGB模式&#xff0c;这里记录一下常见的RGB格式。任何计算机设备以及智能终端等&#xff0c;呈现在我们眼前的色彩实际上便是红绿蓝三基色不同的组合&#xff0c;RGB实际上就是三基色的组合&#x…

《ASP.NET Core 6框架揭秘》实例演示[04]:自定义依赖注入框架

ASP.NET Core框架建立在一个依赖注入框架之上&#xff0c;已注入的方式消费服务已经成为了ASP.NET Core基本的编程模式。为了使读者能够更好地理解原生的注入框架框架&#xff0c;我按照类似的设计创建了一个简易版本的依赖注入框架&#xff0c;并它命名为“Cat”。本篇提供的四…

【QGIS入门实战精品教程】4.8:QGIS如何下载SRTM数字高程模型DEM?

本文讲解QGIS中下载SRTM数字高程模型DEM,以黑龙江省塔河县为例。 图幅效果: 最终效果: 文章目录 1. 下载安装STRM Download插件2. 加载矢量数据,读取范围3. 下载STRM4. DEM拼接5. DEM裁剪1. 下载安装STRM Download插件 点击【插件】→【管理并安装插件】。 在搜索框中输入…

Win11 恢复设置Win10任务栏、快速启动栏及右键菜单(Win11 22000.100版本测试通过)

恢复方法 按下边路径添加 UndockingDisabled项&#xff0c;DWORD (32-bit)值为1&#xff1a; [HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Shell\Update\Packages] "UndockingDisabled"dword:00000001显示效果 已知问题 开始按钮点击无反应&a…

vue vue-router vuex element-ui axios 写一个代理平台的学习笔记(十一)构思商品页面...

在写商品页面product.vue之前&#xff0c;我应该思考一下&#xff0c;商品页面要实现那些功能&#xff0c;该不如布局&#xff1f;要实现的功能 1、所有商品列表的展示2、分类商品的列表展示 3、搜索商品或得列表展示4、单一商品的详细页面5、商品列表分页功能6、还没想到的...…

【ArcGIS Pro微课1000例】0019:ArcGIS Pro从海洋的视角看世界---海洋投影(Spilhaus Projection)

从海洋的视角看世界: 世界地图大多是以陆地为主要载体,如果以海洋为主角,就需要使用一种海洋投影。该投影以Spilhaus博士的名称命名。ArcGIS Pro自2.5版本以来提供了Spilhaus Projection。 投影效果预览: 接下来演示ArcGIS Pro 2.8中海洋投影的转换方法: 1. 新建一个工程…

有人撸了个网页版win11,惊艳!

演示地址&#xff1a;https://win11.blueedge.me/ Github地址&#xff1a;https://github.com/blueedgetechno/windows11

Vue3+.NET6+C#10,最近优质前后端分离项目汇总

据说80%的WEB开发都是管理后台&#xff0c;一套开源的优秀管理后台开发模板堪称福音&#xff01;分享一套Vue3 Axios TS Vite Element Plus .NET 6 WebAPI JWT SqlSugar的前后端分离架构的通用管理后台源码数据库脚本&#xff0c;还有与之配套录制的一组视频教程&#xff0c;全…

C++ 对象的内 存布局(下)

原文地址&#xff1a;http://blog.csdn.net/haoel/article/details/3081385 (注:看本文的时候由于宿舍快断电了,来不及细看,所以怕自己忘记,先贴出来.不排除文章有错误,大家自己测试一下.) 重复继承 下面我们再来看看&#xff0c;发生重复继承的情况。所谓重复继承&#xff0c;…