能否在Blazor中导入导出的JavaScript模块类作为互操作类使用？

完全可以实现。ES6模块原生支持导出类，Blazor的JS互操作桥接了浏览器原生的ES6动态导入能力，没有语法层面的限制，只要浏览器能解析的模块导出内容都可以正常调用。

改造JS端 #

保持原有js文件的路径不变，把原来的独立函数导出改成标准ES6类导出即可，示例：

// 文件路径：RCL项目 wwwroot/_content/你的项目命名空间/exampleJsInterop.js
export class PromptHelper {
  // 构造函数可接收初始配置参数
  constructor(defaultPromptText = 'Type anything here') {
    this.defaultPromptText = defaultPromptText;
  }

  // 实例方法，和普通JS类写法完全一致
  showPrompt(message) {
    return prompt(message, this.defaultPromptText);
  }

  showAlert(message) {
    alert(message);
  }
}

你完全可以在导出的类里写静态方法、继承其他类、引入其他JS模块依赖，只要浏览器原生支持的ES6特性都可以正常使用，不需要做特殊适配。

改造C#端互操作逻辑 #

核心逻辑和默认模板的区别是：拿到JS模块后，先从模块中取出导出的JS类，再通过JS引擎实例化类的对象，拿到对象引用后就可以正常调用实例上的方法。
改造后的代码示例：

public class ExampleJsInterop : IAsyncDisposable
{
    // 模块懒加载逻辑和原模板完全一致
    private readonly Lazy<Task<IJSObjectReference>> moduleTask;
    // 新增：保存JS类的实例引用
    private IJSObjectReference? _promptHelperInstance;

    public ExampleJsInterop(IJSRuntime jsRuntime)
    {
        moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>(
           "import", "./_content/MyNamespace/exampleJsInterop.js").AsTask());
    }

    public async ValueTask<string> Prompt(string message)
    {
        // 1. 按需加载JS模块
        var module = await moduleTask.Value;
        // 2. 懒初始化JS类实例：等价于JS里的 new PromptHelper("自定义默认文案")
        _promptHelperInstance ??= await module.InvokeAsync<IJSObjectReference>(
            "PromptHelper", 
            "我是自定义的默认提示文案");
        // 3. 调用JS实例上的方法
        return await _promptHelperInstance.InvokeAsync<string>("showPrompt", message);
    }

    public async ValueTask ShowAlert(string message)
    {
        var module = await moduleTask.Value;
        _promptHelperInstance ??= await module.InvokeAsync<IJSObjectReference>("PromptHelper", "默认提示文案");
        await _promptHelperInstance.InvokeVoidAsync("showAlert", message);
    }

    public async ValueTask DisposeAsync()
    {
        // 先释放JS类实例
        if (_promptHelperInstance != null)
        {
            await _promptHelperInstance.DisposeAsync();
            _promptHelperInstance = null;
        }
        // 再释放JS模块，和原模板逻辑保持一致
        if (moduleTask.IsValueCreated)
        {
            var module = await moduleTask.Value;
            await module.DisposeAsync();
        }
    }
}

实操注意点 #

• 静态资源路径不能错：Razor类库的静态资源必须放在项目的wwwroot目录下，引用路径固定为./_content/你的RCL项目根命名空间/对应文件路径，路径错误会直接触发404加载失败。
• 传参规则和普通JS互操作完全一致：JS类构造函数、实例方法的参数和返回值，都会按照Blazor默认的序列化规则自动转换，不需要额外编写序列化逻辑。
• JS类的静态方法可以直接通过模块引用调用，不需要实例化：比如JS类里定义了静态属性/方法，C#端拿到模块后可以直接通过模块引用取值/调用，效率和普通模块导出的静态方法没有区别。
• 这种写法没有额外的性能开销，和默认模板导出独立函数的运行效率基本一致，底层走的是同一个ES6模块加载通道。

内容的提问来源于stack exchange，提问作者Mike-E