个人中心
gpt4 book ai didi

javascript - 请解释这段代码的逻辑是什么以及kinetic js部分

转载 作者：太空宇宙 更新时间：2023-11-04 14:02:34 25 4
gpt4 key购买 nike

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

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

    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>

如有其他需要，请评论。感谢您的帮助。

最佳答案

LimitedArray 类是一个容器类。它有一个数组作为私有(private)变量(var storage)，外界不能直接访问它。但是，它确实公开了一些公共(public)函数来修改和访问此数组。

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

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

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

关于javascript - 请解释这段代码的逻辑是什么以及kinetic js部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21399980/

25 4 0
文章推荐： c# - 在用 C++ 编写的 COM 客户端中抛出空返回值异常
文章推荐： java - 在 JPA 中映射复杂的 Map
文章推荐： javascript - jQuery 检查元素是否可编辑
文章推荐： java - 如何在 Java 中使 JTextPane 具有不同的选项卡大小？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com