前端架构: 实现脚手架终端UI样式之ANSI escape code, Chalk, Ora介绍

本文主要是介绍前端架构: 实现脚手架终端UI样式之ANSI escape code, Chalk, Ora介绍,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在脚手架当中实现命令行的UI显示


1 )概述

  • 在命令行中,如果想实现除传统的常规文本以外的内容
  • 比如想对字体进行加粗斜体下划线,包括对它改变颜色改变前景色改变后景色等等
  • 需要借助一个叫做 ANSI escape code 这样的一个概念
  • 它其实是一个标准,它可以用来控制光标的位置
  • 它可以改变自己的颜色,可以改变它的字体,以及它的样式
  • 所以 ANSI escape code 这个内容对后续开发非常重要
  • 常用的基于这个 ANSI escape code 封装的两个库
  • 这两个核心库分别是 chalk 和 ora

2 ) 关于 ANSI escape code

  • 文档:https://handwiki.org/wiki/ANSI_escape_code
  • 终端 ANSI 转义序列,简单的来说,它就是定义的一个规范
  • 这个规范可以让我们在终端当中通过转义字符实现一些特殊操作
  • 比如我们可以将光标上移或者下移左移或者右移,还可以换行等等这些操作
  • 甚至还可以把当前输出的这些信息给擦除掉,同时可以实现什么字体的一个变化
  • 比如:加粗,下划线,倾斜等等,会有一些字体的样式变化了
  • 最后最重要的是给字体变颜色,变成各种各样的颜色
  • 由于终端中,它会受到一定的限制,所以并不能识别所有的颜色
  • 具体查询文档:
    • CSI
    • SGR_(Select_Graphic_Rendition)_parameters
    • Colors
    • Terminal output sequences

repl环境使用示例

  • 在终端中使用nodejs执行或在浏览器console面板执行均可

2.1 改变字体颜色(前景红色) \x1B[31m

console.log('\x1B[31m%s', 'Hello ANSI escape code')
  • 这里,\x1B 是固定写法, x表示16进制数
  • 这个数值,可以在文档上查询,红色中: 31 是前景色,41 是背景色
  • 这里的 m 在 上述 CSI 文档中查询显示是渲染的参数,在数字后面加上m,因为都是渲染属性
案例效果

2.2 改变背景色(还是红色) \x1B[41m

console.log('\x1B[41m%s', 'Hello ANSI escape code')
案例效果
  • 这里,调用后,nodejs终端环境不会再次恢复,如果需要恢复,\x1B[0m
    console.log('\x1B[41m%s\x1B[0m', 'Hello ANSI escape code')
    
案例效果

2.3 添加下划线 \x1B[4m

console.log('\x1B[41m\x1B[4m%s\x1B[0m', 'Hello ANSI escape code')
案例效果

2.4 改变光标下移 \x1B[2B

console.log('\x1B[2B%s', '光标下移')
  • 希望当前位移,就需要找到位移属性,在 CSI 表中查询,Cursor Down是 B
  • 这里的2是下移2行,这个在终端中可用,在浏览器console面板中无效
案例效果

2.5 水平移动 \x1B[2G

console.log('\x1B[2G%s', '水平移动')
  • 2是2列的意思
案例效果

2.6 其他

  • 后续依次类推,可以在文档中查询使用,了解到这个程度,加上查询文档即可应付后续脚手架开发需求
  • 在实际开发过程中,绝大部分情况下,是不太需要自己写 ANCI 序列的,除非你的需求很特殊
  • 但是了解了这个实现原理以后,有助于以后想用的时候可以用的起来

3 )chalk

  • chalk 主要的用途是改变文本的颜色,它主要是改变文本当中中命令行中文本的一个样式
  • 可以改变各种各样的颜色,可以加下划线,有粗体,有斜体等各种样式,可以改前景色也可改背景色
  • 可以看到它一周的下载量达到惊人的两亿多(228,575,311 动态数据),可见这个库的使用是非常广泛

4 )ora

  • 这个 ora 这个库最主要是用来做 loading 状态加载的
  • 比如,完成一个下载的动作,比如,等待一个 webpack 打包
  • 都需要使用这个库来给我们去做loading的一个渲染
  • 这个库使可以看到一周下载量达到一千多万次(18,244,955 动态数据),是一个非常大的库
  • 它关联的一个叫做 cli-spinners 用来做这个loading状态物料的一个管理
  • 这个 ora 库底层源码会比 chalk 要复杂一些,因为它涉及到很多命令行更底层的信息
  • 比如说对游标的控制,对输入输出流的控制等

这篇关于前端架构: 实现脚手架终端UI样式之ANSI escape code, Chalk, Ora介绍的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/733453

相关文章

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

redis过期key的删除策略介绍

《redis过期key的删除策略介绍》:本文主要介绍redis过期key的删除策略,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录第一种策略:被动删除第二种策略:定期删除第三种策略:强制删除关于big key的清理UNLINK命令FLUSHALL/FLUSHDB命

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构

Java实现优雅日期处理的方案详解

《Java实现优雅日期处理的方案详解》在我们的日常工作中,需要经常处理各种格式,各种类似的的日期或者时间,下面我们就来看看如何使用java处理这样的日期问题吧,感兴趣的小伙伴可以跟随小编一起学习一下... 目录前言一、日期的坑1.1 日期格式化陷阱1.2 时区转换二、优雅方案的进阶之路2.1 线程安全重构2