.NET开发者的机遇与Web Blazor基础(有彩蛋)

一.唠唠WebAssembly的发展历程

  目前有很多支持WebAssembly的项目,但发展最快的是Blazor,这是一个构建单页面的.NET技术,目前已经从Preview版本升级到了beta版本,微软计划在2020年5月发布Blazor的第一个版本。

  Blazor是什么?它是一项将C#和.NET都放入浏览器的Microsoft技术。它使用WebAssembly来工作,WebAssembly是一种高性能的管道,可以将代码预编译为紧凑的二进制格式。最重要的是,每个主流浏览器(包括移动版本)都支持WebAssembly。

  十年前,JavaScript统治世界还不是很明显。Flash和Silverlight也正在运行。这二个都需要使用浏览器插件来完成工作,并且都以不同的用户界面方法替换了HTML。这种方法使他们在功能方面遥遥领先于JavaScript,但随着移动互联网的出现,他们就慢慢过时。

  但随后从最初的Javascript再到微软的JScript和CEnvi的ScriptEase三足鼎立,再到最后的统一标准,当时微软凭借Windows系统捆绑Internet Explorer的先天优势击溃Netscape后,两大巨头就此进入了长达数年的静默期,JavaScript就是在这样的情况下被构想出来的,当时的浏览器之王,Netscape Navigator创始人Marc Andreessen认为Netscape需要一种“glue language”来支持HTML,让Web设计师和兼职程序员可以很容易地使用它来组装诸如图像和插件之类的组件,且代码是可以直接写在网页标记中。除此之外微软的步步紧逼也迫使Andreessen不得不聘请Brendan Eich,及早将Scheme编程语言嵌入到Netscape Navigator中。1995年,JavaScript以Mocha为名开发,并于9月在Netscape Navigator 2.0的测试版中首次发布,当时被称为LiveScript,12月,在Netscape Navigator 2.0 beta 3中部署时被重命名为JavaScript 。虽然Netscape Navigator在Chrome、Internet Explorer和Firefox等多款浏览器的围追堵截中最终落败,但是JavaScript却推动了网页的发展,并一直被沿用至今。

  这是一个讽刺。在JavaScript征服世界的同时,播下了一颗很小的种子,这可能会在将来的某个时候暗示JavaScript的终结。那颗种子是名为asm.js的实验技术。

  这是Mozilla的开发人员在2013年完成的一个古怪的实验。他们正在寻找在浏览器中运行高性能代码的方法。但是与插件不同,asm.js并未尝试在浏览器旁边运行。相反,它的目的是直接通过Javascript的虚拟化。

  从本质上讲,asm.js是简洁,优化的JavaScript语法。它比普通的JavaScript运行得更快,因为它避免了该语言的慢动态部分。但是认识到它的网络浏览器也可以应用其他优化,从而大大提高性能。换句话说,asm.js遵循黄金法则- 不要破坏网络 -同时提供通往未来改进的途径。Firefox团队使用asm.js以及名为Emscripten的转码工具来获取用C ++构建的实时3D游戏,并将其放入Web浏览器中,并且仅在JavaScript和原始野心上运行。

  有人问为什么asm.js好在哪里,简单而言,它的性能比JavaScript高几百倍,当然是在没有谷歌的V8引擎之下,因为JavaScript是若类型语言,它需要猜测你的数据类型来进行编译,这样的情况下,在我看来它肯定需要遍历完一个方法,然后再进行运算,与其这样我为什么不打个标识呢?当然在不破坏JavaScript的情况下,arm.js选择了一个骚气的想法,如果你想你的数据类型是int,那么声明一个值就变成了变量名|0,就这样它的目的就达到了。

  尽管asm.js实验产生了一些令人眼花撩乱的演示,但工作的开发人员基本上忽略了它。对他们来说,这只是超越现代的一个有趣方面。但这随着WebAssembly的创建而改变。

  WebAssembly既是asm.js的后继产品,又是一项截然不同的技术。这是一种紧凑的二进制代码格式。像asm.js一样,WebAssembly代码也被输入到JavaScript执行环境中。它具有相同的沙箱和相同的运行时环境。与asm.js一样,WebAssembly的编译方式也可以提高效率。但是现在,这些效率比有以前更加明显,并且浏览器可以完全跳过JavaScript解析阶段。对于普通的逻辑,WebAssembly远比常规JavaScript快,几乎与本机编译的代码一样快。

   WebAssembly于2015年首次出现。如今,桌面和移动设备上的四大浏览器(Chrome,Edge,Safari和Firefox)已完全支持它。尽管可以通过将WebAssembly代码转换为asm.js来实现向后兼容,但Internet Explorer不支持它。就让IE凉透吧!但需要注意的是WebAssembly无法回避JavaScript,因为它已锁定在JavaScript运行时环境中。实际上,WebAssembly需要与至少一些普通的JavaScript代码一起运行,因为它不能直接访问页面。这意味着如果不通过JavaScript层,就无法操纵DOM或接收事件。

   听我说起来,这是一个限制,但聪明的微软开发者已经找到了走私的方法,在浏览器中下载一个微型.NET运行时,作为已编译的WASM文件。此运行时处理JavaScript互操作,并提供基本服务,它能给我们提供GC或者其它用法。Blazor不是唯一一个由WebAssembly支持的实验。考虑一下Pyodide,它旨在将Python放入浏览器中,并带有用于数据分析的高级数学工具包。据我所知这应该使用emscripten的编译器。

   人们常说,何时Javascript能够替代服务器端语言,又有人说什么时候可以代替桌面级应用程序,所以WebAssembly并不是用来代替JavaScript的。而是为了解决现代问题,如果它做到了,那就真的做到了!所以作为一个程序员,你应该对WebAssembly引起足够的重视,未来快速加载Web应用程序的需求肯定会增加。

   就现在我们的.NET Core提供了两种Blazor模板,包括Blazor Server 以及 Blazor WebAssembly。

  • Blazor Server使用熟悉的.NET环境在Web服务器上运行代码。诀窍是浏览器和服务器之间的通信方式。当用户与页面进行交互时,JavaScript代码将回调到发生实际页面生命周期的服务器。(要建立此连接,该页面使用名为SignalR的Microsoft API )运行服务器端代码后,Blazor Server呈现该页面并将更改发送回Web页面,该Web页面将相应地进行更新。

  • Blazor WebAssembly使用由WebAssembly提供支持的微型.NET运行时在浏览器中运行代码。您的客户端代码可以访问许多熟悉的.NET库,并且您使用C#语言编写它,您仍然可以像在JavaScript页面中一样在Web服务器上调用API。

  Blazor Server是一种具有一些有趣用例的技术,但是由于不断的通信,您显然会牺牲一些性能-甚至不用问脱机功能。Blazor WebAssembly是受到最多宣传的一种,也是我们在本文中探讨的一种。

  关于Blazor,程序员最常见的误解是将其C#代码编译为WebAssembly,然后发送到浏览器,然后执行。这种方法并非不可能-Blazor的创建者暗示他们将来可能会尝试这种技术。但是如今Blazor的工作方式并不是如此。

  换句话说,如今的Blazor是当您访问使用Blazor的网页时,该页面将从下载按比例缩小的.NET运行时开始。然后它将下载您的应用程序以及您的应用程序使用的任何其他.NET库,所有这些都在其本机IL中。最后,Blazor运行时执行IL。

