WebAssembly
WebAssembly 简介
对于网络平台而言,WebAssembly 具有巨大的意义——它提供了一条途径,以使得以各种语言编写的代码都可以以接近原生的速度在 Web 中运行。在这种情况下,以前无法以此方式运行的客户端软件都将可以运行在 Web 中。 WASM可以与JavaScript并存,WASM更类似一种低级的汇编语言。 而汇编语言面向机器的程序设计语言。
优势:
快速高效:WebAssembly被设计为针对Size和Load Time进行优化的格式,可以在各个硬件平台上以native speed运行; 安全性:WebAssembly是运行在沙盒内的,甚至可以和当前的Java虚拟机共享一套环境,并且也遵守浏览器各种跨域不跨域的规章制度; 开放性:WebAssembly开放标准,不受任何一家厂商控制,并且被设计为可以和Java API和Context交互。
缺陷:
WebAssembly 目前还不具备 IO 以及 DOM 访问能力。 跟外接的交互只有实现函数并导出,以及在函数实现中调用导入的函数。如果在浏览器或者 Node.js 中运行一定需要借助 JavaScript 才行。
下载项大小较大,应用加载耗时较长;
WASM应该作为JS的扩展而存在,实现一些高性能的组件。例如:编码工具,图像音频处理,数据分析。
正常的js编译:
WASM的编译
缩短了反复检查的时间
WASM是如何与JS配合使用的
不同的代码类型可以根据需要相互调用——WebAssembly JavaScript API将导出的WebAssembly代码包装成可以正常调用的JavaScript函数,WebAssembly代码可以导入并同步调用正常的JavaScript函数。实际上,WebAssembly代码的基本单元称为模块,WebAssembly模块在许多方面与ES模块是对称的。
WebAssembly关键概念
- 模块:表示一个已经被浏览器编译为可执行机器码的 WebAssembly 二进制代码。一个模块是无状态的,并且像一个二进制大对象(Blob)一样能够被缓存到 IndexedDB中或者在 windows 和 workers 之间进行共享(通过postMessage() (en-US)函数)。一个模块能够像一个 ES2015 的模块一样声明导入和导出。
- 内存:ArrayBuffer,大小可变。本质上是连续的字节数组,WebAssembly 的低级内存存取指令可以对它进行读写操作。
- 表格:带类型数组,大小可变。表格中的项存储了不能作为原始字节存储在内存里的对象的引用(为了安全和可移植性的原因)。
- 实例:一个模块及其在运行时使用的所有状态,包括内存、表格和一系列导入值。一个实例就像一个已经被加载到一个拥有一组特定导入的特定的全局变量的 ES2015 模块。
WASM 文本格式
下面的程序从一个叫做 imports 的模块中导入了一个叫做 imported_func 的函数并且导出了一个叫做 exported_func 的函数:
(module
(func $i (import "imports" "imported_func") (param i32))
(func (export "exported_func")
i32.const 42
call $i
)
)
Blazor
Blazor 简介
Blazor 是在 .NET 和 Razor 上构建的用户界面框架。 Blazor 应用程序可以在服务器上作为 ASP.NET 应用程序的一部分运行,也可以部署为在用户计算机上的浏览器中运行(类似于单页应用程序)。
而Razor 是生成基于文本的内容(如 HTML)的一种格式。 Razor 文件具有 cshtml 或 razor 文件扩展名,并且包含 C# 代码与 HTML 的混合。
.NET 是一个完整的生态系统,用于为台式设备、移动设备、云和 IoT 设备开发和部署应用程序。 开发人员使用编程语言(如 Visual Basic、C# 和 F#)来通过 .NET 进行构建。 可以在命令行上使用 .NET 工具,或将其嵌入 Visual Studio 或 Visual Studio Code 等应用程序中,以将代码编译为正在运行的应用程序。
分类
-
Blazor Server
使用 Blazor Server 托管模型可从 ASP.NET Core 应用中在服务器上执行应用。 UI 更新、事件处理和 JavaScript 调用是通过 SignalR 连接使用 WebSocket 协议进行处理。
-
Blazor WebAssembly
Blazor WebAssembly (WASM) 应用在浏览器中使用基于WebAssembly 的 .NET 运行时来运行客户端。 将 Blazor 应用、其依赖项以及 .NET 运行时下载到浏览器。 应用将在浏览器线程中直接执行。
-
Blazor Hybrid(主要应用于Mobile,DeskTop)
Blazor Hybrid主要用于使用混合方法生成本机客户端应用。 混合应用是利用 Web 技术实现其功能的本机应用。 在 Blazor Hybrid 应用中,Razor 组件与任何其他 .NET 代码一起直接在本机应用中(而不在 WebAssembly 上)运行,并通过本地互操作通道基于 HTML 和 CSS 将 Web UI 呈现到嵌入式 Web View 控件。
Blazor WebAssembly
Blazor WebAssembly(有时简称为 Blazor WASM)是 Blazor 用户界面框架的实现,在所有新式浏览器中均包含的 HTML 5 标准 WebAssembly 运行时上运行。 应用程序的二进制输出,即 DLL 文件,将传输到浏览器,并使用经过优化以与 WebAssembly 运行时一起使用的 .NET 版本运行,无需考虑浏览到该网站的设备的基础操作系统。
由于 WebAssembly 是一种完全在浏览器中运行的技术,因此,可以使用 Web 服务器不分析或与其交互的文件来部署 Blazor 应用程序的此模型。 这种“静态”方法降低了对 Web 服务器的要求,并且将应用程序的所有处理都转移到用户计算机。
高级处理和逻辑可以在浏览器中进行。 当应用程序需要数据或与其他服务交互时,可以使用标准 Web 技术与 HTTP 服务通信。
Blazor 组件
Razor
-
1.概念
组件是使用 C# 和 HTML 标记的组合在 Razor 组件文件(文件扩展名为
.razor)中实现的 -
2.语法
组件使用 Razor 语法。 组件广泛使用了两个 Razor 功能,即指令和指令特性 。 这两个功能是前缀为
@的保留关键字,出现在 Razor 标记中:-
指令:更改组件标记的分析或运行方式。 例如,
@page指令使用路由模板指定可路由组件,可以由用户请求在浏览器中按特定 URL 直接访问。 -
指令特性:更改组件元素的分析方式或运行方式。 例如,
<input>元素的@bind指令特性会将数据绑定到元素的值。 -
组件的名称必须以大写字符开头
-
命名空间: @using
-
[Parameter, EditorRequired] 中,Parameter代表父传子的参数,EditorRequired表示必传
-
路由参数 : @page "/route-parameter/{text?}" text可在页面初始化时赋默认值
-
3.组件间传值
- 3.1 父传子
子组件中
父组件中
- 3.2 子传父
子组件中
父组件中
-
4.生命周期
-
| 序号 | 生命周期方法 | 说明 |
|---|---|---|
| 1 | 已创建组件 | 组件已实例化。 |
| 2 | SetParametersAsync | 设置呈现树中组件的父级中的参数。 |
| 3 | OnInitialized / OnInitializedAsync | 在组件已准备好启动时发生。 |
| 4 | OnParametersSet / OnParametersSetAsync | 在组件收到参数且已分配属性时发生。 |
| 5 | OnAfterRender / OnAfterRenderAsync | 在呈现组件后发生。 |
| 6 | Dispose / DisposeAsync | 如果组件实现 IDisposable 或 IAsyncDisposable,则会在销毁组件的过程中发生适当的可释放操作。 |
Kendo UI
Kendo UI 的认识
分为了企业版和开源版两种,风格都输入比较庄重的style. 开源版只支持 - jQuery v1.9.1+ 其他版本的稳定性不保证 两个链接如下:
参考文献
Dojo.js
Dojo.js 的认识
Dojo 是一个强大的面向对象 JavaScript 框架。主要由三大模块组成:Core、Dijit、DojoX。Core 提供 Ajax,events,packaging,CSS-based querying,animations,JSON 等相关操作 API。Dijit 是一个可更换皮肤,基于模板的 WEB UI 控件库。DojoX 包括一些创新 / 新颖的代码和控件:DateGrid,charts,离线应用,跨浏览器矢量绘图等。
Dojo官网 这个是前端框架
Dojo Toolkit 这个是Dojo工具包