javascript - "class"文件中的 jQuery 调试功能

Question

我正在创建一个简单的游戏，我需要一些指导来调试一些数据。 我的 HTML 文件中有一个 div，我希望他显示一些数据，这些数据会在某些变量因用户操作而改变时发生变化。

例如我得到了 var xPosition，我想将数据发送到 HTML 中的一个 div，这样我就可以看到 xPosition 的当前状态。

我真的不知道从哪里开始创建这个功能。

我的问题:

1. 是否可以在此类中创建事件并注册一些 将显示所有变化数据的元素？
2. 我必须为这类事情使用一些计时器吗？

这是“类”:

(function ($) {
    $.Player = function (element) {
        this.element = (element instanceof $) ? element : $(element);
        this.movmentSpeed = 10;
        this.size = $(element).width();
        this.xPos = 0;
        this.yPos = 0;
    };


    $.Player.prototype = {
        //register events
        InitEvents: function () {
            var that = this;
            $(document).keydown(function (e) {
                var key = e.which;
                if (key == 39) {
                    that.moveRight(400);
                } else if (key == 37) {
                    that.moveLeft();
                }
            });

            this.element.css({
                left: this.xPos
            });
        },

        //movment functions
        moveRight: function (worldWidth) {
            if ((this.xPos + this.size) <= worldWidth) {
                this.xPos += this.movmentSpeed;
                this.element.css("left", '+=' + this.movmentSpeed);
            }
        },
        moveLeft: function () {
            if (this.xPos > 0) {
                this.xPos -= this.movmentSpeed;
                this.element.css("left", '-=' + this.movmentSpeed);
            }
        }
    };

} (jQuery));

这里是 HTML:

<div id="player">
<div id="debugData"> <div>
<script>
var player = new $.Player($("#player"));
        player.InitEvents();

</script>

(对不起我的英语)

Answer 1

jsFiddle Demo

我想说在类中有一个内部函数会有所帮助。甚至可以通过执行 player.logging = true; 并让它默认为 false;

来设置你打开日志记录

在您的原型(prototype)中，只需为 logging = false 添加一个公共(public)原型(prototype)变量，以及我们的原型(prototype)函数 log()。

您可以使用的内部函数可以像这样简单:

    logging : false, // our default

    log : function (str) {
        if (this.logging) {
            $('#debugData').html(str);
        }
    },

通过这种方式，您可以在代码中留下您的log(this.xPos);(或您想要记录的任何内容)，并通过删除播放器.logging = true; 当你实例化你的类时，它们不会出现，直到你把代码放回去。