封装console

目的

1.  封装console.log  , 使得打印更美观方便  

2. 同时希望上线后不在打印消耗资源  

例图:

export const prettyLog = () => {const isProduction = import.meta.REACT_APP_ENV === "prod";const isEmpty = (value) => {return value == null || value === undefined || value === "";};const prettyPrint = (title, text, color) => {if (isProduction) return;console.log(`%c ${title} %c ${text} %c`,`background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,`border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,"background:transparent");};const info = (textOrTitle, content = "") => {const title = isEmpty(content) ? "Info" : textOrTitle;const text = isEmpty(content) ? textOrTitle : content;prettyPrint(title, text, "#909399");};const error = (textOrTitle, content = "") => {const title = isEmpty(content) ? "Error" : textOrTitle;const text = isEmpty(content) ? textOrTitle : content;prettyPrint(title, text, "#F56C6C");};const warning = (textOrTitle, content = "") => {const title = isEmpty(content) ? "Warning" : textOrTitle;const text = isEmpty(content) ? textOrTitle : content;prettyPrint(title, text, "#E6A23C");};const success = (textOrTitle, content = "") => {const title = isEmpty(content) ? "Success " : textOrTitle;const text = isEmpty(content) ? textOrTitle : content;prettyPrint(title, text, "#67C23A");};const table = ({ data, allHeader = true }) => {!data &&(data = [{ id: 1, name: "Alice", age: 25 },{ name: "Bob", occupation: "Developer", age: "30",ob:{},un:undefined,null:null,bool:true,num:1 },{ id: 3, nickname: "Charlie", dob: "1985-01-01" },{ id: 3, nickname: "hh", dob: "1985-01-01" },]);/*** 打印表头* @param {Object} row - 当前行数据对象,用于提取表头信息*/const printHeader = (row) => {const headers = Object.keys(row).join("%c ").trim();const headerStyles = new Array(Object.keys(row).length).fill("color: white; background-color: darkblue; padding: 2px 10px;");console.log(`%c${headers}`, ...headerStyles);};/*** 打印数据行* @param {Object} row - 数据行对象*/const printRow = (row) => {allHeader && printHeader(row)const keys = Object.keys(row);const styles = keys.map(() => "color: black; background-color: lightgray; padding: 2px 10px;");const valuesWithStyles = keys.map((key, index) => {const value = row[key];let displayValue;if (value === null) {displayValue = "null";} else if (value === undefined) {displayValue = "undefined";} else if (typeof value === 'object') {displayValue = "Object";} else if (typeof value === 'function') {displayValue = "Function";} else if (typeof value === 'number' && isNaN(value)) {displayValue = "NaN";} else {displayValue = value;}return `%c${displayValue}`;}).join(" ");console.log(valuesWithStyles, ...styles);};// 首先打印表头if (data.length > 0 && !allHeader) {printHeader(data[0]);}data.forEach(printRow);};const picture = (url, scale = 1) => {if (isProduction) return;const img = new Image();img.crossOrigin = "anonymous";img.onload = () => {const c = document.createElement("canvas");const ctx = c.getContext("2d");if (ctx) {c.width = img.width;c.height = img.height;ctx.fillStyle = "red";ctx.fillRect(0, 0, c.width, c.height);ctx.drawImage(img, 0, 0);const dataUri = c.toDataURL("image/png");console.log(`%c sup?`,`font-size: 1px;padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;background-image: url(${dataUri});background-repeat: no-repeat;background-size: ${img.width * scale}px ${img.height * scale}px;color: transparent;`);}};img.src = url;};// retu;return {info,error,warning,success,picture,table,};
};

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

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

相关文章

【C++关键字】指针空值nullptr(C++11)

指针空值nullptr(C11) C98中的指针空值C11中的指针空值 C98中的指针空值 在学习C语言阶段,由良好的C\C编程习惯,声明一个变量时最好给该变量一个合适的初始值,否则会出现未初始化的指针,野指针等情况。 in…

Flutter 实现dispose探测控件

文章目录 前言一、什么是dispose探测控件?1、通常情况2、使用dispose探测控件 二、如何实现1、继承StatefulWidget2、定义dipose回调3、定义child4、重载Dispose方法5、build child 三、完整代码四、使用示例1、基本用法2、设置定义数据 总结 前言 开发flutter一般…

Java 期末复习 习题集

💖 单选题 💖 填空题 💖 判断题 💖 程序阅读题 1. 读代码写结果 class A {int m 5;void zengA(int x){m m x;}int jianA(int y){return m - y;} }class B extends A {int m 3;int jianA(int z){return super.jianA(z) m;} …

Mybatis面试题系列四

1、通常一个Xml映射文件,都会写一个Dao接口与之对应, 请问,这个Dao接口的工作原理是什么?Dao接口里的方法, 参数不同时,方法能重载吗? Dao 接口即 Mapper 接口。接口的全限名,就是映…

Chapter 6 Frequency Response of Amplifiers

Chapter 6 Frequency Response of Amplifiers 这一节我们学习单极和差分运放的频率响应. 6.1 General Considerations 我们关心magnitude vs 频率, 因此有低通, 带通, 高通滤波器 6.1.1 Miller Effect Miller’s Theorem 考虑impedance Z1和Z2, X和Y之间增益为Av. Z1 Z/(…

spring 启动顺序

BeanFactoryAware 可在Bean 中获取 BeanFactory 实例 ApplicationContextAware 可在Bean 中获取 ApplicationContext 实例 BeanNameAware 可以在Bean中得到它在IOC容器中的Bean的实例的名字。 ApplicationListener 可监听 ContextRefreshedEvent等。 CommandLineRunner 整…

数据结构与算法笔记:基础篇 - 二叉树基础(下):有了如此高效的散列表,为什么还需要二叉树?

概述 上篇文章,我们学习了树、二叉树及二叉树的遍历,本章来学习一种特殊的二叉树,二叉查找树。二叉查找树最大的特点就是,支持动态数据集合的快速插入、删除、查找操作。 之前说过,散列表也是支持这些操作的&#xf…

盘点2024年5月Sui生态发展,了解Sui近期成长历程!

2024年5月是Sui的第一个生日月,Sui迎来了它的上线一周年纪念日。在过去的一年中Sui在技术进步与创新、生态系统的扩展、社区发展与合作伙伴关系以及重大项目和应用推出方面取得重要进展,展示了其作为下一代区块链平台的潜力。 以下是Sui的近期成长历程集…

QT 信号和槽 通过自定义信号和槽沟通 如何自定义槽和信号的业务,让它们自动关联 自定义信号功能

通过信号和槽机制通信,通信的源头和接收端之间是松耦合的: 源头只需要顾自己发信号就行,不用管谁会接收信号;接收端只需要关联自己感兴趣的信号,其他的信号都不管;只要源头发了信号,关联该信号…

STM32 | 独立看门狗 | RTC(实时时钟)

01、独立看门狗概述 在由单片机构成的微型计算机系统中,由于单片机的工作常常会受到来自外界电磁场的干扰,造成程序的跑飞,而陷入死循环,程序的正常运行被打断,由单片机控制的系统无法继续工作,会造成整个系统的陷入停滞状态,发生不可预料的后果,所以出于对单片机运行状…

Servlet与JSP的区别

Servlet和JSP(JavaServer Pages)都是Java EE(Java Enterprise Edition)规范的一部分,用于开发Web应用程序。它们在功能上有所重叠,但在设计和使用上有一些关键的区别: 1. 定义: …

QQ号码采集器-QQ邮箱采集器

寅甲QQ邮箱采集器或QQ号码采集软件, 一款采集QQ号、QQ邮件地址,采集QQ群成员、QQ好友的软件。可以按关键词采集,如可以按地区、年龄、血型、生日、职业等采集。采集速度非常快且操作很简单。

终于把tensorflow输入层和输出层搞懂了!fit函数与输入层,输出层,tf.keras.Model输入和输出的关系

结论 fit函数与输入层,输出层,tf.keras.Model输入和输出的关系 fit函数使用dataset格式,输入为字典格式,假设tf.keras.Model中输入和输出为字典格式(2.2或2.3),dataset的key必须和2.2或2.3中字…

MySQL逻辑备份

目录 一.mysqldump 基本命令: 常用选项: 示例 备份整个数据库 备份多个数据库 备份所有数据库 仅备份数据库结构 仅备份特定表 添加选项以有效处理锁表问题 恢复数据库 从逻辑备份文件恢复 注意事项 二. mysqlpump mysqlpump 特点 基…

BoardLight - hackthebox

简介 靶机名称:BoardLight 难度:简单 靶场地址:https://app.hackthebox.com/machines/603 本地环境 靶机IP :10.10.11.11 ubuntu渗透机IP(ubuntu 22.04):10.10.16.17 windows渗透机IP(windows11&…

在 RISC-V 设计中发现可远程利用的漏洞

在移动CPU领域,主流的CPU构架除了intel 的X86构架,甲骨文的arm 构架,其实还有RISC-V 构架。但是因为国际间竞争关系,现在RISC-V技术路线被国外废止了,目前只有中国在继续开发(早期RISC-V是买断过来的&#…

从欧盟弹性法案看软件物料清单(SBOM)

随着网络安全意识的提升和相关法规的推动,SBOM在国际上网络安全实践中的重要性日益凸显。 例如:美国国土安全部(DHS)的 “软件供应链评估工具包”(SCAT)就鼓励软件供应商提供SBOM,以帮助买方评…

重新认识Word —— 制作简历

重新认识Word —— 制作简历 PPT的图形减除功能word中的设置调整页边距进行排版表格使用 我们之前把word长排版文本梳理了一遍,其实word还有另外的功能,比如说——制作简历。 在这之前,我们先讲一个小技巧: PPT的图形减除功能 …

【数据结构】栈和队列-->理解和实现(赋源码)

Toc 欢迎光临我的Blog,喜欢就点歌关注吧♥ 前面介绍了顺序表、单链表、双向循环链表,基本上已经结束了链表的讲解,今天谈一下栈、队列。可以简单的说是前面学习的一特殊化实现,但是总体是相似的。 前言 栈是一种特殊的线性表&…

VISIO安装教程+安装包

文章目录 01、什么是VISIO?02、安装教程03、常见安装问题解析 01、什么是VISIO? Visio是由微软开发的流程图和图表绘制软件,它是Microsoft Office套件的一部分。Visio提供了各种模板和工具,使用户能够轻松创建和编辑各种类型的图…