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

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

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

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

在后台调用

js.Confirm("text");

被翻译成

IJSRuntimeExtensionMethodsInstance.Confirm(js, "text");

你也可以这样调用方法！

Blazor 中的 js 互操作的静态扩展如何工作？

How does static extension work for js interop in Blazor?

c#

blazor

.net-5

blazor-jsinterop