static 擴展如何為 Blazor 中的 js 互操作工作？

Question

我設法使代碼如此平靜。

Blazor html：

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

Function 刪除（）：

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

Static 擴展：

    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?")傳遞到 static 擴展的，或者在js之后的點符號到底在做什么？

Answer 1

擴展方法是一種語言功能，允許您擴展任何 class 或接口的行為。 基本上，這只是簡化對 static 方法的調用並使其看起來像對實例方法的調用的語法糖。

在擴展方法的聲明中注意IJSRuntime js之前的this 。 這意味着該方法擴展了IJSRuntime類型：

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

在引擎蓋下調用

js.Confirm("text");

被翻譯成

IJSRuntimeExtensionMethodsInstance.Confirm(js, "text");

你也可以像這樣調用方法！