二.配置您的开发环境

   由于Blazor是一个预发布的早期Beta产品。基础结构的关键部分正在发生变化,您将无法获得与其他类型的Microsoft项目相同级别的工具支持。我尝试在Visual Studio 2019中进行编码,需要注意的是您需要勾选.NET FrameWork 4.8 以及 .NET Core 3.0 + ,这样您才具有Web Assembly的项目。完成设置后,您可以轻松创建Blazor项目。只需启动Visual Studio,创建一个新项目,然后选择“ Blazor App”项目即可。Visual Studio会询问您是否需要Blazor Server应用程序或Blazor WebAssembly应用程序.

 三.Blazor的数据绑定与组件传值

  由于关于Blazor的.NET Core 又一杀器! Web Blazor框架横空出世!一篇我编写的文章,未能提及更深入的内容,那么现在我将要介绍一下高级的Blazor用法,到最后还会有一个糖果,园友力作的Blazor UI!多么激动人心的时刻,那么赶快开始吧.

3.1Child Component

  在Blazor的Child Component中可以使用[Parameter] 关键字,来进行传值的定义,我们可以这么来做,现在只是提一下这个概念,下面会仔细说下组件之间如何进行跨组件绑定值。

<div>
<p>标题:@title</p>
</div>
@code{
[Parameter]
public string title { get; set; }
}

