JavaScript Interop - Add JavaScript in Blazor
2022. 4. 25. 00:00ㆍASPNET/Blazor
반응형
자바스크립트 모듈과 표준(??)자바스크립트
//a javascript module:
export function exampleFunction()
{
alert("Hello World")
}
//A standard JavaScript:
function exampleFunction()
{
alert("Hello World")
}
전역으로 미리 javascript 로드하기
장점
구현하기 쉽다.
일부 특정 라이브러리에 적용할 수 있다.
단점
첫번째 렌더링을 느리게 만든다.
명명풀을 오염시켜서 javascript 충돌이 발생될 수 있다.
구현
global.js 파일을 wwwroot/js/ 에 넣습니다.
Pages/_Layout.cshtml 에 다음과 같은 코드를 추가합니다.
<script src="~/js/global.js"></script>
<body>
...
<script src="_framework/blazor.server.js"></script>
<script src="~/js/global.js"></script>
...
</body>
요청시에 javascript 로드 하기
장점
첫번째 렌더링이 빠르다.
명명풀을 오염시키지 않아 javascript 충돌이 발생되지 않는다.
특정 라이브러리에 적용할 수 있다. (격리가능하다)
단점
더많은 코드를 작성해야 한다.
구현
wwwroot 폴더 아래에 javascript 모듈 파일을 넣는다.
{ComponentName}.razor 와 같은 이름으로 만든다.
{ComponentName}.razor.js
@inject IJSRuntime JS
@implements IAsyncDisposable
...
...
@code {
private Lazy<IJSObjectReference> ExampleModule = new();
...
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
ExampleModule = new(await JS.InvokeAsync<IJSObjectReference>("import", "./js/exampleModule.js"));
}
}
public async ValueTask DisposeAsync()
{
if(ExampleModule.IsValueCreated)
{
await ExampleModule.Value.DisposeAsync();
}
}
...
}
관련영상
반응형
'ASPNET > Blazor' 카테고리의 다른 글
| JavaScript Interop - CallingJavaScript 2/2 (0) | 2022.04.27 |
|---|---|
| JavaScript Interop - CallingJavaScript 1/2 (0) | 2022.04.26 |
| Generic Projection (0) | 2022.04.22 |
| Content Projection (0) | 2022.04.21 |
| Component 간 데이터 공유 - Transfer Service (0) | 2022.04.20 |