Неожиданный идентификатор с пространством имен

Question

У меня есть простой код, который заставляет элемент div перемещаться по странице вперед и назад. Все работает нормально, но когда я пытаюсь использовать пространство имен, оно больше не работает, и я получаю «Uncaught syntaxError: Неожиданный идентификатор» о числе 0. Почему это так? Как бы вы использовали здесь пространство имен, чтобы оно работало? Я только начал пространство имен и нахожу его немного запутанным.

<script>

        var MyNameSpace = MyNameSpace|| {

        var x: 0;
        var y: 20;
        var direction = "droite";

        bouger: function () {

            if (direction == "droite") {
                x:x+1;
            }


            else if (direction =="gauche") {

                x: x-1;
            }

            document.getElementById("bouge").style.left: x + "px";
            document.getElementById("bouge").style.top: y + "px";


            if (x == 200) {
                direction = "gauche";
            }
                else if (x ==0) {
                    direction = "droite";
                }
            }

        setInterval(bouger, 5);

        };

        MyNameSpace.bouger();


    </script>

Answer 1

var MyNameSpace = MyNameSpace|| {
    x: 0,
    y: 20,
    direction: "droite",
    bouger: function () {
        if (this.direction == "droite") {
            this.x = this.x + 1;
        } else if (this.direction == "gauche") {
            this.x =  this.x - 1;
        }
        document.getElementById("bouge").style.left = this.x + "px"; 
        document.getElementById("bouge").style.top = this.y + "px";
        if (this.x == 200) {
            this.direction = "gauche";
        } else if (this.x ==0) {
            this.direction = "droite";
        }
    }
}
setInterval(bouger, 5)
MyNameSpace.bouger();

Я отредактировал ваш код, чтобы отразить, как используется шаблон пространства имен.это объект со свойствами, в вашем коде были еще точки с запятой и «var», что делает пространство имен не объектом

Answer 2

В вашем коде есть несколько синтаксических ошибок.var x:0, x: x-1 и т. Д.

Кроме того, используя оператор ||, мы присваиваем MyNameSpace литерал объекта, если он еще не существует.Вы назначаете ему кодовый блок в пределах {}.Вместо этого вы можете изменить x, y и direction на свойство MyNameSpace и использовать ключевое слово this.И вы не можете вызвать setInterval(bouger, 5) внутри литерала объекта.Таким образом, вы можете использовать setTimeout внутри функции bouger, чтобы повторить функцию через 5 мс:

var MyNameSpace = MyNameSpace || {

  x: 0,
  y: 20,
  direction: "droite",

  bouger: function() {

    if (this.direction == "droite") {
      this.x++;
    } else if (this.direction == "gauche") {
      this.x--;
    }
    
    document.getElementById("bouge").style.fontSize = this.x + "px";
    document.getElementById("bouge").style.top = this.y + "px";

    if (this.x == 200) {
      this.direction = "gauche";
    } else if (this.x == 0) {
      this.direction = "droite";
    }
    
    setTimeout(this.bouger.bind(this), 5);
  }

};

MyNameSpace.bouger();

<div id="bouge">text</div>

(style.left не работал. Поэтому я использую fontSize)