随后在调用时,Visual Studio IDE 就可以直接向您的视觉进行提示输入相关属性。

<Demorazor title="Hello 博客园的兄弟们!"></Demorazor>

运行效果如下:

3.2 single Bind and Two-way binding

single bind就不用说了,新建项目自带的模板Counter示例那就是如此。

@page "/counter"

<h1>Counter</h1>

<p>Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
private int currentCount = 0;

private void IncrementCount()
{
currentCount++;
}
}

此处 @currentCount 值根据点击按钮的数量递增Click me。<p>标记元素中的值会自动刷新,无需任何组件刷新。

two-way binding 我们可以自定义我们的事件 一共分为二中绑定方式 包括@bind 和 @Bind-Value,值得一提的是还可以通过使用event参数指定@bind-value属性, 使用其他事件来绑定属性或字段。例如第四个文本框就是绑定changeString采用oninput事件的属性,以到达在文本框的值更改时激发,经过我的测试如果你的绑定事件是Javascript中不存在的,那么也无妨,不会报出系统级别的异常,我想如果是从IL转换到WebAssembly中,就会直接过滤掉,但是Visual Studio 2019 没有给我们提示,也让我们编译通过,即使是当前的最高16.0.4 预览版也是如此,这个是令我诧异的。

<p>
<span>在这里可以使用bind-value 或者 bind 当然这里确保您不使用其它事件!</span>
<input @bind-value="changeString" />
<p>这是我输入的内容: @changeString</p>
</p>
<p>
<span>oninput</span>
<input @bind-value="changeString" @bind-value:event="oninput" />
</p>

@code {
string changeString = "";
}

运行效果如下:

 3.3 Component bindings

   想要跨组件进行绑定属性值,可以使用,@bind-{property}可在其中跨组件绑定属性值,我们试着尝试,首先我们创建一个子控件,这个blazor就叫Baby,有一个身份证Id的属性和出生地址。

   EventCallback的用法非常广泛,它可以跨组件共享方法和属性,如不写下面的两个属性,则就会报错。

@page "/baby"
<h2>Child Compoent</h2>
<p>出生的Baby IdentityCard:@Baby_IdentityCrad_Id</p>
<h3>在{@Baby_new_Address} 生的</h3>
@code {
[Parameter]
public string Baby_IdentityCrad_Id{ get; set; }

/// <summary>
/// 这个属性也是牛的雅皮~~~ hhh
/// </summary>
[Parameter]
public string Baby_new_Address{ get; set; }

[Parameter]
public EventCallback<string> Baby_IdentityCrad_IdChanged { get; set; }

[Parameter]
public EventCallback<string> Baby_new_AddressChanged { get; set; }
}

   有什么样的儿子就会有什么样的爸爸?现在我们创建出父亲,那就直接叫做一个Father.razor吧~

@page "/father"
<h3>Father</h3>

<Baby @bind-Baby_IdentityCrad_Id="@id_Card"
@bind-Baby_new_Address="@address">
</Baby>
<button class="btn btn-primary" @onclick="@ChangeTheYear">new baby()</button>
@code {
public string id_Card { get; set; }
public string address { get; set; }
private void ChangeTheYear()
{
id_Card = Guid.NewGuid().ToString();
address = "老张";
}
}

运行效果如下:

 

 如果要在子组件中定义事件,则可以MouseEventArgs来接受设备上的事件,然后再进行附加事件。

[Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; }

四.级联传值

   在某些情况下, 使用组件参数将数据从祖先组件流式传输到附属组件是不方便的, 尤其是在有多个组件层时。级联值和参数通过提供一种方便的方法, 使上级组件为其所有子代组件提供值。级联值和参数还提供了一种方法来协调组件。我们试着去构建一个例子,首先创建一个最顶层的组件。

@page "/myDome"
<p><span>姓名:</span><input @bind="@pName" /></p>
<p><span>年龄:</span><input @bind-value="@pAge" @bind-value:event="oninput"/></p>
<CascadingValue Value="@pName" Name="ProfileName">
<CascadingValue Value="@pAge" Name="ProfileAge">
<ParentComponent />
</CascadingValue>
</CascadingValue>
@code {
private string pName { get; set; } = "张三";
private int pAge { get; set; } = 35;
}

ParentComponent.razor:

<div style="background-color:darkgray;width:200px;">
<p>Parent Component</p>
<div style="padding:10px;">
<p> 年龄 :@Age</p>
<ChildComponent />
</div>
</div>
@code{
[CascadingParameter(Name = "ProfileAge")]
int Age { get; set; }
}

ChildComponent.razor:

<div style="background-color:beige;width:200px;">
<p>Child Component</p>
<p>名称 : @Name.ToString()</p>
</div>

@code{
[CascadingParameter(Name = "ProfileName")]
string Name { get; set; }
}

 运行效果如下:

 

 可以发现,一级直接将二级和三级的组件进行了数据穿透,不过需要注意的是CascadingValue的Name一定要和CascadingParameter的Name相同,否则将会执行错误。

五.路由

   从古至今,任何大型的开发框架,都是具有路由的,否则可能将会无法工作,其实Blazor的启动页也就使用了路由,这是毋庸置疑的。当你的组件带有 @page 指令时,将为生成的类指定 RouteAttribute 指定路由模板的。 在运行时,路由器将使用 RouteAttribute 查找组件类,并呈现哪个组件包含与请求的 URL 匹配的路由模板。

@page "/luyou"
@page "/luyou/{text}"

<h1>Blazor is @Text!</h1>

@code {
[Parameter]
public string Text { get; set; }

protected override void OnInitialized()
{
Text = Text ?? "fantastic";
}
}

运行效果如下:

在上面的示例中应用了两个 @page 指令。 第一个允许导航到没有参数的组件。 第二个 @page 指令采用 {text} 路由参数,并将该值分配给 Text 属性。

关于Blazor的基础入门咱们这篇就说到这里,相信你一定觉得Blazor了不起!它是一个现代的开源框架。它也由一家拥有悠久历史的公司拥有,该公司放弃了昨天的闪亮新技术。因此,大多数开发人员都应该谨慎对待Blazor。只要JavaScript能够执行Blazor可以做的所有事情,而没有下载大小,性能和新工具堆栈带来的额外挑战,大多数开发人员将一如既往。

这并不意味着Blazor不能在所有这些领域都占有一席之地。它甚至可能成为.NET Web应用程序开发中的主导力量。但是如果我今天必须下注,这就是我要依靠的东西。WebAssembly是未来。但就目前而言,Blazor只是一种有趣的可能性。

六.彩蛋

就现在!我的好朋友宇辰正在开发一款名为Blazui的UI组件。它为什么叫Blazui?

Blazor + Element UI = Blazui,Element UI 的blazor版本,无JS,无TS,用 .Net 写前端的 UI 框架,非 Silverlight,非 WebForm,开箱即用!!

Blazui 演示地址:http://blazui.com:9000。QQ群:74522853,码云地址:https://gitee.com/wzxinchen/blazui

参考Blazor使用的前提条件:

  1. 安装 .Net Core 3.0

  2. 安装 VS2019

  3. 安装所有 VS2019 Blazor Extension

现在Blazor正在逐渐变好,让我们即刻出发!.NET Core 不只是开源!

出处:

https://www.cnblogs.com/ZaraNet/archive/2019/11/24/11924541.html

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

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

