探秘BrowserInterop:无缝集成浏览器API的利器
项目介绍
BrowserInterop
是一个为Blazor应用提供浏览器API访问功能的开源库。这个项目的诞生目标是让开发者能够更方便、类型安全地在Blazor环境中使用JavaScript原生API,而无需直接编写JS代码。通过BrowserInterop
,你可以享受到更好的序列化处理、精确的类型转换以及便捷的异步资源管理。
项目技术分析
BrowserInterop
遵循几个关键原则来选择要支持的API:
- 只处理Blazor目前无法直接处理或需要优化的API。
- 遵循Web标准。
- 确保大部分现代浏览器(在caniuse上超过75%的支持率)都能运行。
这个库提供了以下优点:
- 增强型序列化:DomString、Infinity等特殊类型的自动处理。
- 智能类型转换:如将字符串转化为枚举,将时间间隔表示为TimeSpan。
- IAsyncDisposable支持:针对需在代码块前后执行的方法(如性能分析)或事件订阅。
- Func委托用于事件订阅,使得操作更加灵活。
开发过程中,参考了Mozilla开发者网络和Can I use这两个网站。
快速启动
开始使用非常简单,首先通过NuGet添加BrowserInterop
包:
dotnet add package BrowserInterop
然后在你的index.html
文件中引入必要的JavaScript文件,放置在blazor.webassembly.js
之后:
<script src="_framework/blazor.webassembly.js"></script>
<script src="_content/BrowserInterop/scripts.js"></script>
最后,在Blazor组件中使用Window()
扩展方法调用API:
@using BrowserInterop.Extensions
...
@code {
protected override async Task OnInitialized()
{
var window = await jsRuntime.Window();
await window.Console.Log("this is a {0}", "Log message");
}
}
更多详细信息和文档,请查阅项目wiki。
开发与测试
如果你有兴趣参与到BrowserInterop
的开发中,你需要安装.NET SDK 3.1.202
和npm
。项目结构包括三个部分:
src/BrowserInterop
:C#编写的netsandard2.0库。sample/SampleApp
:展示如何使用BrowserInterop
的示例应用。tests/BrowserInterop.E2ETests
:基于Cypress的端到端测试套件,所有测试脚本位于cypress/integration
目录下。
要运行测试,先在SampleApp
中启动应用,然后在BrowserInterop.E2ETests
下执行npm install
和npm run-script start
。
BrowserInterop
通过将JavaScript的世界与.NET世界紧密连接,为Blazor开发者提供了一个强大且友好的工具集,助你在Web应用开发中游刃有余。现在就加入我们,一起探索这个奇妙的开源项目吧!