Blazor组件中如何使用JavaScript代码后置？代码适配与调用疑问

一、默认生成的JS代码要不要留？ #

完全没必要留。Blazor的JS隔离机制（即与组件同名的.razor.js文件）会自动处理模块加载，那段export class和挂载到window的代码是老全局模式的残留，删掉后不会影响JS隔离的正常运行。

二、整合自定义JavaScript代码 #

直接把你的代码写入TestComponent.razor.js即可，注意自定义函数需要添加export关键字，才能被Blazor通过模块访问到。最终代码如下：

// 无函数包裹的代码会在JS模块加载时自动执行（对应组件初始化阶段）
console.log("no function code");

// 自定义函数添加export，暴露给Blazor调用
export function MyLogFunction(){
    console.log("function1")
}

三、在Blazor组件中调用JS代码 #

1. 自动执行的代码 #

不需要额外操作，当TestComponent组件渲染时，Blazor会自动加载对应的JS模块，console.log("no function code")会自动执行。

2. 调用自定义函数MyLogFunction #

推荐两种调用方式，优先选第二种更规范的：

方式一：直接调用（快速简洁）

先在组件中注入IJSRuntime：

@inject IJSRuntime JS

然后在需要触发的场景（比如按钮点击）编写调用逻辑：

<button @onclick="CallMyLog">调用自定义JS函数</button>

@code {
    private async Task CallMyLog()
    {
        await JS.InvokeVoidAsync("MyLogFunction");
    }
}

方式二：模块引用（最佳实践）

这种方式符合JS模块化规范，避免全局污染，还能更好地管理资源：

@inject IJSRuntime JS
@implements IAsyncDisposable

<button @onclick="CallMyLog">调用自定义JS函数</button>

@code {
    private IJSObjectReference? _jsModule;

    // 组件初始化时加载JS模块
    protected override async Task OnInitializedAsync()
    {
        _jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./TestComponent.razor.js");
    }

    private async Task CallMyLog()
    {
        if (_jsModule != null)
        {
            await _jsModule.InvokeVoidAsync("MyLogFunction");
        }
    }

    // 组件销毁时释放JS模块资源
    public async ValueTask DisposeAsync()
    {
        if (_jsModule != null)
        {
            await _jsModule.DisposeAsync();
        }
    }
}

补充：若坚持使用全局模式（不推荐） #

如果不想用JS隔离，非要保留默认的类挂载逻辑，可修改JS代码如下：

export class TestComponent {
    MyLogFunction() {
        console.log("function1")
    }
}

window.TestComponent = TestComponent;

// 无包裹代码仍会自动执行
console.log("no function code");

在Blazor中调用的方式：

await JS.InvokeVoidAsync("TestComponent.prototype.MyLogFunction");

这种方式会污染全局作用域，不建议使用。

内容的提问来源于stack exchange，提问作者Regestea