@你想要的类，打印日志不再累！

效果

如何使用？

在需要打印的类前加上这么一行​​@logClassFunc()​​。 一种入侵式的日志大法 !_传参数效果展示运行后，肉眼可见，执行的函数都添加了日志，格式为​​[类名] [函数名] [Begin | End]​​

实现

为什么突然写这个东西呢？

缘由是这样的，某一天，一位买了​​朝岭红橙​​但分不清是橘子还是橙子并觉得好吃的老板突然问我一个问题。

有没有插件能自动log函数执行次序的？

一种入侵式的日志大法 !_2d_02聊天记录1

并且希望直接指定一个类就能实现日志追踪。

一种入侵式的日志大法 !_传参数_03聊天记录2当时想到类似​​@ccclass​​可能可以实现他这个需求， 这个被称为装饰器（​​decorator​​）。

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，访问符，属性或参数上。装饰器使用

@expression

这种形式，

expression

求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入。

但是该怎么写这个装饰器呢？

白玉无冰是这样做的，参考 ​​TypeScript​​ 官方文档以及 ​​Cocos Creator​​ 中 ​​@ccclass​​ 的实现，组合拼装(借鉴)，哇的一下！就出来了嘛！

需要的话直接拷贝下面这一段代码吧！

export function logClassFunc() { 
    return function (target: any) {  
        const className = target.prototype.constructor?.name || 'No Name';
        const propNames = Object.getOwnPropertyNames(target.prototype);
        for (let i = 0; i < propNames.length; ++i) {
            const prop = propNames[i];
            if (prop !== 'constructor') {
                const desc = Object.getOwnPropertyDescriptor(target.prototype, prop);
                const func = desc && desc.value;
                if (typeof func === 'function') {
                    let oldFunc = (func as Function);
                    target.prototype[prop] = function () {
                        console.log(`[${className}] [${prop}] Begin`, ...arguments);
                        oldFunc.call(this, ...arguments)
                        console.log(`[${className}] [${prop}] End`);
                    }
                }
            }
        }
    }
}

注意：并未实际在项目中使用，开车需谨慎！

更多可能交给大家了：


  2. 传参数进去，控制不同的日志层级(log
    ,info
    ,warn
    ,error
    )
  3. 传参数进去，控制(不)需要打印的函数
  4. 用一个全局变量，控制整体开关
  5. 。。。

小结

通过使用修饰器，可以快速扩充一个类的功能！

本文中出现的英语单词回顾：

  • decorator
    - 美 ['dekəreɪtər]
    装饰者

以上为白玉无冰实现 ​​"入侵式日志"​​ 的技术分享。学会了嘛？大家有什么日志大法欢迎留言分享讨论！

12月26日Cocos十周年巡回演出来广州了，白玉无冰录制了一个VLOG


更多 ​​​​


一种入侵式的日志大法 !_传参数_04