写在前面

曾经我和前端朋友聊天的时候，我说我希望有一天可以用C#写前端，不过当时更多的是美好的想象，这一切正变得真实……

什么是Blazor

我们知道浏览器可以正确解释并执行JavaScript代码，那么浏览器是如何执行C#代码的呢？答案是通过WebAssembly。通过WebAssembly，我们可以让浏览器运行很多的高级语言，如 C#、C、C++、GO等，并使他们运行在基于内存安全的沙箱环境中。如下图所示：

作为一个已经五六年没有写过前端的.NET程序员，遇到Blazor实在是幸运中的幸运。它又让我可以很愉快的写前端了，而且还是用C#去写，我也就不用再分出精力去学习其他的JS框架了。

通过使用Blazor，我们可以使用C#语言来取代JS去开发交互式Web UI。值得一提的是，Blazor是由Browser和Razor这两个单词合并而成的，意思就是Blazor可以基于客户端执行Razor视图后将HTML呈现给浏览器。所以想要更好的理解Blazor，就要首先更好的了解浏览器和Razor。

Blazor有以下几个优点：

使用C＃来取代JavaScript创建丰富的交互式UI
基于.NET及其生态编写服务器端和客户端应用程序逻辑
糅合现有HTML和CSS技术，提供了广泛的浏览器支持，包括移动浏览器其(注意：Blazor取代的是基于JavaScript的UI交互，而其他部分如HTML、CSS，这些是我们的技术基础)
与现代托管平台（例如Docker）集成。
Blazor是开源的，其源码位置在GitHub上

❝

另外需要注意的，Blazor和Silverlight不可混为一谈，Blazor是基于开放标准而构建的，本身不需要任何额外插件。而Silverlight带有太多自有特性，所以不得不在浏览器上安装插件以更好的支持其运行。

❞

什么是WebAssembly

概览

WebAssembly是一种二进制格式的指令集，其设计目标是能够在解释或者将其编译为本地机器代码并执行他们的机器上运行，这类似于我们.NET编译后的IL。

WebAssembly可以作为编译高级编程语言的可移植目标，通过节省大小和加载时间，充分利用各种平台（移动平台和IOT平台）上的通用应用功能，使得WebAssembly可以以接近于本机（接近于本机的英语单词是：near-native，在语言学里意思是精通语言的人，所说的话和说母语的人没有什么区别）的运行速度运行。

支持

WebAssembly已经获得了大部分浏览器的支持。详细内容可以移步至Can I Use

手写一个例子

接下来我们看一个例子，方便起见，我们直接使用在线的WebAssembly编译工具，地址是：https://mbebenita.github.io/WasmExplorer/。目前，这个工具只支持C和C++。不过也没有什么关系，我们写一个简单的方法用于测试即可。

首先我们定义了一个计算两个数和的方法:

int Addition(int a, int b)
{return a + b;
}

然后点击COMPILE

在中间的框里会生成WAT（即WebAssembly文本格式）的代码，最右边的是二进制了。中间的代码部分可以帮助我们查看在编译的过程中发生了什么，会看到生成了一个名为_Z8Additionii的function，其中8表示这个方法名的长度，后面的i表示有多个参数，接下来我们会去调用它。

(module(table 0 anyfunc)(memory $0 1)(export "memory" (memory $0))(export "_Z8Additionii" (func $_Z8Additionii))(func $_Z8Additionii (; 0 ;) (param $0 i32) (param $1 i32) (result i32)(i32.add(get_local $1)(get_local $0)))
)

然后点击Download，下载.WAT文件

接下来我们再写一个HTML网页出来，就用那种最简单的HTML代码，代码如下：

<HTML>
<HEAD><TITLE>WebAssembly Sample: Call C++ Code</TITLE><script type="text/javascript">let addition = fetch('test.wasm').then(response => response.arrayBuffer()).then(buffer => WebAssembly.compile(buffer)).then(module => { return new WebAssembly.Instance(module) }).then(instance => { addition = instance.exports._Z8Additionii }); </script>
</HEAD>
<BODY BGCOLOR="FFFFFF"><h1>WebAssembly Sample: Call C++ Code</h1>
</BODY>
</HTML>

最终的效果图

通过以上示例，我们基本上对Blazor和WebAssembly的部分运行机制有了一个比较清晰的认识了，接下来，我们继续讨论有关Blazor的内容。

参考链接：

https://webassembly.org/

https://webassembly.github.io/spec/js-api/index.html

https://caniuse.com/#search=wasm

https://webassembly.github.io/spec/js-api/index.html

Blazor带我重玩前端(一)相关推荐

Blazor带我重玩前端(四)
布局 Blazor中的布局和MVC中的布局是类似的. 创建布局新建一个Razor页面,所有新增的布局都要继承LayoutComponentBase,同时标识自定义内容的输出位置,即标识Body的位置 ...
Blazor带我重玩前端(五)
概述本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇. 我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的 ...
Blazor带我重玩前端(三)
VS自带的Blazor模板介绍需要升级VS2019以及.NET Core到最新版(具体的最低支持,我已经忘了,总是越新支持的就越好),以更好的支持自己开发Blazor项目. 使用VS创建Blazor ...
Blazor带我重玩前端(六)
本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第二篇. 双向绑定概述如图所示当点击单项绑定的时候,MyOnewayComponent里的属性值会发生变 ...
Blazor带我重玩前端(二)
概览 Blazor目前有两种托管模式,一种是Server-Side模式,一种是WebAssembly模式.官方首先支持的是Service-Side模式,使用WebAssembly模式,需要更新到最新版 ...
柚缘航海：Tik Tok电商带货怎么玩？
以下全是吐血干货(建议点赞+收藏,再慢慢看)如果想了解更多的干货,可以关注旭柚. 我们讲了Tik Tok目前常见的五种变现方式,这篇文章就给大家着重来讲讲其中的创作者基金和电商带货. 一.创作者基金 ...
一个计算机爱好者的不完整回忆（十五）自带游戏你玩过么？
Windows自带的小游戏小软件你们都玩过么? Windows捆绑的最古老的程序是啥我不知道,我知道的是纸牌游戏,知道windows做这个游戏干什么么?是为了让大家练习鼠标操作的,你会用到拖动.双击等 ...
【笔记】重学前端-winter
本文为:winter 发布在极客时间 [重学前端]系列课程的的笔记和总结支持正版哦: https://time.geekbang.org/col... 导语如果深入进去了解,你会发现,表面上看他们 ...
重学前端-学习笔记-JavaScript对象
说明重学前端是程劭非(winter)在极客时间开的一个专栏,在此主要整理我的学习笔记.如有侵权,请联系我,谢谢. javascript对象特征对象具有唯一标识性:完全相同的两个对象,也不是同一个对 ...

Blazor带我重玩前端(一)