原生js与在vuecli中封装console.log

一、目的

1. 封装console.log方法，能够通过参数来允许是否打印日志，实现比如开发环境打印日志，生产环境不打印日志;
2. 能在全浏览器中原生Js中通用，能在vuecli中使用；
3. 保持原console对象在控制栏中的特性，能通过控制栏的打印，确定在哪一行的打印；

二、文章概述

1. 在原生js中封装console.log简单，在vuecli中，个人觉得麻烦点，特意记录下；
2. 在我的封装方法中

• 原生js中使用，直接调用log(param)就能打印；
• vuecli中使用，调用this.log(param)就能打印；

3. log方法挂载在window，或者vue对象中，在运行时没发现问题，不是保留对象；

三、在原生js中封装console.log

1. 直接指向console对象，基本代码如下：

//good
var log=null		
var allowLog = true
void function () {
    if (allowLog) {
        log = console.log;
    } else {
        log = function () {}
    }
}();

2. 比较 与函数封装这种写法相比，以下写法在打印时无法确定具体行数，每次console.log的行数都是在log函数内打印的；

//bad
function log(){
  console.log(...arguments)
}

3. 兼容性 支持es5+的浏览器

四、在vuecli中封装console.log方法

1. 创建一个public.js文件中，在main.js文件中使用，代码举例如下：

//main.js

import base from '@/assets/js/public.js'
Vue.use(base)

2. public.js文件内容如下：

//控制是否打印
const allowLog = true
export default {
    install(Vue) {
        /**
         * @description: 对于this.log的封装，
         * @param {type} 
         * @return: 
         */
        if (allowLog) {
          try {
            Vue.prototype.log = console.log;
            //尝试运行，是否报错
            Vue.prototype.log("success console proxy")
          } catch (error) {
            //ie11和android 4.4  this._generic(MessageLevel.Log, [].slice.call(arguments)  _generic报错
            console.warn("fail console proxy")
            Vue.prototype.log = function () {}
          }
        } else {
            Vue.prototype.log = function () {}
        }
   }
}   

3. 代码描述

• 如果直接使用 Vue.prototype.log = console.log;来挂载，在ie11和安卓4.4手机下，初次进入，会报错: _generic报错，导致运行失败。所以这里用try..catch来捕获，如果发现运行报错，则不执行console.log方法的代理；
• 在ie11中，初次进入，理解调用this.log会报错，但是刷新这次页面就不会报这个错，并没有找到原因；

4. 兼容 ie10+，android 4.4+,ios

五、补充

各位大佬有其他的方法欢迎补充下，这是我的封装实现，感觉比较啰嗦。 [手动狗头.gif]