需要-不同运行等级下输入不同等级日志

我的项目在开发模式下须要显示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");

对您有帮忙的话请点赞????