JavaScript实现命令行交互

原文地址: http://www.cnblogs.com/liaoyu/p/js-terminal.html

周末闲着想试试用 JavaScript 模拟命令行交互的功能，希望达到的几个功能点如下：

1. 基本字符的输入
2. 光标移动
3. JS解析命令及相应的异常处理并输出结果
4. 记住命令历史可通过上下方向键切换
5. 几个快捷键，比如 Ctrl+L 清屏

实现相关

库依赖： jQuery 、 underscore.js

初始化的 DOM 结构如下：

<div id="panel-shell">
    <div class="output-view">
        Welcome to js-terminal, Type "help" for more information.
    </div><br />

    <div class="shell-view">
        <span class="prompt">$</span>&nbsp;<span class="input"><span class="left"></span><span class="cursor blink">&nbsp;</span><span class="right"></span></span>
    </div>
</div>

命令输入区由 left cursor right 三个span组成， 注意，这三个span之间不能留有间隙，不然浏览器在显示的时候它们也会有间距。

获取字符输入时使用 keypress 事件：

1. keydown: 当用户按下键盘上的任意键时触发
2. keypress: 当用户按下键盘上的字符键时触发

$(document).keypress(function(e) {
    if (e.which === 32) {       // space
        $left.append(' ');
    } else if(e.which !== 13) { // enter
        $left.append(String.fromCharCode(e.which));
    }
});

注意： jQuery 对获取按下的键对应的ASCII码进行了封装，早期的IE只支持 event.keyCode ，而W3C的标准是 event.which ，所以现在标准的做法也是使用 event.which ，keydown事件获取的keyCode值不区别大小写，例如输入a和A都是65。最后将获取的ASCII值转换成字符使用 String.fromCharCode ，它是一个静态方法。

解析命令时，直接使用 eval， 囧

try {
    val_ouput = eval(cmd);
} catch (e) {
    val_ouput = '\'' + cmd + '\': command not found';
}

命令执行完毕后，使用 underscore.js 的模版引擎输出结果，模版如下：

var template_output = _.template('<div class="output-view"><span class="prompt"><%= separate %></span>&nbsp;<span class="output<%= error %>"><%= value %></span></div>');
$shell.before(template_output({separate:'&gt;', value:val_ouput, error: err_class}) + '<br />');

将历史命令保存到一个数组里，每次敲回国时将新命令加入到历史记录里，可通过上下方向键进行切换。

使用快捷键 Ctrl+L 进行清屏：

if (e.which === 76 && e.ctrlKey) {   // Ctrl + L
    e.preventDefault();

    $shell.siblings().remove();
}

最后，来一张效果图 (黑色背景是我的最爱了)

在线演示

参考链接

其实已经存在功能相当完善的JS命令终端库

https://github.com/jcubic/jquery.terminal

https://github.com/sdether/josh.js