静态扩展如何在Blazor中为js互操作工作?

Question

我已经设法使代码如此平静。

Blazor html:

@inject IJSRuntime js
<button @onclick="Delete">Delete</button>

函数删除():

private async Task Delete()
{
var confirmed = await js.Confirm($"Are you sure you want to delete?");
}

静态扩展:

public static class IJSRuntimeExtensionMethods
{
public static async ValueTask<bool> Confirm(this IJSRuntime js, string message)
{
return await js.InvokeAsync<bool>("confirm", message);
}
}

这段代码使javascript确认弹出。

我的问题是它是如何工作的?

最令人困惑的部分是:

var confirmed = await js.Confirm($"Are you sure you want to delete?");

为什么我们可以只写Confirm，而不写IJSRuntimeExtensionMethodsInstance.Confirm?

为什么我们还需要在这个位js.?

它是如何通过js.Confirm($"Are you sure you want to delete?")传递到静态扩展的，或者js之后的点符号到底是什么?

Answer 1

扩展方法是一种语言特性，它允许您扩展任何类或接口的行为。基本上，这只是语法糖，以简化对静态方法的调用，使其看起来像对实例方法的调用。

在扩展方法的声明中，注意IJSRuntime js之前的this。这意味着方法扩展了的IJSRuntime类型:

public static async ValueTask<bool> Confirm(this IJSRuntime js, string message)

下面是对

的调用

js.Confirm("text");

被翻译成

IJSRuntimeExtensionMethodsInstance.Confirm(js, "text");

，你也可以这样调用这个方法!