如何使用单纯的`WebAssembly`

简介: 如何使用单纯的`WebAssembly`

一般来说在.net core使用WebAssembly都是Blazor,但是Blazor渲染界面,.net core也提供单纯的WebAssembly这篇博客我将讲解如何使用单纯的WebAssembly

安装WebAssembly模板

dotnet new install Microsoft.NET.Runtime.WebAssembly.Templates

安装完成以后在vs的新建项目的时候会出现如图的模板

然后我们下一步创建一个WebAssembly的项目,WebAssembly的项目很单纯,项目结构如下图:

我们可以看到项目及其简单,分别查看文件代码

Program.cs

using System;
using System.Runtime.InteropServices.JavaScript;

Console.WriteLine("Hello, Browser!");

public partial class MyClass
{
   
   
    [JSExport]
    internal static string Greeting()
    {
   
   
        var text = $"Hello, World! Greetings from {GetHRef()}";
        Console.WriteLine(text);
        return text;
    }

    [JSImport("window.location.href", "main.js")]
    internal static partial string GetHRef();
}

main.js

// Licensed to the .NET Foundation under one or more agreements.
// The .NET Foundation licenses this file to you under the MIT license.

import {
   
    dotnet } from './dotnet.js'

const {
   
    setModuleImports, getAssemblyExports, getConfig } = await dotnet
    .withDiagnosticTracing(false)
    .withApplicationArgumentsFromQuery()
    .create();

setModuleImports('main.js', {
   
   
    window: {
   
   
        location: {
   
   
            href: () => globalThis.window.location.href
        }
    }
});

const config = getConfig();
const exports = await getAssemblyExports(config.mainAssemblyName);
const text = exports.MyClass.Greeting();
console.log(text);

document.getElementById('out').innerHTML = text;
await dotnet.run();

index.html

<!DOCTYPE html>
<!--  Licensed to the .NET Foundation under one or more agreements. -->
<!-- The .NET Foundation licenses this file to you under the MIT license. -->
<html>

<head>
  <title>WebAssemblyDemo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="modulepreload" href="./main.js" />
  <link rel="modulepreload" href="./dotnet.js" />
</head>

<body>
  <span id="out"></span>
  <script type='module' src="./main.js"></script>
</body>

</html>

这些代码及其简单,如果在遇到js性能瓶颈的时候就可以使用当前这种模式,使用单纯的WebAssembly去提高我们的产品性能

试试看执行一下程序,效果如下图:

目录
相关文章
|
7月前
|
编解码 JavaScript 前端开发
JavaScript 01 入门基础
JavaScript 01 入门基础
21 1
|
5天前
|
JavaScript 前端开发 Java
webgl学习笔记2_javascript基础快速学习
webgl学习笔记2_javascript基础快速学习
13 0
|
7月前
|
前端开发 JavaScript 开发者
带你读《现代Javascript高级教程》九、前端模块化(1)
带你读《现代Javascript高级教程》九、前端模块化(1)
|
7月前
|
前端开发 JavaScript
带你读《现代Javascript高级教程》九、前端模块化(2)
带你读《现代Javascript高级教程》九、前端模块化(2)
|
7月前
|
JavaScript 前端开发 开发者
带你读《现代Javascript高级教程》二十、JavaScript修饰器:简化代码,增强功能(4)
带你读《现代Javascript高级教程》二十、JavaScript修饰器:简化代码,增强功能(4)
|
7月前
|
JavaScript 前端开发 索引
带你读《现代Javascript高级教程》二十、JavaScript修饰器:简化代码,增强功能(3)
带你读《现代Javascript高级教程》二十、JavaScript修饰器:简化代码,增强功能(3)
|
JavaScript 前端开发 Java
Web阶段:第三章:JavaScript语言(上)
Web阶段:第三章:JavaScript语言
|
缓存 JavaScript 前端开发
你不容错过的JavaScript高级语法(模块化)
你不容错过的JavaScript高级语法(模块化)
|
JavaScript 前端开发 Java
JavaScript基础——简介
JavaScript基础——简介
106 0
JavaScript基础——简介
|
前端开发 JavaScript 安全
一分钟入门 Babel(下一代 JavaScript 语法的编译器)
简单来说把 JavaScript 中 es2015/2016/2017/2046 的新语法转化为 es5,让低端运行环境(如浏览器和 node )能够认识并执行。严格来说,babel 也可以转化为更低的规范。但以目前情况来说,es5 规范已经足以覆盖绝大部分浏览器,因此常规来说转到 es5 是一个安全且流行的做法。

热门文章

最新文章