一種入侵式的日志大法 !
@你想要的類，打印日志不再累！
效果
如何使用？
在需要打印的類前加上這么一行@logClassFunc()。
運行后，肉眼可見，執(zhí)行的函數都添加了日志，格式為[類名] [函數名] [Begin | End]
實現
為什么突然寫這個東西呢？
緣由是這樣的，某一天，一位買了朝嶺紅橙但分不清是橘子還是橙子并覺得好吃的老板突然問我一個問題。
有沒有插件能自動log函數執(zhí)行次序的？
并且希望直接指定一個類就能實現日志追蹤。
當時想到類似@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?????????????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`);
????????????????????}
????????????????}
????????????}
????????}
????}
}
注意：并未實際在項目中使用，開車需謹慎！
更多可能交給大家了：
傳參數進去，控制不同的日志層級( log,info,warn,error)傳參數進去，控制(不)需要打印的函數 用一個全局變量，控制整體開關 。。。
小結
通過使用修飾器，可以快速擴充一個類的功能！
本文中出現的英語單詞回顧：
decorator-美 ['dek?re?t?r]?裝飾者
以上為白玉無冰實現 "入侵式日志" 的技術分享。學會了嘛？大家有什么日志大法歡迎留言分享討論！
12月26日Cocos十周年巡回演出來廣州了，白玉無冰錄制了一個VLOG，請求有微信的觀眾姥爺給咱的視頻號點個關注，后續(xù)會更新更多有趣的內容～
參考資料
https://www.typescriptlang.org/docs/handbook/decorators.html https://github.com/tc39/proposal-decorators https://en.wikipedia.org/wiki/Decorator_pattern https://developer.mozilla.org/ https://github.com/cocos-creator/engine
更多
Cocos Creator 3.0 教程! 標志板！Billboard !
Cocos Creator 3.0 入門! 2D 素材 3D 效果!
基礎光照模型！Cocos Creator 2D 光照!
2020 原創(chuàng)精選! shader | 挖洞 | 流體 | 3D | 繩子紋理 | 四叉樹 | 數學 樣樣都有！
更多精彩歡迎關注微信公眾號
點擊“閱讀原文”查看精選導航
“點贊“ ”在看”?鼓勵一下
▼