相关文章

Java LinkedList的实现原理详解

LinkedList是Java List类型的集合类的一种实现&#xff0c;此外&#xff0c;LinkedList还实现了Deque接口。本文基于Java1.8&#xff0c;对于LinkedList的实现原理做一下详细讲解。 &#xff08;Java1.8源码&#xff1a;http://docs.oracle.com/javase/8/docs/api/&#xff09…

知乎高赞:中国有哪些不错的开源软件产品?

点击蓝字“dotNET匠人”关注我哟加个“星标★”&#xff0c;每日 7:15&#xff0c;好文必达&#xff01;在知乎上&#xff0c;有个问题问“中国有什么拿得出手的开源软件产品&#xff08;在 GitHub 等社区受欢迎度较好的&#xff09;&#xff1f;”事实上&#xff0c;还不少呢~…

Java LinkedList双向链表源码分析

LinkedList就传说中的双向链表了。是List 接口的链接列表实现。实现所有可选的列表操作&#xff0c;并且允许所有元素&#xff08;包括 null&#xff09;。除了实现 List 接口外&#xff0c;LinkedList 类还为在列表的开头及结尾 get、remove 和 insert 元素提供了统一的命名方…

容器日志管理 (2) 开源日志管理方案 ELK/EFK

本篇已加入《.NET Core on K8S学习实践系列文章索引》&#xff0c;可以点击查看更多容器化技术相关系列文章。上一篇《容器日志管理&#xff08;1&#xff09;》中介绍了Docker自带的logs子命令以及其Logging driver&#xff0c;本篇将会介绍一个流行的开源日志管理方案ELK/EFK…

Java ArrayList、LinkedList和Vector的使用及性能分析

第1部分 List概括 List 是一个接口&#xff0c;它继承于Collection的接口。它代表着有序的队列。 AbstractList 是一个抽象类&#xff0c;它继承于AbstractCollection。AbstractList实现List接口中除size()、get(int location)之外的函数。 AbstractSequentialList 是一个抽象类…

关于Scrum起源,读这一篇论文就足够啦!《新新产品开发游戏》

关于Scrum的起源&#xff0c;我们经常会提到1986年发表在HBR上的一篇论文&#xff0c;《The New New Product Development Game》&#xff0c;今天我们把它重新翻译&#xff0c;一起重温为何Scrum会如此设置3355&#xff1f;为何会用橄榄球的术语来代表Scrum&#xff1f;The Ne…

Java HashMap的实现原理详解

HashMap是Java Map类型的集合类中最常使用的&#xff0c;本文基于Java1.8&#xff0c;对于HashMap的实现原理做一下详细讲解。 &#xff08;Java1.8源码&#xff1a;http://docs.oracle.com/javase/8/docs/api/&#xff09; 一、HashMap实现原理总结 HashMap的实现原理总结如下…

ASP.NET Core快速入门(第5章:认证与授权)--学习笔记

点击蓝字关注我们课程链接&#xff1a;http://video.jessetalk.cn/course/explore良心课程&#xff0c;大家一起来学习哈&#xff01;任务31&#xff1a;课时介绍1.Cookie-based认证与授权2.Cookie-based认证实现3.Jwt认证与授权介绍4.Jwt认证与授权实现5.Jwt认证与授权6.Role …

Java HashSet的实现原理详解

HashSet是Java Map类型的集合类中最常使用的&#xff0c;本文基于Java1.8&#xff0c;对于HashSet的实现原理做一下详细讲解。 &#xff08;Java1.8源码&#xff1a;http://docs.oracle.com/javase/8/docs/api/&#xff09; 一、HashSet实现原理总结 HashSet的实现原理总结如下…

asp.net mvc 自定义 pager 封装与优化

asp.net mvc 自定义 pager 封装与优化Intro之前做了一个通用的分页组件&#xff0c;但是有些不足&#xff0c;从翻页事件和分页样式都融合在后台代码中&#xff0c;到翻页事件可以自定义&#xff0c;再到翻页和样式都和代码分离&#xff0c; 自定义分页 pager 越来越容易扩展了…

