blazor js隔离 JavaScript 模块中的 JavaScript 隔离

文档连接:在 ASP.NET Core Blazor 中从 .NET 方法调用 JavaScript 函数 | Microsoft Docs

Blazor 在标准 JavaScript 模块（ECMAScript 规范）中启用 JavaScript (JS) 隔离。

JS 隔离具有以下优势：

导入的 JS 不再污染全局命名空间。

库和组件的使用者不需要导入相关的 JS。

例如，以下 JS 模块导出用于显示浏览器窗口提示的 JS 函数。 将以下 JS 代码置于外部 JS 文件中。

wwwroot/scripts.js:

JavaScript复制

exportfunctionshowPrompt(message){returnprompt(message,'Type anything here');}

将前面的 JS 模块作为 wwwroot 文件夹中的静态 Web 资产添加到应用或类库中，然后通过调用 IJSRuntime 实例上的 InvokeAsync 将该模块导入 .NET 代码。

IJSRuntime 将模块作为 IJSObjectReference 导入，它表示对 .NET 代码中 JS 对象的引用。 使用 IJSObjectReference 调用从模块导出的 JS 函数。

Pages/CallJsExample6.razor:

razor复制

@page "/call-js-example-6"@implements IAsyncDisposable@inject IJSRuntime JS

Call JS Example 6

Trigger browser window prompt

@result

@code {privateIJSObjectReference module;privatestringresult;protectedoverrideasyncTaskOnAfterRenderAsync(boolfirstRender){        if (firstRender)        {module = await JS.InvokeAsync("import","./scripts.js");}    }privateasyncTaskTriggerPrompt(){        result = await Prompt("Provide some text");    }publicasyncValueTaskPrompt(stringmessage){return await module.InvokeAsync("showPrompt", message);}asyncValueTask IAsyncDisposable.DisposeAsync(){        if (module is not null)        {            await module.DisposeAsync();        }    }}

在上面的示例中：

按照约定，import 标识符是专门用于导入 JS 模块的特殊标识符。

使用稳定的静态 Web 资产路径 ./{SCRIPT PATH AND FILENAME (.js)} 指定该模块的外部 JS 文件，其中：

若要创建 JS 文件的正确静态资产路径，需要当前目录 (./) 的路径段。

{SCRIPT PATH AND FILENAME (.js)} 占位符是 wwwroot 下的路径和文件名。

动态导入模块需要网络请求，因此只能通过调用 InvokeAsync 来异步实现。

IJSInProcessObjectReference 表示对某个 JS 对象的引用，该对象的函数可以同步进行调用。

 备注

当外部 JS 文件由 Razor 类库提供时，使用其稳定的静态 Web 资产路径 ./_content/{PACKAGE ID}/{SCRIPT PATH AND FILENAME (.js)} 指定模块的 JS 文件：

若要创建 JS 文件的正确静态资产路径，需要当前目录 (./) 的路径段。

{PACKAGE ID} 占位符是库的包 ID。 如果项目文件中没有指定 ，则包 ID 默认为项目的程序集名称。 在下面的示例中，库的程序集名称为 ComponentLibrary，并且库的项目文件未指定 。

{SCRIPT PATH AND FILENAME (.js)} 占位符是 wwwroot 下的路径和文件名。 在以下实例中，外部 JS 文件 (script.js) 置于类库的 wwwroot 文件夹中。

C#复制

varmodule =awaitjs.InvokeAsync("import","./_content/ComponentLibrary/scripts.js");

有关详细信息，请参阅 使用 Razor 类库中的 ASP.NET Core Razor 组件。