javascript - 如何使用模块化 JavaScript 模式创建单独的对象

Question

我正在尝试更新间隔值 x 但没有成功。我希望最终拥有不同的 pawn 对象，其内部值可以在按上/下/左/右按键重绘 Canvas 时进行更新。

代码更新:现在能够更新 x、y 值，但不确定是否使用模块化 JavaScript 模式创建单独的对象。

使用 jQuery 1.5.1 的 JavaScript:

//Constructors
    var pawn = (function() {        

        var x = 25;
        var y = 25;     
        var getX = function() {
            return x;
        };
        var getY = function() {
            return y;
        };

        function _drawPawn(x,y) {
            var x = x || 25;
            var y = y || 25;
            var canvas = document.getElementById("canvas");
            if (canvas.getContext) {
                var b = $('body');
                var winH = b.height();
                var winW = b.width();
                $(canvas).attr('height',winH).attr('width',winW);
                var ctx = canvas.getContext("2d");  
                ctx.beginPath();
                ctx.lineWidth="3";
                ctx.arc(x, y, 10, 0, Math.PI * 2, true); // circle              
                ctx.stroke();
            }
        }

        function left() {
            x = 100;
            y = 100;
        }

        return {
            getX:getX,
            getY:getY,
            draw: function drawPawn(x,y) {
                _drawPawn(x,y);
            },
            left:left
        }
    })();   

    //Init
    $(function() {      
        var b = pawn;
        b.left();
        alert(b.getX());

            var a = pawn;
    alert(a.getX());

        //b.draw();
    });

和 html:

<canvas id="canvas" height="800px" width="600px">
    Download a modern browser like Internet Explorer 9, Firefox, Safari or Chome to view this.
</canvas>

Answer 1

按照目前的编写方式，您的 getX() 函数将使用提供的(空)参数列表自动调用，并返回 x，这相当于:

var getX = x;

它将在声明时为 getX 提供 x 的值。

要修复，请删除括号:

var getX = function() {
        return x;
};

<小时/>

您还需要在返回的对象中修复此函数:

draw: function drawPawn(x, y) {
    _drawPawn(x, y);
}

因为明显的意图是调用draw不带参数并使用当前绑定(bind)的x和y值，应该是:

draw: function drawPawn() {
    _drawPawn(x, y);
}