Question

有人可以在以下代码中解释函数this.iterateItems和this.get吗？

我通过朋友看到了这段代码，我需要一些帮助来解释这部分内容。

    var LimitedArray = function (upperLimit) {
    var storage = [];

    // default limit on length if none/invalid supplied;
    upperLimit = +upperLimit > 0 ? upperLimit : 100;

    this.push = function (item) {
        storage.push(item);
        if (storage.length > upperLimit) {
            storage.shift();
        }
        return storage.length;
    };

    this.get = function (i) {
        return storage[i];
    };

    this.iterateItems = function (iterator) {
        var i, l = storage.length;
        if (typeof iterator !== 'function') { return; }
        for (i = 0; i < l; i++) {
            iterator(storage[i]);
        }
    };
};

$(document).ready(function() {
    var tail = new LimitedArray(50);

    var i = 0, j = 0;
    var stage = new Kinetic.Stage({
        container: 'container',
        width: window.innerWidth,
        height: window.innerHeight,
        listening: true
    });
    var layer = new Kinetic.Layer({
        listening: true
    });
    var layer = new Kinetic.Layer();
    var player = new Kinetic.Circle({
        x: 20,
        y: 20,
        radius: 6,
        fill: 'cyan',
        stroke: 'black',
        draggable: true
    });

    layer.add(player);


    // move the circle with the mouse
    stage.getContent().addEventListener('mousemove', function() {
        layer.removeChildren();
        layer.add(player);
        player.setPosition(stage.getPointerPosition());
        var obj = {
            x: stage.getPointerPosition().x,
            y: stage.getPointerPosition().y
        };

        tail.push(obj);
        var arr = [];
        tail.iterateItems(function (p) {
            arr.push(p.x, p.y);
        });
        var line = new Kinetic.Line({
        points: arr,
        stroke: 'white',
        strokeWidth: 2,
        lineCap: 'round',
        lineJoin: 'round'
      });
        layer.add(line);
        layer.draw();
    });
    stage.add(layer);
});

这是html：

 <!DOCTYPE html>
<html>
    <head>
        <title>Collision Detection</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" href="../css/style.css"/>
    </head>
    <body>
        <div id="container" style=" background:#000; margin:auto; float:left;"></div>
        <script src="../js/jquery.min.js"></script>
        <script src="../js/kinetic-v5.0.0.min.js"></script>
        <script src="../js/main_kinetic.js"></script>
    </body>
</html>

如果您还需要更多信息，请发表评论。谢谢你的帮助。

Answer 1

类LimitedArray是一个容器类。它有一个数组作为私有变量（var storage），外部世界无法直接访问它。但是，它会公开一些公共函数来修改和访问这个数组。

函数this.get(n)是一个访问器函数，它只是为数组元素提供索引访问。它返回该数组的第n个元素。

函数this.iterateItems(iterator)希望您将函数作为参数传递。然后，它为storage数组中的每个元素调用该函数一次，将该元素传递给函数。这是作者显然不知道的标准array.foreach()功能的重新发明。这也不是您通常所说的iterator pattern。

例如，当您希望使用tail函数输出控制台中console.log(object) LimitedArray中的每个元素时，您可以调用tail.iterateItems(console.log)。但是，在这个程序中，代码的程序员将匿名函数传递给它。此匿名函数将每个参数传递给另一个数组。因此，它只是将内部storage数组的所有元素复制到arr数组中的精心设计方法。

Answer 2

LimitedArray是一个包含Array。

的类

在本课程的实例中，允许用户：

推送该数组中的intems
获取某些索引上的项目
并在该数组中进行循环

get将访问该特定数组中的某个项目。

iterateItems是在该数组中进行循环。在iterateItems函数中，您需要传递，默认情况下会传递该特定数组。

请解释一下这段代码的逻辑和动力学部分

2 个答案: