console.debug()的包装器:如何用object.defineProperty()覆盖字符串?

发布于 2025-02-12 21:42:17 字数 2156 浏览 0 评论 0原文

我构建了一个用于伐木的课程,这使您可以关闭记录,但要将呼叫留在代码中。 (并使用正确的行和文件。)

基于此,我想要托多斯(Todos)的鲜艳色彩,但我设法仅着色'[todo]',其余文本以默认的颜色保留。

class Logger {

    // Don't forget console needs to be set to 'All levels' to display debug. ;)

    public OFF = 0;
    public LOG = 1;
    // ...
    public ALL = 9;
    
    private level = 1;
    
    public constructor() {
        /*this.init();*/ // killed for testing
    }
    
    // This is the original method.
    // Color is fine, but wrong line and file.
    public todo(message?: string, ...optionalParams: any[]) {
        const css = 'background: #FF0000; color: #0000FF';
        optionalParams.length != 0
            ? console.debug('%c[TODO] '+message, css, optionalParams) 
            : console.debug('%c[TODO] '+message, css);
    }    
     
    // This overrides the todo method and gives the correct line and file,
    // but the color is destroyed.
    // And the optionalParams no longer an array.
    /*private*/ public init() { // public for testing.
        Object.defineProperty(this, "todo", {get: function () {
            return this.level >= this.LOG 
                ? console.debug.bind(console, '%c[TODO]', 'background: #FF0000; color: #0000FF') 
                : function(){};},
            configurable: true
        });     
    }
    
    public setLevel(level: Level) {
        this.level = level;
        this.init();
    }

}
// Test
const logger = new Logger();

logger.todo('normal todo().');
logger.todo('normal todo() with data.', 666, 777);

logger.init(); // This is why init is not called in constructor and public. ;)

logger.todo('modified todo().');
logger.todo('modified todo() with data.', 666, 777);

我还创建了一个 jsfiddle 与代码。

是否可以使用object.defineproperty为整个消息上色,如果是这样?

I built a class for logging, which gives the possibility to turn off the logging but to leave the calls in the code. (And with the right line and file.)

Based on that, I wanted a flashy color for todos, but I manage to color only the '[TODO]', the rest of the text stays in the default color.

class Logger {

    // Don't forget console needs to be set to 'All levels' to display debug. ;)

    public OFF = 0;
    public LOG = 1;
    // ...
    public ALL = 9;
    
    private level = 1;
    
    public constructor() {
        /*this.init();*/ // killed for testing
    }
    
    // This is the original method.
    // Color is fine, but wrong line and file.
    public todo(message?: string, ...optionalParams: any[]) {
        const css = 'background: #FF0000; color: #0000FF';
        optionalParams.length != 0
            ? console.debug('%c[TODO] '+message, css, optionalParams) 
            : console.debug('%c[TODO] '+message, css);
    }    
     
    // This overrides the todo method and gives the correct line and file,
    // but the color is destroyed.
    // And the optionalParams no longer an array.
    /*private*/ public init() { // public for testing.
        Object.defineProperty(this, "todo", {get: function () {
            return this.level >= this.LOG 
                ? console.debug.bind(console, '%c[TODO]', 'background: #FF0000; color: #0000FF') 
                : function(){};},
            configurable: true
        });     
    }
    
    public setLevel(level: Level) {
        this.level = level;
        this.init();
    }

}
// Test
const logger = new Logger();

logger.todo('normal todo().');
logger.todo('normal todo() with data.', 666, 777);

logger.init(); // This is why init is not called in constructor and public. ;)

logger.todo('modified todo().');
logger.todo('modified todo() with data.', 666, 777);

Screenshot of console.

I also created a jsfiddle with the code.

Is it possible to color the whole message using Object.defineProperty, and if so how?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文