【JavaScript】console的简单封装,支持原生用法

文章介绍了如何在生产环境中通过封装console,创建一个可控制的日志服务单元,以便在需要时查看log状态而不暴露敏感信息。通过一个自定义的日志处理对象Logs,提供了设置调试模式、不同级别的日志输出以及清除日志等功能。此外,还提到了腾讯的vConsole作为现成的日志库选项。
摘要由CSDN通过智能技术生成

在生产环境下,console的输出一般是被屏蔽的尽可能不暴露出来,但有时候难免需要查看下log状态,来捕获一些问题情况

在上诉场景下,我们需要对console进行二次封装引用或者覆盖console,以达到我们需要的效果;
这里演示一个不需要覆盖console的方式:

(function (isDebug) {
    const logsServiceUnit = {
        isDebug: false,
        _log: function (level) {
            let _any = [...arguments].filter((value, key) => key > 0);
            _any.unshift(`[${level}]`)
            if (this.isDebug === true) {
                if (level === 'debug') {
                    this.debug.apply(logsServiceUnit, _any);
                    return;
                }
            }
            console[level].apply(console, _any)
        },
        debug: function () {
            let _any = [...arguments].filter((value, key) => key > 0);
            _any.unshift(`[debug]`)
            console.log.apply(console, _any)
        },
        setDebug: function (isDebug) {
            this.isDebug = isDebug ? isDebug : false;
        },
        clear: function () {
            console.clear();
        }
    }

    const logsHandler = {};

    window.Logs = new Proxy({
        setDebug: function (isDebug) {logsServiceUnit.setDebug(isDebug)},
        log: function(...any){logsServiceUnit._log('log', ...any)},
        info: function(...any){return logsServiceUnit._log('info', ...any)},
        debug: function(...any){return logsServiceUnit._log('debug', ...any)},
        warn: function(...any){return logsServiceUnit._log('warn', ...any)},
        error: function(...any){return logsServiceUnit._log('error', ...any)},
        time: function(...any){return logsServiceUnit._log('time', ...any)},
        timeEnd: function(...any){return logsServiceUnit._log('timeEnd', ...any)},
        trace: function(...any){return logsServiceUnit._log('trace', ...any)},
        clear: logsServiceUnit.clear,
    }, logsHandler);

    window.Logs.setDebug(isDebug);
})(false);

使用方式:

// 控制是否展示输出
Logs.setDebug(true)

// 常用/常见的log:
Logs.log('log', ["test", {"testB":1}])
Logs.debug('debug')
Logs.warn('warn')
Logs.error('error')

在这里插入图片描述

其实现成的log库也有,例如Tencent/vConsole

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

陀螺蚁

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值