介绍
是一个使用 .NET 生成交互式客户端 Web UI 的框架。它与前端同学所熟知的 Vue、React 有很大的不同。
它最大的特点是使用 C# 代码（理论上，.NET 生态系统中的任何语言）来实现逻辑。
使用 .NET 进行客户端 Web 开发具有以下优势：
有两种不同的开发模式
，C#代码在浏览器中运行。
，C#代码在服务器端执行，使用同步到浏览器进行更新。
涉及的技术
它是核心生态系统不可或缺的一部分，涉及的大部分技术都与.net相关。
视图层使用 Razor 3 技术进行前端编排和渲染。Razor 是一种标记语法，也是 core 的默认视图语法。最显着的特点是强类型（C#、VB等）的代码可以用HTML写在一个文件中，当然也可以分开。在 razor 文件中，@ 符号后面是强类型语言，它可以是一行、整行或段落的一部分。core中的一般做法是将VB、C#等强类型语言嵌入到网页中。当请求网页时，在服务器端执行嵌入代码以动态生成页面。
在开发模式下运行时，依靠4种技术，可以在没有任何后端服务器的情况下制作静态页面。
运行时就是这样开发的，依赖5种技术，需要后端服务器端配合。
样式化的 UI 组件库 –
它基于样式库精心打造，添加了100多个常用组件，为您快速开发项目带来非凡感受。
.()
参考
.() 方法用于发出异步请求以将元素置于全屏模式。
调用此 API 并不能保证元素能够进入全屏模式。如果允许元素进入全屏模式，它将返回并且元素将收到一个 (en-US) 事件，通知它已进入全屏模式。如果全屏请求被拒绝，将返回并且元素将收到 (en-US) 事件。如果元素已从原始文档中分离，则文档将接收这些事件。
早期的 API 实现将始终将这些事件发送到，而不是调用元素，因此您可能需要自己处理此类情况。在 [Page not yet] 中查看哪些浏览器进行了此更改。
注意：该方法只能在用户交互或设备方向改变时调用，否则会失败。
语法
var = .();
范围
可选的
(en-US) 对象提供用于切换到全屏模式的控制选项。目前，唯一的选项是 (en-US)，它控制元素处于全屏模式时是否显示导航栏 UI。默认值为“auto”，这意味着将由浏览器显示导航栏。
返回值
切换到全屏模式后返回已使用的值
异常
() 通过拒绝返回的内容来生成错误条件，而不是抛出传统的异常。拒绝控制器接收以下值之一：
在以下情况下抛出：
文档中包含的元素没有完全激活，也就是说，它不是当前激活的元素。
元素不在文档中。
不允许该元素使用“”功能，因为功能策略限制了配置或其他访问控制。
一个元素和它的文档是同一个节点。
初步构建组件 1. 构建 js 脚本
bb_Fullscreen: function (ele) {
ele.requestFullscreen() ||
ele.webkitRequestFullscreen ||
ele.mozRequestFullScreen ||
ele.msRequestFullscreen;
},
bb_ExitFullscreen: function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
});
2.构建 Razor 页面测试
下面是简化代码，运行测试看看功能是否满足要求。
@code{
[Inject] IJSRuntime? JSRuntime{ get; set; }
//进入全屏
private Task FullScreen() => await JSRuntime.InvokeVoidAsync("bb_Fullscreen");
//退出全屏
private Task ExitFullScreen() => await JSRuntime.InvokeVoidAsync("bb_ExitFullscreen");
}
3.优化逻辑，增加单键全屏切换逻辑，增加单个元素全屏逻辑
JS完整代码
(function ($) {
$.extend({
bb_toggleFullscreen: function (el, id) {
var ele = el;
if (!ele || ele === '') {
if (id) {
ele = document.getElementById(id);
}
else {
ele = document.documentElement;
}
}
if ($.bb_IsFullscreen()) {
$.bb_ExitFullscreen();
ele.classList.remove('fs-open');
}
else {
$.bb_Fullscreen(ele);
ele.classList.add('fs-open');
}
},
bb_Fullscreen: function (ele) {
ele.requestFullscreen() ||
ele.webkitRequestFullscreen ||
ele.mozRequestFullScreen ||
ele.msRequestFullscreen;
},
bb_ExitFullscreen: function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
},
bb_IsFullscreen: function () {
return document.fullscreen ||
document.webkitIsFullScreen ||
document.webkitFullScreen ||
document.mozFullScreen ||
document.msFullScreent;
}
});
})(jQuery);
测试功能
@code{
[Inject] IJSRuntime? JSRuntime{ get; set; }
//全屏方法，已经全屏时再次调用后退出全屏
private Task ToggleFullScreen() => await JSRuntime.InvokeVoidAsync("bb_toggleFullscreen");
}
4.包即服务
再想想，如果把按钮封装成组件，只能调用UI界面，样式也不是最灵活的，为什么不做一个服务，和UI解耦呢？别着急，现在就开始吧。
作为一个爱好者，每一个想法都转化为一个组件之后，值得提交到这样一个组件库，供大家一起学习和进步。自从我在2020-09-25向团队提交组件以来，从自愈到团队合作，真的学到了很多知识和技能。在学习BB源码的过程中，我深刻体会到了这句话的精髓：“你进入的每一寸都是一寸惊喜！”。
项目负责人Argo，作为微软MVP和业内人士，对整个微软技术栈有非常深刻的理解和思考，对我帮助很大。我要在这里感谢Argo，
分类：
技术要点：
相关文章：
暂无评论内容