1
resposta

Não sei o que esse trecho faz. "return { nextFrame: nextFrame };"

Esse último trecho eu não consigo entender para que serve: "return { nextFrame: nextFrame };" Não encontro sintaxe semelhante a essa em lugar nenhum

function createSprite(selector) {

    function hasNext() {

        return current + 1 <= last;
    }

    function moveFrame (from, to) {

        $el.removeClass(from)
            .addClass(to);
    }

    function nextFrame() {

        if (hasNext()) moveFrame (frames[current], frames[++current]);
    }

    var $el = $(selector);

    var frames = [
        'frame1', 'frame2', 'frame3', 'frame4', 'frame5',
        'frame6', 'frame7', 'frame8', 'frame9'
    ];

    var current = 0;

    var last = frames.length - 1;

    $el.addClass(frames[current]);

    return { nextFrame: nextFrame };
}
<script>

        var sprite = createSprite('.sprite');
        setInterval(function () {
            sprite.nextFrame();
        }, 500);

    </script>

Não entendo como esse aquele trecho se conecta com este última aqui.

1 resposta

Oi Andrey,

A função createSprite retorna um objeto que tem uma propriedade chamada nextFrame, o valor dessa propriedade é uma função, que inclusive, você executa nesse código:

  var sprite = createSprite('.sprite');
        setInterval(function () {
            sprite.nextFrame();
        }, 500);

Essa sintaxe que vc se refere é justamente para criação do objeto com essa propriedade:

return { nextFrame: nextFrame };

O valor dessa propriedade nesse objeto retornado é uma função com o mesmo nome, nextFrame, que é criada dentro da função createSprite. Por isso há essa repetição nextFrame: nextFrame.