useConsole的封装,vue,react,htmlscript标签,通用

之前用了接近hack的方式实现了console的封装,目标是获取console.log函数的执行(调用栈所在位置)所在的代码行数。

例如以下代码,执行window.mylog(1)时候,console.log实际是在匿名的箭头函数()=>{//这里执行的}

复制代码
const mylog = (...arg) => console.log(...arg)
mylog("window.mylog")

如果代码改为以下,

复制代码
const mylog2={
    log:console.log
}
mylog2.log("test")

因为log返回的是conosle.log本身,并且它并没有在函数内执行,这里理解把console.log这个函数的内存地址赋值给mylog2.log,执行mylog2.log就是执行console.log

调试1

用谷歌调试工具,断点来查看演示上面效果:

mylog:

mylog2:

再次调试:

代码:

复制代码
const mylog = () => {
    return {
        logx: (...arg) => {
            return console.log(...arg)
        }
    }
}

const mylog2 = () => {
    return {
        logx: console.log
    }
}

const MyLog = mylog();
const MyLog2 = mylog2();
MyLog.logx("window.mylog")
MyLog2.logx("window.mylog2")

效果:

调试:

结果:

mylog.logx执行的函数就是logx,而mylog2.logx执行的是console.log函数

封装hooks

复制代码
const useConsole = function (...arg) {
    window.console.log("outside", this)
    return {
        log: window.console.log,
        warn: window.console.log,
    }
}

使用:

复制代码
const Console = useConsole();
Console.log(111, 6666, 222)
Console.warn(111, 6666, 222)
Console.test(111, 6666, 222)

上面代码,vue,react,和script标签内都适用

弊端

打包发布时候,压缩代码插件无法移除Console.log或者Console.warn,需要手动配置,例如uglifyjs-webpack-plugin 就是配置pure_funcs属性

复制代码
//  引入uglifyjs-webpack-plugin
const UglifyPlugin = require('uglifyjs-webpack-plugin')
 
module.exports = {
    configureWebpack: (config) => {
         let optimization = {
            minimizer: [new UglifyPlugin({
              // 删除console
                uglifyOptions: {
                    parallel: true,
                    warnings: false,
                    compress: {
                      drop_console: false, //是否清除所有console
                      drop_debugger: true,//是否清除debugger
                      pure_funcs: ['Console.log','Console.warn'] //drop_console 设置false,需要特殊清除的
                    }
                }
             })]
          }
          Object.assign(config, {
            optimization
          })
    }
}
相关推荐
速易达网络4 小时前
RuoYi、Vue CLI 和 uni-app 结合构建跨端全家桶方案
javascript·vue.js·低代码
lyj1689975 小时前
vue-i18n+vscode+vue 多语言使用
前端·vue.js·vscode
我在北京coding9 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
海天胜景10 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui
翻滚吧键盘10 小时前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
乆夨(jiuze)11 小时前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中11 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
xiguolangzi12 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X12 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come1123413 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js