在 Blazor WebAssembly 中使用 Ace 代码编辑器

作者：V君 发布于：2021-8-1 15:02 Sunday 分类：折腾手记

TL;DR for 急着想要知道怎么用的人

[源代码、快速上手文档]

用爽了和不爽都可以回来听我扯扯

最近开始摸 Blazor 的 WebAssembly 前端项目，尽管早就知道有 WebAssembly 的纯前端版本，但那时候似乎还不太稳定的样子，那就等等再用，保持关注，然后最近就发现它似乎已经可以用了。想拿来试试手又不想太 HelloWorld 就得找点事情做，比如博客管理界面啥的。（终于不咕了么）

其实在 Blazor WebAssembly 之前我就一直都盘算着用 Markdown 来撰写文章了，用 Ace 代码编辑器，然后节流发回后端用 Markdig 渲染了再丢回前端呈现预览，现在可好，用 WebAssembly 方式可以把「原生」.NET 库在浏览器运行了，再有就是 Blazor 的组件化以及前端路由，看起来已经能摆脱 js 和 vue 的束缚，当然目前调用 js 库还是得自己写一点胶水代码，将来生态丰富了就不需要自己胶了吧。

那就先从移植组件开始，参考了 Lucky Seven 的如何优雅的移植 JavaScript 组件到 Blazor，一边对着 Ace 的文档引入目前所需的 API。

起初在 index.html 引入 cdn 脚本，后来发现可以用 import 关键字在脚本文件里引入外部脚本，只是要补充一下库基址。于是就搞起了模块化胶水（JS、Interop、C♯）。使用起来没发现明显的问题，至于性能嘛，前端工程是跑在每个浏览器的，只要不是反应卡顿，都可以忽略掉（❌），可以不太在意性能，把代码写的好看点，这有啥毛病呀（

不扯了，来点类似下集预告之类的吧。整合了 Ace 代码编辑器之后，当然就是搭管理界面的前端工程。找到了个简单易懂的栗子，原来前端路由拦截这么简单。好了打住，欲知后事如何，且听下回分解w

标签: 软件开发 C# 前端工程

评论(0) 引用(0) 浏览(553)

Powered by emlog 去你妹的备案 sitemap