关注
分享
文章平均质量分 78
IOTerm 是一个简单的前端终端模拟组件，但为了充分利用可视化页面的特性并且减小组件的大小，提高运行效率，IOTerm 与常用的终端存在些许差异。简单地说，IOTerm 只保证正常的输入（I）和正确的显示（O）。
小鸟张开翅膀
南京理工大学在读博士研究生，主攻方向为三维点云目标检测。
展开
-
前端模拟终端（六）：快捷输入的好助手、终端的灵魂之补全和提示
IOTerm 的补全和提示功能是与真实终端最不一样的地方。 IOTerm 提供了 setTabHandler(tabHandler: Function) 方法用于设置处理补全和提示的函数。该函数有两个输入参数，一是用户输入的内容，二是当前输入光标的位置。返回值必须是字符串数组，或者空数组。具体操作如下： 补全和提示功能同样由 <Tab> 键触发。第一次按 <Tab>...原创 2020-02-17 19:32:40 · 371 阅读 · 0 评论 -
前端模拟终端（五）：看谁用了 rm -rf / 之历史记录
IOTerm 的历史记录功能完全模仿真是终端，需要具备一下特性： 上下键选择历史记录。 若修改了某条历史记录但未按回车键，则该条历史记录被修改，知道在该条历史记录处按下回车。 修改某条历史记录且按回车键后，产生新的历史记录，而不改变原本的历史记录。 空行回车不被保存在历史记录中。 为了实现以上功能，设历史记录数据结构： interface historyItem { value: st...原创 2020-02-17 19:18:47 · 572 阅读 · 0 评论 -
前端模拟终端（四）：显示、输入与光标
在前端模拟终端（二）中也介绍了关于输入与光标的内容。这一篇主要讲在 IOTerm 中是怎样实现的。 首先，显示选用的元素是 div，但是不是直接把字符串扔进 div 里就完事了。而是给每一个字符都穿上 span 小衣服，就连空格也不放过，要包裹成<span> </span>，为什么不是<span> </span>呢？因为这样...原创 2020-02-17 16:09:42 · 1201 阅读 · 1 评论 -
前端模拟终端（三）：文本显示与自动换行
前面都在说 IOTerm 中使用 div 显示文本，但其实一开始选用的是 pre 元素，因为它可以原模原样的显示，而不会少了空格。 pre 默认使用等宽字体，这也正好符合终端的需要。但是 pre 默认是不会自动换行的，文本会超出元素范围，也就是 white-space 为 pre。可以将 white-space 改成 pre-wrap，这样就可以既保留空格又能正常换行了。但是因为默认的 w...原创 2020-02-17 15:39:08 · 1355 阅读 · 0 评论 -
前端模拟终端（二）：部分可输入而部分不可修改的多行文本域
一开始也没任何头绪，除了 Google，其他可以想到的工具都用上了，找到了两个不错的项目。一个是 xterm.js，另一个是简诗。它们都使用了 canvas，不过我没有使用 canvas，主要是因为我没有用过，而且也不觉得需要使用。当然，对于如何实现一个部分可输入而部分不可修改的多行文本域，它们给出了一致答案：用一个元素来显示，用一个元素来输入。比如，用 canvas 来绘制，用 input ...原创 2020-02-17 14:29:23 · 744 阅读 · 0 评论 -
前端模拟终端（一）：如果我的这款 IOTerm 不是你想要的
能找到的前端模拟终端并不多，其中 xterm 最有名气。其功能全、性能好，就是代码太多，不知从何下手。索性自己开发一个吧！之前断断续续完成了基本功能。这几天，趁着疫情被困在家，完善了暂时所需的功能。准确地说，调整了主要结构，重写了大部分代码。 起名 IOTerm 是因为要求它只负责输入（Input）与输出（Output）部分，而不要管其他的事情。至于如何处理输入的数据，包括命令和没有含义的...原创 2020-02-17 13:19:46 · 1162 阅读 · 0 评论