前端架构: 实现脚手架终端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介绍
在脚手架当中实现命令行的UI显示 1 )概述 在命令行中,如果想实现除传统的常规文本以外的内容比如想对字体进行加粗斜体下划线,包括对它改变颜色改变前景色改变后景色等等需要借助一个叫做 ANSI escape code 这样的一个概念它其实是一个标准&…...

platform(驱动层+应用层)实现终端和中断开关点灯
设备树文件添加 myplatform{compatible"hqyj,myplatform";interrupt-parent<&gpiof>;interrupts<8 0>,<7 0>,<9 0>;led1-gpio<&gpioe 10 0>;led2-gpio<&gpiof 10 0>;led3-gpio<&gpioe 8 0>;reg<0x123…...

黑马JavaWeb开发跟学(一)Web前端开发HTML、CSS基础
黑马JavaWeb开发一.Web前端开发HTML、CSS基础 引子、Web开发介绍传统路线本课程全新路线本课程适用人群课程收获一、什么是web开发二、网站的工作流程三、网站的开发模式四、网站的开发技术 前端开发基础一、前端开发二、HTML & CSS2.1 HTML快速入门2.1.1 操作第一步第二步…...

Nest.js权限管理系统开发(四)Swagger API接入
什么是swagger Swagger 是一个规范和完整的框架,用于生成、描述、调用和可视化 RESTful 风格的 Web 服务(<https://swagger.io/>)。 它的主要作用是: 1. 使得前后端分离开发更加方便,有利于团队协作 2. 接口的文档在线自动生成…...

(全注解开发)学习Spring-MVC的第三天
全注解开发 第一部分 : 1.1 消除spring-mvc.xml 这些是原来spring-mvc.xml配置文件的内容 <!--1、组件扫描, 使Controller可以被扫描到--><context:component-scan base-package"com.itheima.controller"/><!--2、非自定义的Bean, 文件上传解析器--&…...

设计模式学习笔记 - 面向对象 - 7.为什么要多用组合少用继承?如何决定该用组合还是继承?
前言 在面向对象编程中,有一条非常经典的设计原则:组合优于继承,多用组合少用继承。 为什么不推荐使用继承? 组合比继承有哪些优势? 如何判断该用组合还是继承? 为什么不推荐使用继承? 继承…...

RocketMQ生产环境常见问题分析与总结
RocketMQ生产环境常见问题分析与总结 如何保证消息不丢失 消息丢失场景 对于跨网络的节点可能会丢消息,因为MQ存盘都会先写入OS的PageCache中,然后再让OS进行异步刷盘,如果缓存中的数据未及时写入硬盘就会导致消息丢失 生产端到Broker端Brok…...
前端打包工具的发展历程、思路(grunt,gulp,webpack,vite)
现在前端发展真快,需要学的东西太多了,下面总结下前端打包的发展过程,便于区分和选择学习。 什么是前端打包 前端打包是指将多个JavaScript文件、CSS文件、图片等资源进行合并和优化处理,并输出为一个或多个文件的过程。这样做的目的是减少…...
利用Python将文件夹下多个txt文本写入到同一个excel中(每一个文件占一行)
1、 将文件夹下多个txt文本写入到同一个excel中(每一个文件占一行): # -*- coding: utf-8 -*- import os import pandas as pd# 获取文件夹中的所有txt文件 folder_path rG:\Cygwin\ txt_files [f for f in os.listdir(folder_path) if f.endswith(.t…...

通过Colab部署Google最新发布的Gemma模型
Gemma的简单介绍 Gemma 是一系列轻量级、最先进的开放式模型,采用与创建 Gemini 模型相同的研究和技术而构建。 Gemma 由 Google DeepMind 和 Google 的其他团队开发,其灵感来自 Gemini,其名称反映了拉丁语 gemma,意思是“宝石”…...
spring中@validate注解使用
在 Java 中,我们可以使用注解和 validate 实现对实体类中字段的校验。其中,注解用来定义字段的约束条件,而 validate 则用来进行实际的校验操作。 常用的校验注解包括 NotNull、NotEmpty、Size、Min、Max 等,它们可以帮助我们规定…...
停车场管理(C语言)
【题目描述】停车场管理。设有一个可以停放n辆汽车的狭长停车场,它只有一个大门可以供车辆进出。车辆按到达停车场时间的先后次序依次从停车场最里面向大门口处停放 (即最先到达的第一辆车停放在停车场的最里面) 。如果停车场已放满n辆车,则以后到达的车…...

探索无限:Sora与AI视频模型的技术革命 - 开创未来视觉艺术的新篇章
✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua,在这里我会分享我的知识和经验。&#x…...

375FPS! 谷歌提出MaskConver“重校正用于全景分割的纯卷积模型
https://arxiv.org/2312.06052 近年来,基于Transformer的模型由于其强大的建模能力以及对语义类和实例类的统一表示为全局二值掩码,在全景分割中占据主导地位。 在本文中,我们回顾了纯粹的卷积模型,并提出了一种新的结构MaskConve…...
leetcode初级算法(python)- 数组
文章目录 1.从排序数组中删除重复项2.买卖股票最佳时机23.旋转数组运行颠倒列表法整体移动元素块法4.存在重复运行包含判断法排序比较判断法运行集合判断法5.只出现一次的数字6.两个数组的交集27.移动零8.两数之和9.旋转图像这篇博客中的代码都是数组计算。 1.从排序数组中删除…...
重新定义音乐创作:ChatGPT与未来音乐产业的融合
### 重新定义音乐创作:ChatGPT与未来音乐产业的融合 随着人工智能技术的飞速发展,ChatGPT不仅在文字创作领域大放异彩,也正逐步渗透并重塑音乐产业的未来。这种先进的语言模型,如今已成为音乐家、作曲家和制作人们手中的一把利剑…...

人工智能绘画的时代下到底是谁在主导,是人类的想象力,还是AI的创造力?
#ai作画 目录 一.AI绘画的概念 1. 数据集准备: 2. 模型训练: 3. 生成绘画: 二.AI绘画的应用领域 三.AI绘画的发展 四.AI绘画背后的技术剖析 1.AI绘画的底层原理 2.主流模型的发展趋势 2.1VAE — 伊始之门 2.2GAN 2.2.1GAN相较于…...

[HTML]Web前端开发技术29(HTML5、CSS3、JavaScript )JavaScript基础——喵喵画网页
希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,佬佬会看到更多有趣的博客哦!!! 喵喵喵,你对我真的很重要! 目录 前言 上一节的课后练习...
文本编辑器markdown语法
markdown语法 1.介绍 Markdown是一种使用一定的语法将普通的文本转换成HTML标签文本的编辑语言,它的特点是可以使用普通的文本编辑器来编写,只需要按照特定的语法标记就可以得到丰富多样的HTML格式的文本。 2.标题分级 "# " -> 一级标题 &…...

【C++】类和对象之拷贝构造函数篇
个人主页 : zxctscl 文章封面来自:艺术家–贤海林 如有转载请先通知 文章目录 1. 前言2. 传值传参和传引用传参3. 概念4. 特征 1. 前言 在前面学习了6个默认成员函数中的构造函数和析构函数 【C】构造函数和析构函数详解,接下来继续往后看拷…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

简易版抽奖活动的设计技术方案
1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

【网络安全产品大调研系列】2. 体验漏洞扫描
前言 2023 年漏洞扫描服务市场规模预计为 3.06(十亿美元)。漏洞扫描服务市场行业预计将从 2024 年的 3.48(十亿美元)增长到 2032 年的 9.54(十亿美元)。预测期内漏洞扫描服务市场 CAGR(增长率&…...
unix/linux,sudo,其发展历程详细时间线、由来、历史背景
sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档),如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下,风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
QT3D学习笔记——圆台、圆锥
类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体(对象或容器)QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质(定义颜色、反光等)QFirstPersonC…...
Java毕业设计:WML信息查询与后端信息发布系统开发
JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发,实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构,服务器端使用Java Servlet处理请求,数据库采用MySQL存储信息࿰…...

基于SpringBoot在线拍卖系统的设计和实现
摘 要 随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统,主要的模块包括管理员;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...