前端架构: 脚手架命令行交互核心实现之inquirer和readline的应用教程

命令行交互核心实现

  • 核心目标:实现命令行行交互,如List
  • 命令行的交互呢比命令行的渲难度要更大,因为它涉及的技术点会会更多
  • 它涉及以下技术点
    • 键盘输入的一个监听 (这里通过 readline来实现)
    • 计算命令行窗口的尺寸
    • 清屏
    • 光标的移动
    • 输出流的静默 (我们输出的内容, 不让它去输出到当前的这个终端中)
    • 借助输入输出流,引出输入输出流的一个监听以及事件库 events
    • ansi escaped code 转义字符
  • 命行交互其实是有一定复杂度的, 在这个过程中,最重点的库和命行交互最重点库是两个 readlineinquirer

inquirer

  • inquirer 是一个命令行交互常用的库,Weekly Downloads 30,375,340 (动态数据)
  • 作为一个命令行交互的库能做到这个程度,可以说是非常的不简单,而且一直在持续的进行维护,目前已经达到9.2.15版本了
  • 安装 $ npm i -S inquirer
  • 使用示例1:input类型演示
    import inquirer from 'inquirer';
    inquirer.prompt([{type: 'input',name: 'yourName',message: 'your name:',}]).then((answers) => {console.log(answers);}).catch((error) => {if (error.isTtyError) {// Prompt couldn't be rendered in the current environment} else {// Something else went wrong}});
    
    • 这里根据文档上的框架结构
    • 通过 type, name, message 三个字段即可完成初始化创建
    • 更多,参考文档:https://www.npmjs.com/package/inquirer#question
效果实例
  • 另外,比较常用的还有
    • default 默认值字段
    • validate 字段是一个回调
      • 用于对字段的校验,只有校验返回 true的时候校验才会结束
    • transformer 字段用于处理信息展示的回调
      • 也就是这个函数内部返回的值是展示的值
      • 返回的值还是之前的 name 字段
      • 更多的像是表单中的 placeholder 仅作为展示
    • filter 字段是一个回调
      • 它会最终改变 answers 最终的结果
      • 会最终改变 name 字段
  • 其他: choice 在匹配 List 列表的时候会用到
  • 注意,prompt 方法内部接受的是一个数组,可以写多个对象来收集数据
  • 使用示例2: 多字段演示
    import inquirer from 'inquirer';inquirer.prompt([{type: 'input',name: 'yourName',message: 'your name:',default: 'Lee',validate: function(v) {return v === 'Wang'},transformer: function(v) {return 'your input name: ' + v // 仅作为展示},filter: function(v) {return v;// return v + '123' // 改变最终值}},{type: 'number', // 这种,在没有 validate 的情况下,如果输入的是非数字, 会变成 NaNname: 'num',message: 'your number',},// ...]).then((answers) => {console.log(answers); // 最终打印的是一个对象,多个字段}).catch((error) => {if (error.isTtyError) {// Prompt couldn't be rendered in the current environment} else {// Something else went wrong}});
    
    • 在示例1中已做了详细说明,这里不再赘述
效果实例
  • 使用示例3: confirm 类型演示
    import inquirer from 'inquirer';inquirer.prompt([{type: 'confirm', // 二选一功能name: 'choice',message: 'your choice:',default: false,},]).then((answers) => {console.log(answers);}).catch((error) => {if (error.isTtyError) {// Prompt couldn't be rendered in the current environment} else {// Something else went wrong}});
    
效果实例
  • 使用示例4: list 类型演示
    import inquirer from 'inquirer';inquirer.prompt([{type: 'list', // 列表单选name: 'choice',message: 'your choice:',default: 0, // 这里 default 是 下面choices 的索引choices: [{value: 1, name: 'LiLy'},{value: 2, name: 'Lucy'},{value: 3, name: 'Lee'},]},]).then((answers) => {console.log(answers);}).catch((error) => {if (error.isTtyError) {// Prompt couldn't be rendered in the current environment} else {// Something else went wrong}});
    
效果实例
  • 使用示例5: expend 类型演示
    import inquirer from 'inquirer';inquirer.prompt([{type: 'expand', // 简写选择name: 'choice',message: 'your choice:',default: 'red',choices: [{value: 'red', key: 'R'},{value: 'green', key: 'G'},{value: 'blue', key: 'B'},]},]).then((answers) => {console.log(answers);}).catch((error) => {if (error.isTtyError) {// Prompt couldn't be rendered in the current environment} else {// Something else went wrong}});
    
    • 简写选择功能,除了 Rgb 还有一个 h
    • 输入 h 回车,会得到 help 提示,列出了所有选项
    • 输入 r 回车,会得到 red, 输入 g 回车,会得到 green
效果实例
  • 使用示例6: checkbox 类型演示
    import inquirer from 'inquirer';inquirer.prompt([{type: 'checkbox', // 复选框name: 'choice',message: 'your choice:',default: 0,choices: [{value: 1, name: 'Lily'},{value: 2, name: 'Lucy'},{value: 3, name: 'Lee'},]},]).then((answers) => {console.log(answers);}).catch((error) => {if (error.isTtyError) {// Prompt couldn't be rendered in the current environment} else {// Something else went wrong}});
    
    • 这里提供 a 全选,空格键 选中,i 反选的功能
    • 默认,上下箭来选择
效果实例
  • 使用示例7: password 类型演示
    import inquirer from 'inquirer';inquirer.prompt([{type: 'password', // 密码框name: 'password',message: 'your password:',},]).then((answers) => {console.log(answers);}).catch((error) => {if (error.isTtyError) {// Prompt couldn't be rendered in the current environment} else {// Something else went wrong}});
    
效果实例
  • 使用示例8: editor 类型演示
    import inquirer from 'inquirer';inquirer.prompt([{type: 'editor', // 编辑器name: 'editor',message: 'your editor text:',},]).then((answers) => {console.log(answers);}).catch((error) => {if (error.isTtyError) {// Prompt couldn't be rendered in the current environment} else {// Something else went wrong}});
    
效果实例
  • 上面中间的这个类似 vim 的界面,会在一个缓存文件中,输入完以后,缓存文件被删除掉
  • 我们输入的结果会被保留下来,如上图
  • 这样做的好处是在文本编辑器中输入复杂的内容

readline

  • readline,是 nodejs 当中的一个内置库,主要帮我们去管理数据流的
  • 命令行当中要交互的方式,一定是需要用户提供一些输入的
  • readline 就可以很好的帮我们去一次一次的读取这个输入流
  • 注意,这个输入不仅是指我们输入一些字符,还包含我们键盘上输入的一切,如上,下,空格,回车等
  • 基本使用
    import * as readLine from 'readline';const rl = readLine.createInterface({input: process.stdin,output: process.stdout,
    });rl.question('your name: ', (answer) => {console.log(answer);rl.close(); // 关闭读取流
    })
    
  • readline 主要用途是根据传入的输入流逐行读取信息
  • 回车的时候,会认为这行输入结束,并且把所有输入的内容传递到输出流中进行展示
  • 这是readline的核心用途
  • 如果调试 readline 源码,可知,它内部会强制将函数转换为构造函数
    if (!(this instanceof Interface)) {return new Interface(input, output, completer, terminal);
    }
    
  • 接着是对 StringDecoder的判断和赋值,这个也是node的一个内置库
    if (StringDecoder === undefined) {StringDecoder = require('string_decoder').StringDecoder;
    }
    
  • 再之后,定义了一些列的参数,调用了 EventEmitter
    EventEmitter.call(this)
    
    • 这个用途是使用 this 继承 EventEmitter, this内部就会生成一些列的属性信息,如 _events, _eventsCount
    • 让当前 Interface 实例具备事件驱动的能力,因为nodejs有单线程,非阻塞IO,事件驱动的特性
    • 也就是说事件驱动,在单线程的nodejs中是非常重要的
  • 再接着,定义一些参数, 对 input 进行判断,也就是分析 input 参数
    if (input && input.input) {// ....
    }
    
  • 再往后找,看readline是如何做事件监听的
    this.output = output; // output: WriteStream 系统输出流
    this.input = input; // input: ReadStream 系统输入流// ...emitKeypressEvents(input, this) // 这里就是监听用户在终端中的键盘输入
    
    • 在 emitKeypressEvents 函数内部,会调用一个 emitKeys 的方法
    • 这里是核心, 其原理和源码不在这里进行剖析

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/706706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AUTOSAR通信篇 -Communication(COM)

文章目录 模块依赖PDU RouterCom UserRuntime Environment(RTE)SwCluC功能介绍通用功能AUTOSAR COM基础大小端转换和符号扩展过滤信号网关正常操作启动行为前置条件初始化

关于年化收益率的思考

近期,对于投资的年化收益率有一些思考,想着将这些思考整理一下,顺便也就记录在这里。 1. 计算方式 年化收益率常见的计算有三种:算数平均,几何平均,IRR。 1.1 算术平均 算数平均用于度量产品的回报率&a…

MetaGPT 1 安装与配置踩坑实录

安装 与 配置直接参考这里就行:Hugging Muti Agent(二月学习) - 飞书云文档 (feishu.cn) 这里按照教程安装的是metagpt 0.6.6 ,经过跟0.7.0对比,个人认为0.7对其他llm接入可能更好,文档也更清晰。 0.6.6的…

uniapp android 原生插件开发-测试流程

前言 最近公司要求研究一下 uniapp 的 android 原生插件的开发,为以后的工作做准备。这篇文章记录一下自己的学习过程,也帮助一下有同样需求的同学们 : ) 一、下载安装Hbuilder X , Android studio(相关的安装配置过程网上有很多,…

springboot + easyRules 搭建规则引擎服务

依赖 <dependency><groupId>org.jeasy</groupId><artifactId>easy-rules-core</artifactId><version>4.0.0</version></dependency><dependency><groupId>org.jeasy</groupId><artifactId>easy-rules…

阿里巴巴淘口令API的安全保障措施在电商领域的应用与实践

在电商领域&#xff0c;阿里巴巴淘口令API的安全保障措施是非常重要的&#xff0c;因为它们确保了数据的机密性、完整性和可用性。以下是一些关于阿里巴巴淘口令API安全保障措施在电商领域的应用与实践&#xff0c;并附带相关代码示例&#xff1a; 1. 身份验证和授权 应用示例…

VoIP之AVPF(Audio-Visual Profile with Feedback)

在VoIP音视频通话中&#xff0c;接收者可以依赖rtcp机制向发送者报告RTP数据接收的统计情况&#xff0c;以便发送者根据接收情况&#xff08;丢包数量等&#xff09;调整传输行为&#xff08;发送速率等&#xff09;。由于基本的RTCP统计报告是定期发送的&#xff0c;通过该机制…

安全运营中心(SOC)综合指南

什么是安全运营中心&#xff08;SOC&#xff09; 安全运营中心&#xff0c;也称为信息安全运营中心 &#xff08;ISOC&#xff09;&#xff0c;是结构良好的网络安全战略的核心。安全运营中心是一个集中式枢纽&#xff0c;无论是在组织内部还是外包&#xff0c;都致力于对整个…

云计算时代的运维: 职业发展方向与岗位选择

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua&#xff0c;在这里我会分享我的知识和经验。&#x…

Nginx网络服务五-----rewrite和反向代理

1.rewrite 1.1rewrite指令 通过正则表达式的匹配来改变URI&#xff0c;可以同时存在一个或多个指令&#xff0c;按照顺序依次对URI进行匹配&#xff0c;rewrite主要是针对用户请求的URL或者是URI做具体处理 官方文档&#xff1a; https://nginx.org/en/docs/http/ngx_http_r…

numpy数组索引

文章目录 简介索引方法 简介 numpy是python中最常用的科学计算包&#xff0c;而数组则是是numpy的核心类型&#xff0c;也是Python称为科学计算领域首选语言的关键类型&#xff0c;可以不夸张地说&#xff0c;正是数组类型的强大与易用性&#xff0c;筑就了Python帝国。 和Py…

自动驾驶消息传输机制-LCM

需要用到LCM消息通讯&#xff0c;遂研究下。 这里写目录标题 1 LCM简介2. LCM源码分析3 LCM C教程与实例3.1 安装配置及介绍3.2 创建类型定义3.3 初始化LCM3.4 发布publish一个消息3.5 订阅和接收一个消息3.6 LCM进程间通讯3.7 注意事项&#xff1f;3.7.1 当数据结构定义的是数…

代码随想录算法训练营29期|day64 任务以及具体安排

第十章 单调栈part03 有了之前单调栈的铺垫&#xff0c;这道题目就不难了。 84.柱状图中最大的矩形class Solution {int largestRectangleArea(int[] heights) {Stack<Integer> st new Stack<Integer>();// 数组扩容&#xff0c;在头和尾各加入一个元素int [] ne…

斯元Z-ONE-China Cybersecurity Tech Landscape·中国网络安全全景图-百度网盘下载

面向全球&#xff0c;斯元Z-ONE正式发布首版「China Cybersecurity Tech Landscape中国网络安全全景图」。 为了提升海外市场对中国网络安全行业的全局认识&#xff0c;方便国际客户及合作伙伴了解中国网络安全科技的赛道分布和国内外厂商对标&#xff0c;助力中国网安厂商出海…

uni-app之android原生插件开发

官网 uni小程序SDK 一 插件简介 1.1 当HBuilderX中提供的能力无法满足App功能需求&#xff0c;需要通过使用Andorid/iOS原生开发实现时&#xff0c;可使用App离线SDK开发原生插件来扩展原生能力。 1.2 插件类型有两种&#xff0c;Module模式和Component模式 Module模式&…

【PyTorch笔记 04】F.cross_entropy的使用

torch.nn.functional.cross_entropy是PyTorch中用于计算交叉熵损失的函数&#xff0c;非常适合用于多分类问题。这个函数结合了log_softmax操作和nll_loss&#xff08;负对数似然损失&#xff09;的计算&#xff0c;因此输入得分&#xff08;即模型输出&#xff09;不需要事先经…

【架构笔记1】剃刀思维-如无必要,勿增实体

欢迎来到文思源想的架构空间&#xff0c;前段时间博主做了一个工作经历复盘&#xff0c;10年开发路&#xff0c;走了不少弯路&#xff0c;也算积累了不少软件开发、架构设计的经验和心得&#xff0c;确实有必要好好盘一盘&#xff0c;作为个人的总结&#xff0c;同时也留给有缘…

对抗生成网络

作用 手底有一堆数据&#xff0c;告诉它要生成什么东西&#xff0c;它就这么去做。 超分辨率重构 告诉模型什么样的东西是一个低分辨率图像&#xff0c;什么样的东西是高分辨率图像&#xff0c;再设计一个损失函数。让计算机学习两者之间的关系&#xff0c;怎样由一个低分辨率…

2.6基本算法之动态规划1944:吃糖果

名名的妈妈从外地出差回来&#xff0c;带了一盒好吃又精美的巧克力给名名&#xff08;盒内共有 N 块巧克力&#xff0c;20 > N >0&#xff09;。妈妈告诉名名每天可以吃一块或者两块巧克力。假设名名每天都吃巧克力&#xff0c;问名名共有多少种不同的吃完巧克力的方案。…

Nginx一网打尽:动静分离、压缩、缓存、黑白名单、跨域、高可用、防盗链、SSL、性能优化

引言 一、性能怪兽-Nginx概念深入浅出 二、Nginx环境搭建 三、Nginx反向代理-负载均衡 四、Nginx动静分离 五、Nginx资源压缩 六、Nginx缓冲区 七、Nginx缓存机制 八、Nginx实现IP黑白名单 九、Nginx跨域配置 十、Nginx防盗链设计 十一、Nginx大文件传输配置 十二、Nginx配置SL…