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