JavaScript 的基本错误；显示模块模式样式

Question

这是我在 Whosebug 中的第一个问题：

我在 Javascript 中的代码有问题。我是用这种语言写作的新手，我不知道这个模块的问题在哪里，但错误是

Uncaught TypeError: Cannot read property 'init' of undefined.

我想从 HTML5/JS 游戏开始，我有点紧张，因为几天前我就遇到了这个问题....谢谢大家！

var game = (function() {
    //////////////////////////////////////////////////
    /////////////////Atributos del juego/////////////////
    ////////////////////////////////////////////////////////
    var canvas = null,
        ctx = null,
        gameover = false,
        pause = false,
        score = 0;

    //////////////////////////////////////////////////
    ////////////////////Métodos privados/////////////////
    ////////////////////////////////////////////////////////
    window.requestAnimationFrame = (function(callback) //Función autoejecutable que detecta la compatibilidad del navegador con la animación
        {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

    function loop() //Actualiza los estados y dibuja los elementos durante la partida
    {
        update();
        draw();
    }

    function update() //Actualiza el estado del juego
    {
        window.requestAnimationFrame(update);

    }

    function draw() //Dibuja los elementos del juego en el canvas
    {
        ctx.drawImage(buffer, 0, 0); //Dibujamos el buffer en el contexto
    }

    //////////////////////////////////////////////////
    ////////////////////Métodos públicos/////////////////
    ////////////////////////////////////////////////////////
    function init() {
        var i = 0;
        alert(i);
    }

    return //Devuelve un objeto con todos los métodos públicos
    {
        init: init;
    };
}());

game.init();

Answer 1

问题在于您的 return 语句，特别是 init 之后的分号以及 return 关键字之后的换行符。

更改为：

return {
    init: init
};

var game = (function() {
    //////////////////////////////////////////////////
    /////////////////Atributos del juego/////////////////
    ////////////////////////////////////////////////////////
    var canvas = null,
        ctx = null,
        gameover = false,
        pause = false,
        score = 0;
    
    

    //////////////////////////////////////////////////
    ////////////////////Métodos privados/////////////////
    ////////////////////////////////////////////////////////
    window.requestAnimationFrame = (function(callback) //Función autoejecutable que detecta la compatibilidad del navegador con la animación
        {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(callback) {
                    window.setTimeout(callback, 1000 / 60);
                };
        })();

    function loop() //Actualiza los estados y dibuja los elementos durante la partida
    {
        update();
        draw();
    }

    function update() //Actualiza el estado del juego
    {
        window.requestAnimationFrame(update);

    }

    function draw() //Dibuja los elementos del juego en el canvas
    {
        ctx.drawImage(buffer, 0, 0); //Dibujamos el buffer en el contexto
    }

    //////////////////////////////////////////////////
    ////////////////////Métodos públicos/////////////////
    ////////////////////////////////////////////////////////
    function init() {
        var i = 0;
        alert(i);
    }

    //Devuelve un objeto con todos los métodos públicos
    return {
        init: init
    };
}());

game.init();

关于换行，见：Why doesn't a Javascript return statement work when the return value is on a new line?

Answer 2

真正的问题是这个

   return // comment
   { 
      init: init 
   };

由于自动分号插入，javascript 解析器将其解释为

  return;

您可以在 'Why should every single statement end with ;?'

下的 Justifying Crockford claims 中阅读更多相关信息

var app = document.getElementById('app');
var game = (function() {
    function init() {
        var i = 0;
        app.innerHTML += '<p>game initialized</p>';
    }
    // beware of http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/
    return { init: init }
}());
game.init();

<div id="app"></div>

JavaScript 的基本错误；显示模块模式样式

Basic error with JavaScript; Revealing Module Pattern style

javascript

design-patterns

module