需要-不同运行等级下输入不同等级日志
我的项目在开发模式下须要显示console debug、log、info、warn、error级别
在生产环境下只输入error级别,或者碰到error级别的日志须要上报服务器
实现原理
复写一个新的console对象,新console对象上的getter名字和window.console上的办法保持一致,getter办法依据运行环境来判断是否返回window.console办法还是一个空函数,一些拦挡也能够放到getter外面,比方上报谬误日志等
代码实现
JConsole.js 源码
源码在这呢,不便小伙伴扩大
import {LOG_LEVEL} from "../config";// 日志等级和对应的名称// 0"debug" 1"log",2"info",3"warn",4"error"export class JConsole { private originalConsole; logLevel = 0; constructor(originalConsole) { originalConsole.log("LOG_LEVEL", LOG_LEVEL); this.originalConsole = originalConsole; switch (LOG_LEVEL) { case "debug": this.logLevel = 0; break; case "log": this.logLevel = 1; break; case "info": this.logLevel = 2; break; case "warn": this.logLevel = 3; break; case "error": this.logLevel = 4; break; } } get debug() { if (this.logLevel < 1) { return this.originalConsole.debug; } else { return () => { }; } } get log() { if (this.logLevel <= 1) { return this.originalConsole.log; } else { return () => { }; } } get info() { if (this.logLevel <= 2) { return this.originalConsole.info; } else { return () => { }; } } get warn() { if (this.logLevel <= 3) { return this.originalConsole.warn; } else { return () => { }; } } get error() { if (this.logLevel <= 4) { // 出错了,上报一下服务器或者告诉一下管理员 return this.originalConsole.error; } else { return () => { }; } } get memory() { return this.originalConsole.memory; } get assert() { return this.originalConsole.assert; } get clear() { return this.originalConsole.clear; } get count() { return this.originalConsole.count; } get dir() { return this.originalConsole.dir; } get dirxml() { return this.originalConsole.dirxml; } get exception() { return this.originalConsole.exception; } get group() { return this.originalConsole.group; } get groupCollapsed() { return this.originalConsole.groupCollapsed; } get groupEnd() { return this.originalConsole.groupEnd; } get markTimeline() { return this.originalConsole.markTimeline; } get msIsIndependentlyComposed() { return this.originalConsole.msIsIndependentlyComposed; } get profile() { return this.originalConsole.profile; } get profileEnd() { return this.originalConsole.profileEnd; } get select() { return this.originalConsole.select; } get table() { return this.originalConsole.table; } get time() { return this.originalConsole.time; } get timeEnd() { return this.originalConsole.timeEnd; } get timeStamp() { return this.originalConsole.timeStamp; } get timeline() { return this.originalConsole.timeline; } get timelineEnd() { return this.originalConsole.timelineEnd; } get trace() { return this.originalConsole.trace; }}
demo.js
重点是浏览器还能追踪到代码trace
import {JConsole} from "./JConsole";window.console = new JConsole(window.console);console.debug("debug");console.log("log");console.info("info");console.warn("warn");console.error("error");