console.debug()的包装器:如何用object.defineProperty()覆盖字符串?
我构建了一个用于伐木的课程,这使您可以关闭记录,但要将呼叫留在代码中。 (并使用正确的行和文件。)
基于此,我想要托多斯(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);
I also created a jsfiddle with the code.
Is it possible to color the whole message using Object.defineProperty, and if so how?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论