欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

console.log 在js、React Native (Rn)中的开关设计

程序员文章站 2022-04-11 10:30:50
...

为啥会写这个题目呢,也是来自于自己在开发场景转换时遇到一个性能优化点。因为我之前是做Android开发的,当时设计Log开关的时候,是去写一个LogUtils工具类,里面去重写Log类的各个方法,然后里面的关键代码

if (BuildConfig.DEBUG) {
     //todo
}

因为在写Android代码时,用工具类LogUtils很方便,会自动提示 import,所以编码比较便捷。


后面我又加入了React Native的大军的开发,因为在写Rn的时候大多数是用React js的,这个时候如果还用之前Android那套思路来写开关的话,问题是没有的,但是每个页面都去import这就有点受不了。后面了解React Native是有global全局变量的,那么自然想到了下面的代码:

if (!SHOW_LOG) {
        global.console = {
            info: () => {},
            log: () => {},
            warn: () => {},
            debug: () => {},
            error: () => {},
        };
    }

思路就是控制变量SHOW_LOG的 true/false来是否重写系统的console对象。


再后面我又开始负责写前后端分离的React项目了,那么这时候再去看这个问题,我自然想到html中的window对象,全局变量是 window 对象的属性,全局函数是 window 对象的方法。然后就想到了后面的代码:
//控制log开关

const ISDEBU=true
ISDEBU || (()=>{
    window.console={
        info: () => {},
        log: () => {},
        warn: () => {},
        debug: () => {},
        error: () => {},
    };
})()

嗯哼,这个小技术点就分享到这里了。