Java LinkedHashMap的实现原理详解

1. LinkedHashSet概述&#xff1a; LinkedHashSet是具有可预知迭代顺序的Set接口的哈希表和链接列表实现。此实现与HashSet的不同之处在于&#xff0c;后者维护着一个运行于所有条目的双重链接列表。此链接列表定义了迭代顺序&#xff0c;该迭代顺序可为插入顺序或是访问顺序…

.net core 中通过 PostConfigure 验证 Options 参数

.net core 中通过 PostConfigure 验证 Options 参数Intro在 .net core 中配置项推荐用 Options 来实现&#xff0c;有一些参数可能必须是用由用户来配置&#xff0c;不能直接写成默认值的参数&#xff0c;这样就需要就 Options 中的参数做一些校验&#xff0c;否则程序内部可能…

Spring配置错误java.lang.NoClassDefFoundError: org/springframework/jdbc/datasource/TransactionAwareDataS

在对Spring数据源dataSource配置之后&#xff0c;运行程序出现如下错误&#xff1a; java.lang.NoClassDefFoundError: org/springframework/jdbc/datasource/TransactionAwareDataSourceProxy 原因是项目没有导入spring-jdbc的jar包。 如果使用maven&#xff0c;可以直接在pom…

.NET做人脸识别并分类

前言在游乐场、玻璃天桥、滑雪场等娱乐场所&#xff0c;经常能看到有摄影师在拍照片&#xff0c;令这些经营者发愁的一件事就是照片太多了&#xff0c;客户在成千上万张照片中找到自己可不是件容易的事。在一次游玩等活动或家庭聚会也同理&#xff0c;太多了照片导致挑选十分困…

Java连接Mysql数据库警告:Establishing SSL connection without server's identity verification is not recommend

Java使用mysql-jdbc连接MySQL出现如下警告&#xff1a; Establishing SSL connection without servers identity verification is not recommended. According to MySQL 5.5.45, 5.6.26 and 5.7.6 requirements SSL connection must be established by default if explicit opt…

.NET Core 3.0中用 Code-First 方式创建 gRPC 服务与客户端

.NET Core ❤ gRPC千呼万唤的 .NET Core 3.0 终于在 9 月份正式发布&#xff0c;在它的众多新特性中&#xff0c;除了性能得到了大大提高&#xff0c;比较受关注的应该是 ASP.NET Core 3.0 对 gRPC 的集成了。它的源码托管在 grpc-dotnet 这个 Github 库中&#xff0c;由微软 .…

Spring集成Mybatis错误Result Maps collection already contains value for XXX

Spring在集成Mybatis出现如下错误&#xff1a; SpringResult Maps collection already contains value for com.guowei.maven.framework.dao.UserMapper.resultUser at org.mybatis.spring.SqlSessionFactoryBean.buildSqlSessionFactory(SqlSessionFactoryBean.java:468) at o…

dotnet Blazor 用 C# 控制界面行为

微软很久就在做 Blazor 但是我现在才开始创建一个测试项目&#xff0c;我想用 C# 去控制 HTML 界面。小伙伴也许会问现在前端不是烂大街么&#xff0c;为什么还需要 Blazor 来做。可能原因只有一个&#xff0c;就是可以使用 C# 写脚本&#xff0c;代码比较清真用 VisualStudio …

Spring集成Mybatis配置映射文件方法详解

Spring ORM模块集成Mybatis使用到了mybatis-spring&#xff0c;在配置mybatis映射文件的时候&#xff0c;一般不直接在Mybatis的配置文件里进行配置&#xff0c;而会在Spring的配置文件里使用MapperScannerConfigurer来配置。MapperScannerConfigurer会自动扫描basePackage指定…

2019年该学习哪门语言?建议学习C#语言

世界上只有少数几种语言是多功能的&#xff0c;而没有一个像C#那样干净整洁。作者 | Arctek译者 | 谭开朗&#xff0c;责编 | 郭芮出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;以下为译文&#xff1a;最直接的答案是&#xff1a;值得。但我想你不是来找这样的答…