js 封装一个简单实用的log

有这么一个需求背景(实际开发/面试中也会遇到):

  1. 现在前端代码模块化,MVVM等框架盛行,而在开发中,各个模块间 debug打log,就要有一定的辨识度
  2. 要考虑执行时候可能的异步
  3. 上线后不能打印log,因为可能以后版本优化,方便调试等balabala…原因,不能删掉打log的代码行。

封装一个自己的log方法,解决这个需求,具体看下方预期效果。

//功能:实现一个log 实现类似console.log的功能,执行后输出预期内容
//在 a模块,
log("test",1)//=>a(1):test 1 括号中1是调用的顺序,每调用一次递增
//在 b 模块, 
log(1,2)//=>b(1):1 2
log("test",2,3)//=>b(2):test 2 3

下面就是简单的实现。


/*
* params {String} moduleName
* params {Boolean} isDebug
*/
function insLog({moduleName,isDebug}){
  let count=0
  if(isDebug==undefined){
    isDebug=process.env.NODE_ENV!=='production'
  }
  if(!isDebug){
    return function noop(){}
  }
  return function () {
  let args = Array.prototype.slice.call(arguments);
    count++
    args.unshift(`${moduleName}(${count}):`)
    console.log.apply(console, args);
  }
};

// a.js
const log=insLog({moduleName:'a'})
log('test',1)//=>a(1):test 1
log(1,2)//=>a(2):1 2
const sleep=function(timeout){
  setTimeout(() => {
    var b='foo'
    log('sleep',b)
  }, timeout);
}
sleep(1000)//=>a(4): sleep foo
log('test',3,4)//=>a(3): test 3 4


// b.js 
const log=insLog({moduleName:'b',isDebug:true})//control debug yourself
log('data',{id:1})//=>b(1):data {id:1}

这个应该还是每一个项目都需要的小工具,如果每次都要自动拷贝代码到utils,那也是有点繁琐的。所以发布到npm方便安装使用

//安装
npm i ins-logger -D
发布了22 篇原创文章 · 获赞 0 · 访问量 2239

猜你喜欢

转载自blog.csdn.net/weixin_44156518/article/details/88528034