专业编程教程与实战项目分享平台

网站首页 > 技术文章 正文

Termino.js :下一代创意无限的终端模拟器!

ins518 2024-12-02 20:35:43 技术文章 5 ℃ 0 评论

大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 Termino.js

Create a web based terminal on any website - great for games, animations and real world apps!

Termino.js 是一个高度可定制的前端组件，用纯 JavaScript 编写，非常适合在任何网站上制作基于 Web 的终端动画、游戏和应用程序，包括：支持基于 curses 的应用程序、用户命令的自定义函数、键代码和鼠标事件等等。

Termino.js 的典型特征包括：

  • 快速：Termino.js 是轻量级的，用纯 JavaScript 构建
  • 独立 & 可定制：无需任何依赖即可工作、允许自定义
  • 非常适合动画：可以轻松制作终端动画并引入最喜欢的 TypeScript 库
  • 输入：支持通过 Promise / await 返回的问题输入
  • 支持多个实例：允许在页面中创建多个自定义终端
  • HTML 支持：支持向终端添加 HTML 元素，例如：链接等
  • 允许自定义函数：轻松创建自定义函数，包括：用户命令函数、键代码函数和鼠标事件函数

Termino.js 的典型用例包括：

  • 在浏览器中构建命令行界面 (CLI)
  • 构建终端仿真器，例如：bash 等
  • 为 Web 应用程序创建交互式教程或演示
  • 构建实时协作编码环境
  • 创建用于 Web 开发的调试和测试工具
  • 开发聊天机器人或对话界面、支持连接到远程 SSH 服务器
  • 为 Web 应用程序构建自定义 shell 或终端
  • 创建用于调试和测试 Web 应用程序的自定义开发人员工具。

目前 Termino.js 在 Github 通过 MIT 协议开源，是一个值得关注的前端开源项目。

如何使用 Termino.js

要在网页 / HTML 页面中使用 Termino.js，首先需要定义一个 HTML div 标签，其中包含终端的类或 ID，以及一个输入标签，其类名为 termino-input，用于终端输入。

此外，还有一个 HTML 标签，其类名为 termino-console，用于终端输出。然后创建一个新的终端实例并将 DOM 元素转换为实时终端，如下例所示：

<!doctype html>
  <html>
    <head>
    <title>Termino.js Basic Example</title>
    </head>
    <body>
      <div id="terminal">
      <pre><code class="termino-console"></code></pre>
      <textarea class="termino-input" rows="1" wrap="hard"></textarea>
      </div>
      <script type="module">
      //   通过模块化导入
        import {Termino} from 'https://cdn.jsdelivr.net/gh/MarketingPipeline/Termino.js@v1.0.0/dist/termino.min.js';
        let term= Termino(document.getElementById("terminal"))
        term.echo("Hello world from https://github.com/MarketingPipeline")
      </script>
    </body>
  </html>

更多关于 Termino.js 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/MarketingPipeline/Termino.js

https://github.com/MarketingPipeline/Termino.js/wiki/1.-Getting-Started https://github.com/MarketingPipeline/Termino.js/wiki

Tags：

猜你喜欢

本文暂时没有评论，来添加一个吧(●'◡'●)

欢迎 你 发表评论:

最近发表
标签列表