Blazor带我重玩前端(一)

写在前面

曾经我和前端朋友聊天的时候，我说我希望有一天可以用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

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

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

相关文章

Java面向对象编程(中级)

Java面向对象编程(中级)

面向对象编程(中级) 包 访问修饰符 封装 01: public class Encapsulation01 {public static void main(String[] args){Person person new Person();person.name "Tom";person.setAge(30);person.setSalary(30000);} }class Person {public String name;private…
阅读更多...
[Mvp.Blazor] 动态路由与钩子函数

[Mvp.Blazor] 动态路由与钩子函数

&#xff08;Blazor组件的生命周期函数&#xff09;一直在学习也没有停下脚步&#xff0c;用着脑子还是挺好的&#xff0c;感觉可以更脚踏实地一下。最近偶尔也继续看了看Blazor&#xff0c;毕竟我也开源了一个项目嘛&#xff0c;基本我正式开源的项目都会负责到底&#xff0c;…
阅读更多...
算法-找出最近点对问题

算法-找出最近点对问题

最近点对问题 找出平面上一对距离最短的点&#xff0c;时间复杂度 O&#xff08;nlgn&#xff09; using System; using System.Collections.Generic;namespace dataLearn {struct Coordinate{public float x;public float y;public Coordinate(float x,float y){this.x x;t…
阅读更多...
算法-二分搜索-找出最大值和最小值

算法-二分搜索-找出最大值和最小值

二分搜索问题 找出最大值和最小值 时间复杂度O&#xff08;n&#xff09; using System; using System.Collections.Generic;namespace dataLearn {class Program{static void Main(string[] args){List<int> list new List<int> { 10, 3, 6, 4, 7, 1, 9, 2 };v…
阅读更多...
Java面向对象编程(高级)

Java面向对象编程(高级)

面向对象编程(高级) 类变量和类方法 01: package ChildDemo;public class Child {private String name;public static int cnt 0;public Child(String name){this.name name;}public void join(){System.out.println(name "join the game");} }//package ChildDe…
阅读更多...
.NET Core + Kubernetes：Volume

.NET Core + Kubernetes：Volume

和 Docker 类似&#xff0c;Kubernetes 中也提供了 Volume 来实现数据卷挂载&#xff0c;但 Kubernetes 中 Volume 是基于 Pod&#xff0c;而不是容器&#xff0c;它可被 Pod 中多个容器共享&#xff0c;另外 Kubernetes 中提供比较丰富的 Volume 类型[1]&#xff0c;如&#…
阅读更多...
算法-二分搜索-找出最大值和次大值

算法-二分搜索-找出最大值和次大值

二分搜索 <2>找出最大值和第二大值 时间复杂度O&#xff08;n) class Program {static void Main(string[] args){List<int> list new List<int> { 10, 3, 6, 4, 7, 1, 9, 2 };var v getMax(list, 0, list.Count - 1);}static (int, int) getMax(List<…
阅读更多...
WPF中的Data Binding调试指南

WPF中的Data Binding调试指南

点击蓝字“大白技术控”关注我哟加个“星标★”&#xff0c;每日良时&#xff0c;好文必达&#xff01;WPF中的Data Binding如何Debug?大家平时做WPF开发&#xff0c;相信用Visual studio的小伙伴比较多。XAML代码曾经在某些特殊版本的Visual Studio中是可以加断点进行调试的&…
阅读更多...
算法-连续项的最大和问题（最大子数组问题）三种不同解法

算法-连续项的最大和问题（最大子数组问题）三种不同解法

连续项的最大和问题 &#xff08;1&#xff09;暴力求解 时间复杂度 O&#xff08;n^2&#xff09; &#xff08;2&#xff09;分治求解 时间复杂度 O&#xff08;nlogn&#xff09; &#xff08;3&#xff09; 线性求解 时间复杂度 O&#xff08;n&#xff09; C#代码 usin…
阅读更多...
.NET 5 尝鲜 - 开源项目TerminalMACS WPF管理端支持.NET 5

.NET 5 尝鲜 - 开源项目TerminalMACS WPF管理端支持.NET 5

点击上方“Dotnet9”添加关注哦聊天界面设计TerminalMACS一个使用 Prism 作为模块化框架、基于多个开源控件库作为UI控件选择、集成开源 UI 界面设计的 .NET 5 WPF 客户端项目。项目名称&#xff1a;TerminalMACS WPF管理端项目开源地址&#xff1a;Github&#xff1a;https://…
阅读更多...
算法-排序-插入排序

算法-排序-插入排序

插入排序 特点&#xff1a;原址排序&#xff0c;比较排序&#xff0c;&#xff08;最坏的情况&#xff09;时间复杂度O&#xff08;n^2&#xff09; #include <iostream>void insertion_sort(int *arr,int start,int end) {for (int i start1; i < end1; i) {int k…
阅读更多...
MongoDB via Dotnet Core数据映射详解

MongoDB via Dotnet Core数据映射详解

用好数据映射&#xff0c;MongoDB via Dotnet Core开发变会成一件超级快乐的事。一、前言MongoDB这几年已经成为NoSQL的头部数据库。由于MongoDB free schema的特性&#xff0c;使得它在互联网应用方面优于常规数据库&#xff0c;成为了相当一部分大厂的主数据选择&#xff1b;…
阅读更多...
算法-排序-归并排序

算法-排序-归并排序

归并排序 特点&#xff1a;非原址排序&#xff0c;比较排序&#xff0c;时间复杂度O&#xff08;nlgn&#xff09; 稳定 // // Created by 许加权 on 2021/6/18. //#include <iostream> void merge_sort(int *arr,int start,int end) {if(start < end){int middle …
阅读更多...
FreeSql.Generator命令行代码生成器是如何实现的

FreeSql.Generator命令行代码生成器是如何实现的

目录FreeSql介绍FreeSql.GeneratorRazorEngine.NetCore源码解析FreeSql.ToolsFreeSqlFreeSql 是功能强大的对象关系映射技术(O/RM)&#xff0c;支持 .NETCore 2.1 或 .NETFramework 4.0 或 Xamarin。有一个强大的ORM&#xff0c;也方便我们开发一个代码生成器。一般情况下&…
阅读更多...
算法-排序-选择排序

算法-排序-选择排序

选择排序 特点&#xff1a;原址排序&#xff0c;比较排序&#xff0c;时间复杂度O&#xff08;n^2&#xff09; // // Created by 许加权 on 2021/6/19. //#include <iostream>void selection_sort(int *arr,int start,int end) {for (int i start 1; i < end1; i…
阅读更多...
.Net Core Configuration Etcd数据源

.Net Core Configuration Etcd数据源

前言.Net Core为我们提供了一套强大的Configuration配置系统&#xff0c;使用简单扩展性强。通过这套配置系统我们可以将Json、Xml、Ini等数据源加载到程序中,也可以自己扩展其他形式的存储源。今天我们要做的就是通过自定义的方式为其扩展Etcd数据源操作。何为Etdc在使用etcd之…
阅读更多...
算法-二分查找

算法-二分查找

二分查找 特点&#xff1a; T(n) T(n/2 - 1) c 时间复杂度O&#xff08;lgn) 前提&#xff1a;需要已排序的集合 int binary_search(int *arr,int start,int end,int key) {if(start<end){int middle (startend)/2;if(arr[middle] key) return middle;if(key<arr[m…
阅读更多...
Java IDEA断点调试

Java IDEA断点调试

断点调试(debug) 断点调试应用案例 01&#xff1a; package Assign;public class Debug01 {public static void main(String[] args) {int sum 0;for (int i 0;i<5;i){sumi;System.out.println(i);System.out.println(sum);}System.out.println("continue");} …
阅读更多...
.NET Core请求控制器Action方法正确匹配，但为何404？

.NET Core请求控制器Action方法正确匹配，但为何404？

【导读】提前预祝各位端午节快乐。有时候我们会发现方法名称都正确匹配&#xff0c;但就是找不到对应请求接口&#xff0c;所以本文我们来深入了解下何时会出现接口请求404的情况。匹配控制器Action方法&#xff08;404&#xff09;首先我们创建一个web api应用程序&#xff0c…
阅读更多...
布斯乘法以及带符号数的运算

布斯乘法以及带符号数的运算

乘法理解 对于最熟悉的十进制乘法很最基本的运算原理就是一个乘数乘以另一个乘数的个位、十位、百位数字然后求和。比如 放到二进制来看其实它也是这样的&#xff0c;多位数的乘法就是一个乘数乘上另一个乘数的各位求和。那么&#xff1a; 布斯算法及原理 原理 已经知道两…
阅读更多...
最新文章

Copyright @ 2022~2023