写在前面

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

什么是Blazor

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

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

我们可以认为Blazor是.NET对WebAssembly的实现。通过使用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  anyfunc)

  (memory $ )

  (export "memory" (memory $))

  (export "_Z8Additionii" (func $_Z8Additionii))

  (func $_Z8Additionii (;  ;) (param $ i32) (param $ i32) (result i32)

   (i32.add

    (get_local $)

    (get_local $)

   )

  )

 )

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

-->

  • 点击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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

-->

  • 最终的效果图


通过以上示例，我们基本上对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带我重玩前端(一)的更多相关文章
	

    
								
  1. Blazor带我重玩前端(三)
		
    写在前面 需要升级VS2019以及.NET Core到最新版(具体的最低支持,我已经忘了,总是越新支持的就越好),以更好的支持自己开发Blazor项目. WebAssembly 搜索Blazor模板  ...
    
		
    2. 
						
  2. Blazor带我重玩前端(四)
		
    布局 Blazor中的布局和MVC中的布局是类似的. 创建布局 新建一个Razor页面,所有新增的布局都要继承LayoutComponentBase,同时标识自定义内容的输出位置,即标识Body的位置 ...
    
		
    3. 
						
  3. Blazor带我重玩前端(五)
		
    概述 本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第一篇,后续会有第二篇. 我们可以视组件是一个类,我们先看一下前文所说的Index.Razor页面生成的 ...
    
		
    4. 
						
  4. Blazor带我重玩前端(二)
		
    概览 Blazor目前有两种托管模式,一种是Server-Side模式,一种是WebAssembly模式.官方首先支持的是Service-Side模式,使用WebAssembly模式,需要更新到最新版 ...
    
		
    5. 
						
  5. Blazor带我重玩前端(六)
		
    本文主要讨论Blazor事件内容,由于blazor事件部分很多,所以会分成上下两篇,本文为第二篇. 双向绑定 概述 如图所示 当点击单项绑定的时候,MyOnewayComponent里的属性值会发生变 ...
    
		
    6. 
						
  6. 重学前端  ---  Promise里的代码为什么比setTimeout先执行？
		
    首先通过一段代码进入讨论的主题 var r = new Promise(function(resolve, reject){ console.log("a"); resolve() ...
    
		
    7. 
						
  7. 重学前端--js是面向对象还是基于对象？
		
    重学前端-面向对象 跟着winter老师一起,重新认识前端的知识框架 js面向对象或基于对象编程 以前感觉这两个在本质上没有什么区别,面向对象和基于对象都是对一个抽象的对象拥有一系列的行为和状态,本质 ...
    
		
    8. 
						
  8. node十年心酸史，带你了解大前端的由来！
		
    前言 近年来,随着前端的丰富,前后端分离是趋势.各种东西如雨后春笋一般,层出不穷.node.js的出现,使前端真正意义上变成了大前端. 前端由来之HTML发展史 1990 年,Tim Berners- ...
    
		
    9. 
						
  9. Datatables带参重绘
		
    研究了好久,最后发现只需要加上参数("bDestory":true,) 即可实现每次刷新就是新的重绘,而无需调用什么desctory init clear等等函数..
    
		
    10. 
		

	


随机推荐
	

    
									
  1. vnc下载  vnc下载-安装-登录教程（超详细！）
			
    许多人在服务器下载了vnc服务端却不知道使用.下面我来教你使用方法 本次教程使用的工具:iis7服务器管理 一.首先,用iis7服务器管理工具登录需要下载vnc服务端的服务器,完成下载. 1.iis7 ...
    
			
    2. 
						
  2. conda虚拟环境安装
			
    一.背景 需要学习mxnet,建一个conda虚拟软件环境. 二.步骤 1.下载anaconda安装文件:https://mirrors.tuna.tsinghua.edu.cn/anaconda/m ...
    
			
    3. 
						
  3. Rocket - debug - dm registers
			
    https://mp.weixin.qq.com/s/P48K17TyRoZC7xBMltbXKQ 简单介绍调试模块中每个寄存器的定义. 1. DMI_RegAddrs 记录DMI访问的各个寄存器的地 ...
    
			
    4. 
						
  4. Rocket - tilelink - BankBinder
			
    https://mp.weixin.qq.com/s/oZCYBdy5glxJQmYKVWvpvA   简单介绍BankBinder的实现.   ​​   1. 基本介绍   A BankBinder ...
    
			
    5. 
						
  5. Chisel3 - Tutorial - Adder
			
    https://mp.weixin.qq.com/s/SEcVjGRL1YloGlEPSoHr3A   位数为参数的加法器.通过FullAdder级联实现.   参考链接: https://githu ...
    
			
    6. 
						
  6. Java实现 LeetCode 347 前 K 个高频元素
			
    347. 前 K 个高频元素 给定一个非空的整数数组,返回其中出现频率前 k 高的元素. 示例 1: 输入: nums = [1,1,1,2,2,3], k = 2 输出: [1,2] 示例 2: 输 ...
    
			
    7. 
						
  7. Java实现 LeetCode 126 单词接龙 II
			
    126. 单词接龙 II 给定两个单词(beginWord 和 endWord)和一个字典 wordList,找出所有从 beginWord 到 endWord 的最短转换序列.转换需遵循如下规则:  ...
    
			
    8. 
						
  8. Java实现 LeetCode 33 搜索旋转排序数组
			
    33. 搜索旋转排序数组 假设按照升序排序的数组在预先未知的某个点上进行了旋转. ( 例如,数组 [0,1,2,4,5,6,7] 可能变为 [4,5,6,7,0,1,2] ). 搜索一个给定的目标值, ...
    
			
    9. 
						
  9. Java实现第九届蓝桥杯等腰三角形
			
    等腰三角形 题目描述 本题目要求你在控制台输出一个由数字组成的等腰三角形. 具体的步骤是: 1. 先用1,2,3,...的自然数拼一个足够长的串 2. 用这个串填充三角形的三条边.从上方顶点开始,逆时 ...
    
			
    10. 
						
  10. java实现第五届蓝桥杯信号匹配
			
    信号匹配 从X星球接收了一个数字信号序列. 现有一个已知的样板序列.需要在信号序列中查找它首次出现的位置.这类似于串的匹配操作. 如果信号序列较长,样板序列中重复数字较多,就应当注意比较的策略了.可以 ...
    
			
    11.