Question

我在JS编了一个编程，但发现我的项目变得非常冗长且不必要地复杂。我想学习OOP JS，并且发现当我的代码用颜色和数字描绘时更容易学习。这是一个小例子程序：

var box1Left1 = 0; 
var box1Left2;
var box2Left1 = 0; 
var box2Left2;

setInterval(box1Fly, 10); 
function box1Fly() {
  // Fly Right
  if ( box1Left1 < 300 ) {
    box1Left1++; 
    document.getElementById("box1").style.left = box1Left1 + "px"; 
    box1Left2 = box1Left1;
  }
  // Fly Left
  if ( box1Left1 >= (300) ) {
    box1Left2--; 
    document.getElementById("box1").style.left = box1Left2 + "px"; 
  }
  // Fly Right Again
  if( box1Left2 == 0 ) { box1Left1 = box1Left2; }
  
}

setInterval(box2Fly, 10); 
function box2Fly() {
  // Fly Right
  if ( box2Left1 < 300 ) {
    box2Left1++; 
    document.getElementById("box2").style.left = box2Left1 + "px"; 
    box2Left2 = box2Left1;
  }
  // Fly Left
  if ( box2Left1 >= (300) ) {
    box2Left2--; 
    document.getElementById("box2").style.left = box2Left2 + "px"; 
  }
  // Fly Right Again
  if( box2Left2 == 0 ) { box2Left1 = box2Left2; }
}

<div id="box1" style="position:absolute; top: 10px; left: 0px; width: 50px; height: 50px; background-color: #aa39fc;"></div>
  
<div id="box2" style="position:absolute; top: 100px; left: 0px; width: 50px; height: 50px; background-color: #2c79f1;"></div>

正如你所看到的，简单的事情变得非常混乱！这是交易：我可以只制作一个功能，某种通用功能，它可以同时处理这两个飞行箱吗？而不是像现在一样，有两个几乎重复的函数（box1Fly＆amp; box2Fly）？

非常感谢，最诚挚的问候！

Answer 1

如果downvoter说为什么答案被低估了，并且非常乐意编辑答案以使其正常，那么会感到更高兴。 :)

为什么你不能只传递一个参数，这个参数应该使用哪个id？顺便说一下，这里没有OO JS。

var box1Left1 = 0; 
var box1Left2;
var box2Left1 = 0; 
var box2Left2;

setInterval('boxFly("box1")', 10); 
setInterval('boxFly("box2")', 10);

function boxFly(box_id) {
  // Fly Right
  if ( box1Left1 < 300 ) {
    box1Left1++; 
    document.getElementById(box_id).style.left = box1Left1 + "px"; 
    box1Left2 = box1Left1;
  }
  // Fly Left
  if ( box1Left1 >= (300) ) {
    box1Left2--; 
    document.getElementById(box_id).style.left = box1Left2 + "px"; 
  }
  // Fly Right Again
  if( box1Left2 == 0 ) { box1Left1 = box1Left2; }

}

<div id="box1" style="position:absolute; top: 10px; left: 0px; width: 50px; height: 50px; background-color: #aa39fc;"></div>

<div id="box2" style="position:absolute; top: 100px; left: 0px; width: 50px; height: 50px; background-color: #2c79f1;"></div>

要转换为面向对象的JavaScript ，请使用以下命令：

var box1Left1 = 0;
var box1Left2;
var box2Left1 = 0;
var box2Left2;

var box = function (id) {
  this.id = id;
  this.fly = function () {
    // Fly Right
    if ( box1Left1 < 300 ) {
      box1Left1++; 
      document.getElementById(id).style.left = box1Left1 + "px"; 
      box1Left2 = box1Left1;
    }
    // Fly Left
    if ( box1Left1 >= (300) ) {
      box1Left2--; 
      document.getElementById(id).style.left = box1Left2 + "px"; 
    }
    // Fly Right Again
    if( box1Left2 === 0 ) { box1Left1 = box1Left2; }
  };
  this.startFlying = function () {
    console.log(id);
    setInterval(this.fly, 10);
  };
};

box1 = new box("box1");
box2 = new box("box2");
box1.startFlying();
box2.startFlying();

<div id="box1" style="position:absolute; top: 10px; left: 0px; width: 50px; height: 50px; background-color: #aa39fc;"></div>

<div id="box2" style="position:absolute; top: 100px; left: 0px; width: 50px; height: 50px; background-color: #2c79f1;"></div>

OOP JavaScript - 初学者示例

1 个答案: