gpt4 book ai didi

javascript - UglifyJs - 缩小的损坏变量在运行时恢复其原始名称

转载 作者:行者123 更新时间:2023-11-30 20:34:59 26 4
gpt4 key购买 nike

在我的代码库中,我有这个与 fabric.js 交互的自定义​​代码:

export function cropToCircle(object) {
let minDim = Math.min(object.width, object.height);
window.lastMinDim = minDim;
return object.set('clipTo', ctx => {
if (typeof minDim === 'undefined') minDim = window.lastMinDim || 1000;
ctx.arc(0, 0, minDim / 2, 0, Math.PI * 2, true);
});
}

它被 uglify.js 缩小到这个字符串中,我在这里展示它是美化的:

function s(e) {
var t = Math.min(e.width, e.height);
return window.lastMinDim = t, e.set('clipTo', function (e) {
'undefined' === typeof t && (t = window.lastMinDim || 1e3), e.arc(0, 0, t / 2, 0, 2 * Math.PI, !0);
});
}

在运行时,这个缩小的代码在大多数调用中都运行良好。但是有一个由 Fabric 的 canvas.renderAll() 触发,我在其中收到错误“Reference Error: e is not defined”。错误发生在执行 e.set('clipTo') 的回调期间。

令人惊奇的是,如果我检查调试器,我会看到回调正在作为一个片段运行,其中输入参数被称为 ctx 而不是 e .这是屏幕截图:

ctx is back

显然,如果解释器将输入参数重命名为ctx,则body 中的e 没有定义;但就像浏览器“知道”e 最初被称为 ctx 一样,这对我来说没有任何意义,除非 Fabric(使用 ctx 无处不在)以某种方式影响了这段代码的执行。

这在 Chrome 65 和 Firefox 59 中都得到了验证。

我已经尝试了所有我能想到的方法来更改源代码中的某些内容以避免 ctx 的出现:

  • 将源代码中的ctx重命名为context
  • 将回调提取到一个单独的命名函数中

但还是不开心。

谁能解释为什么浏览器要重命名此回调的输入变量?

最佳答案

这是一个非常值得纪念的事故。从未见过这样的事情,显然,似乎没有其他人对此有任何看法。

我找到的解决方案是保护参数名称 ctx 在缩小过程中不被破坏。

相关的 UglifyJS 配置是:

  mangle: {
except: ['ctx'],
},

它创建了以下缩小/美化的代码:

function s(e) {
var t = Math.min(e.width, e.height);
return window.lastMinDim = t, e.set('clipTo', function (ctx) {
'undefined' === typeof t && (t = window.lastMinDim || 1e3), ctx.arc(0, 0, t / 2, 0, 2 * Math.PI, !0);
});
}

这样浏览器仍然会用 ctx 覆盖输入参数名称,但在这种情况下,函数体在执行期间仍然有意义。

关于javascript - UglifyJs - 缩小的损坏变量在运行时恢复其原始名称,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49939260/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com