1688网站怎么样,西安企业网站建站,天元建设集团有限公司 田新鹏,2018江苏省海门市建设局网站一.唠唠WebAssembly的发展历程目前有很多支持WebAssembly的项目#xff0c;但发展最快的是Blazor#xff0c;这是一个构建单页面的.NET技术#xff0c;目前已经从Preview版本升级到了beta版本#xff0c;微软计划在2020年5月发布Blazor的第一个版本。Blazor是什么#xff… 一.唠唠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的测试版中首次发布当时被称为LiveScript12月在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年首次出现。如今桌面和移动设备上的四大浏览器ChromeEdgeSafari和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/divcode{ [Parameter] public string title { get; set; }}随后在调用时Visual Studio IDE 就可以直接向您的视觉进行提示输入相关属性。Demorazor titleHello 博客园的兄弟们/Demorazor运行效果如下3.2 single Bind and Two-way bindingsingle bind就不用说了新建项目自带的模板Counter示例那就是如此。page /counterh1Counter/h1pCurrent count: currentCount/pbutton classbtn btn-primary onclickIncrementCountClick me/buttoncode { 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-valuechangeString / p这是我输入的内容: changeString/p/pp spanoninput/span input bind-valuechangeString bind-value:eventoninput //pcode { string changeString ;}运行效果如下 3.3 Component bindings 想要跨组件进行绑定属性值可以使用,bind-{property}可在其中跨组件绑定属性值我们试着尝试首先我们创建一个子控件这个blazor就叫Baby有一个身份证Id的属性和出生地址。 EventCallback的用法非常广泛它可以跨组件共享方法和属性如不写下面的两个属性则就会报错。page /babyh2Child Compoent/h2p出生的Baby IdentityCard:Baby_IdentityCrad_Id/ph3在{Baby_new_Address} 生的/h3code { [Parameter] public string Baby_IdentityCrad_Id{ get; set; } /// summary /// 这个属性也是牛的雅皮~~~ hhh /// /summary [Parameter] public string Baby_new_Address{ get; set; } [Parameter] public EventCallbackstring Baby_IdentityCrad_IdChanged { get; set; } [Parameter] public EventCallbackstring Baby_new_AddressChanged { get; set; }} 有什么样的儿子就会有什么样的爸爸现在我们创建出父亲那就直接叫做一个Father.razor吧~page /fatherh3Father/h3Baby bind-Baby_IdentityCrad_Idid_Card bind-Baby_new_Addressaddress/Babybutton classbtn btn-primary onclickChangeTheYearnew baby()/buttoncode { public string id_Card { get; set; } public string address { get; set; } private void ChangeTheYear() { id_Card Guid.NewGuid().ToString(); address 老张; }}运行效果如下 如果要在子组件中定义事件则可以MouseEventArgs来接受设备上的事件然后再进行附加事件。[Parameter]public EventCallbackMouseEventArgs OnClick { get; set; }四.级联传值 在某些情况下, 使用组件参数将数据从祖先组件流式传输到附属组件是不方便的, 尤其是在有多个组件层时。级联值和参数通过提供一种方便的方法, 使上级组件为其所有子代组件提供值。级联值和参数还提供了一种方法来协调组件。我们试着去构建一个例子首先创建一个最顶层的组件。page /myDomepspan姓名/spaninput bindpName //ppspan年龄/spaninput bind-valuepAge bind-value:eventoninput//pCascadingValue ValuepName NameProfileName CascadingValue ValuepAge NameProfileAge ParentComponent / /CascadingValue/CascadingValuecode { private string pName { get; set; } 张三; private int pAge { get; set; } 35;}ParentComponent.razordiv stylebackground-color:darkgray;width:200px; pParent Component/p div stylepadding:10px; p 年龄 :Age/p ChildComponent / /div/divcode{ [CascadingParameter(Name ProfileAge)] int Age { get; set; }}ChildComponent.razordiv stylebackground-color:beige;width:200px; pChild Component/p p名称 : Name.ToString()/p/divcode{ [CascadingParameter(Name ProfileName)] string Name { get; set; }} 运行效果如下 可以发现一级直接将二级和三级的组件进行了数据穿透不过需要注意的是CascadingValue的Name一定要和CascadingParameter的Name相同否则将会执行错误。五.路由 从古至今任何大型的开发框架都是具有路由的否则可能将会无法工作其实Blazor的启动页也就使用了路由这是毋庸置疑的。当你的组件带有 page 指令时将为生成的类指定 RouteAttribute 指定路由模板的。 在运行时路由器将使用 RouteAttribute 查找组件类并呈现哪个组件包含与请求的 URL 匹配的路由模板。page /luyoupage /luyou/{text}h1Blazor is Text!/h1code { [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组件。它为什么叫BlazuiBlazor Element UI BlazuiElement UI 的blazor版本无JS无TS用 .Net 写前端的 UI 框架非 Silverlight非 WebForm开箱即用Blazui 演示地址http://blazui.com:9000。QQ群74522853码云地址https://gitee.com/wzxinchen/blazui参考Blazor使用的前提条件安装 .Net Core 3.0安装 VS2019安装所有 VS2019 Blazor Extension现在Blazor正在逐渐变好让我们即刻出发.NET Core 不只是开源出处https://www.cnblogs.com/ZaraNet/archive/2019/11/24/11924541.html
