如何使用 jQuery 构建像网站这样的简单终端？

终端是开发人员最常用的工具之一。许多应用程序，框架，甚至是编程语言有更多的函数，可以使用命令行界面来调用。大多数计算机在其操作系统中至少配备了一个终端，现在大多数被 Windows 中的跨平台 powershell 和基于 Linux 的操作系统中的 Linux 控制台所取代。

到目前为止，大多数人已经将终端理解为系统应用程序，但是我们如何在浏览器中构建像网站一样的终端。因为JavaScript得到了我们的支持，这些终端喜欢并感觉像一个系统终端，但没有它们那么强大，但它们为我们完成了工作，感谢一些开发人员，我们得到了一些库来帮助我们，而不是从划痕。一些库是jQuery.terminal、Xtermjs，在本教程中我们将使用 JQuery.terminal

现在打开你最喜欢的代码编辑器并创建我们的基本 html 文件，主要是 index.html 并调用我们的依赖项

网页主体是空的，因为它是我们编写 JavaScript 代码的地方。让我们写下我们的第一个命令

Javascript

// In body tag
$('body').terminal({
    iam: function (name) {
        this.echo('Hello, ' + name +
            '. Welcome to GeeksForGeeks');
    }
}, {
    greetings: 'GeeksForGeeks - A place to'
            + ' learn DS, Algo and Computer'
            + ' Science for free'
});

在上面的 JavaScript 代码中，我们使用 jQuery 将文档的正文部分放入终端函数。然后我们在终端函数创建另一个函数，它接受一个参数。 iam是我们创建的命令，它打印作为参数传递的你的名字，欢迎来到 GeeksForGeeks。

每次加载页面时都会在页面顶部打印默认命令中的问候语。它还插件还包含一个错误命令，当命令不存在时打印出来

简单的 iam 命令

我们还可以编写额外的命令，如打印 GeeksForGeeks 创始人姓名的创始人命令和打印的帮助命令。这两个命令都是不带参数传递的

Javascript

$('body').terminal({
    iam: function (name) {
        this.echo('Hello, ' + name
        + '. Welcome to GeeksForGeeks');
    },
    founder: function () {
        this.echo('Sandeep Jain');
    },
    help: function () {
        this.echo('iam - iam command and'
        + ' pass your name as argument'
        + '\nfounder to know the founder');
    },
}, {
    greetings: 'GeeksForGeeks - A place to'
    + ' learn DS, Algo and Computer Science'
    + ' for free'
});

可用命令

现在，我们将使用 style 标签更改一些样式，我们为所有文本使用绿色并增加文本大小

HTML

完整代码如下

HTML

 

    
 
    
 
    
    
 
    
    
 
    
 
    
        .terminal,
        span,
        .cmd,
        div {
            --color: rgba(0, 128, 0, 0.99);
        }
 
        .terminal,
        span {
            --size: 1.4;
        }
    

 

    
        $('body').terminal({
            iam: function (name) {
                this.echo('Hello, ' + name +
                    '. Welcome to GeeksForGeeks');
            },
            founder: function () {
                this.echo('Sandeep Jain');
            },
            help: function () {
                this.echo('iam - iam command and '
                + 'pass your name as argument\n'
                + 'founder to know the founder');
            },
        }, {
            greetings: 'GeeksForGeeks - A place to'
                + ' learn DS, Algo and Computer '
                + 'Science for free'
        });
    

 

使用 devtools 完成输出

您已经构建了一个简单的交互式终端网站并对其进行了自定义。 jquery.terminal 还可以做一些其他的事情，比如

• 格式和语法高亮。
• JSON-RPC 一切都在服务器上（在 wiki 的解释器部分找到）。
• 改变提示。
• 屏蔽密码。
• 验证。
• 像在 UNIX 终端中一样将命令与 Pipe运算符组合在一起。
• 键盘快捷键（您可以在此处找到内置列表）。
• 读取用户的文本。
• 处理表情符号（如果系统不像 Windows10 那样开箱即用）。
• 从 JavaScript 执行命令。
• 从服务器调用命令和终端方法。
• 更新线路。
• 在 URL 哈希中保存状态并执行保存的命令。

您可以从 docs 和 github 中了解有关 jQuery.terminal 的更多信息