javascript - Paper.js 代码在 Chrome 开发者工具中看起来有所不同

Question

这是一个游戏的代码，其中一个圆圈在页面上跳跃，您需要在一定的时间内单击它(naomikudren.com/Catch)。

var circleSize = 60;
var circle = new Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
function onFrame(event) {
    counter2++
    if (counter2 % speed === 0) {
        var newPoint = Point.random() * view.size;
        circle.position = new Point(newPoint, newPoint);
    }
    console.log(counter2)
}
circle.onClick = function(event) {
    var newPoint = Point.random() * view.size;
    circle.position = new Point(newPoint, newPoint);
    this.fillColor = {
        hue: Math.random() * 360,
        saturation: 1,
        brightness: 1,
    };
    counter2 = 0;
    counter++;
    circle.scale(0.99);

    text.content = 'Score ' + counter;
}


var text = new PointText(new Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';

这一切都很好，但是当我在 Chrome 开发者工具中查看 Paperscript 文件作为源时，它显示如下:

paper._execute = function(__$__,view,Point,Path,PointText,onFrame) {var circleSize = 60;
var circle = new Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;
function onFrame(event) {
    counter2 = __$__(counter2, "+", 1)
    if (__$__(counter2, "%" , speed) === 0) {
        var newPoint = __$__(Point.random(), "*" , view.size);
        circle.position = new Point(newPoint, newPoint);
    }
    console.log(counter2)
}
circle.onClick = function(event) {
    var newPoint = __$__(Point.random(), "*" , view.size);
    circle.position = new Point(newPoint, newPoint);
    this.fillColor = {
        hue: __$__(Math.random(), "*" , 360),
        saturation: 1,
        brightness: 1,
    };
    counter2 = 0;
    counter = __$__(counter, "+", 1);
    circle.scale(0.99);

    text.content = 'Score ' + counter;
}


var text = new PointText(new Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';

//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaHR0cDovL25hb21pa3VkcmVuLmNvbS9DYXRjaC9jYXRjaC5qcyIsIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiaHR0cDovL25hb21pa3VkcmVuLmNvbS9DYXRjaC9jYXRjaC5qcyJdfQ==
return { onFrame: onFrame };
}

我不明白这里发生了什么。 Chrome 不应该按原样显示源文件吗？为什么它与源文件不同，这是否意味着这里发生了某种从 Paperscript 到纯 JavaScript 的编译？

Answer 1

这是因为您使用的是 paperscript，而不是 JavaScript。当您的代码声明为 paperscript 时，paperjs 会对其进行预处理，Chrome 向您显示的就是该预处理的结果。如果你仔细想想，这是有道理的——Chrome 需要向你展示正在执行的内容，以便有效地进行调试。它无法知道不同类型的脚本预处理可能进行的所有转换。

这是我总是在 JavaScript 模式下使用 paperjs 的原因之一，尽管 1) 运算符不起作用，必须使用函数，2) 必须引用 Path.Circle作为 paper.Path.Circle (与所有其他纸张对象和变量类似)。

在某些情况下，使用 paperscript 可能会导致奇怪的行为。例如，如果您在代码中使用 view.onFrame = function() {...} 但也声明 function onFrame() {...} 则 View 函数将被调用，直到代码完成并在最后返回对象 {onFrame: onFrame} 。此时 onFrame 函数将取代 view 处理程序。

我还没有对此进行测试，但这里可以将您的代码快速转换为 native JavaScript。主要区别是 1) 我显式调用 paper.setup 以及 2) 所有对纸质项目的引用都以 paper. 为前缀。我还使用 view.on 处理程序进行帧处理，尽管还有其他方法可以使其发挥作用。

paper.setup("myCanvas");

var circleSize = 60;
var circle = new paper.Path.Circle(new Point(50, 50), circleSize);
circle.fillColor = "red";
var counter = 0;
var counter2 = 0;
var speed = 60;

paper.view.on('frame', function(event) {
    counter2++
    if (counter2 % speed === 0) {
        var newPoint = paper.Point.random().multiply(paper.view.size);
        circle.position = new paper.Point(newPoint, newPoint);
    }
    console.log(counter2)    
});

circle.onClick = function(event) {
    var newPoint = paper.Point.random().multiply(paper.view.size);
    circle.position = new paper.Point(newPoint, newPoint);
    this.fillColor = {
        hue: Math.random() * 360,
        saturation: 1,
        brightness: 1,
    };
    counter2 = 0;
    counter++;
    circle.scale(0.99);

    text.content = 'Score ' + counter;
}


var text = new paper.PointText(new paper.Point(50, 50));
text.justification = 'center';
text.fillColor = 'black';