曲阜网站建设哪家便宜,wordpress主题 微软,优化推广网站排名,很多国外ip访问网站写在前面曾经我和前端朋友聊天的时候#xff0c;我说我希望有一天可以用C#写前端#xff0c;不过当时更多的是美好的想象#xff0c;这一切正变得真实……什么是Blazor我们知道浏览器可以正确解释并执行JavaScript代码#xff0c;那么浏览器是如何执行C#代码的呢#xff1… 写在前面曾经我和前端朋友聊天的时候我说我希望有一天可以用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
HEADTITLEWebAssembly Sample: Call C Code/TITLEscript typetext/javascriptlet 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 BGCOLORFFFFFFh1WebAssembly Sample: Call C Code/h1
/BODY
/HTML
最终的效果图通过以上示例我们基本上对Blazor和WebAssembly的部分运行机制有了一个比较清晰的认识了接下来我们继续讨论有关Blazor的内容。参考链接https://webassembly.org/https://webassembly.github.io/spec/js-api/index.htmlhttps://caniuse.com/#searchwasmhttps://webassembly.github.io/spec/js-api/index.html
