JavaScript中的高效方法

Efficient Method in JavaScript

本文关键字：方法 高效 JavaScript      更新时间：2023-09-26

如何在JavaScript中多次使用一个方法而不重复创建另一个方法?因为我做的是用相同的字段和代码做了一个方法唯一不同的是id。每个方法都需要一个参数，即id。

function enemyGet() {
    new enemyMove2()
    new enemyMove()
    new enemyMove3()
}
  function enemyMove2() {
    var enemyimage = document.getElementById("enemy");
        var leftenemy = parseInt(enemyimage.style.left);
        var topenemy = parseInt(enemyimage.style.top);
        var time = setTimeout("enemyMove2()", 20)
        if (leftenemy < leftplayer) {
            leftenemy = leftenemy + 5;
        }
        if (leftenemy > leftplayer) {
            leftenemy = leftenemy - 5;
        }
        if (topenemy < topplayer) {
            topenemy = topenemy + 5;
        }
        if (topenemy > topplayer) {
            topenemy = topenemy - 5;
        }
        enemyimage.style.left = leftenemy + "px";
        enemyimage.style.top = topenemy + "px";
        var hit_list = $("#x").collision(".lollol");
        hit_list.remove();
}
function enemyMove() {

    var enemyimage = document.getElementById("enemy2");
    var leftenemy = parseInt(enemyimage.style.left);
    var topenemy = parseInt(enemyimage.style.top);
    var time = setTimeout("enemyMove()", 20)
    if (leftenemy < leftplayer) {
        leftenemy = leftenemy + 5;
    }
    if (leftenemy > leftplayer) {
        leftenemy = leftenemy - 5;
    }
    if (topenemy < topplayer) {
        topenemy = topenemy + 5;
    }
    if (topenemy > topplayer) {
        topenemy = topenemy - 5;
    }
    enemyimage.style.left = leftenemy + "px";
    enemyimage.style.top = topenemy + "px";
    var hit_list = $("#x").collision(".lollol");
    hit_list.remove();
}
function enemyMove3() {

    var enemyimage = document.getElementById("enemy3");
    var leftenemy = parseInt(enemyimage.style.left);
    var topenemy = parseInt(enemyimage.style.top);
    var time = setTimeout("enemyMove3()", 20)
    if (leftenemy < leftplayer) {
        leftenemy = leftenemy + 5;
    }
    if (leftenemy > leftplayer) {
        leftenemy = leftenemy - 5;
    }
    if (topenemy < topplayer) {
        topenemy = topenemy + 5;
    }
    if (topenemy > topplayer) {
        topenemy = topenemy - 5;
    }
    enemyimage.style.left = leftenemy + "px";
    enemyimage.style.top = topenemy + "px";
    var hit_list = $("#x").collision(".lollol");
    hit_list.remove();
}

使用参数:

function enemyGet() {
    // pass the id as a argument to the function
    enemyMove("enemy2")
    enemyMove("enemy")
    enemyMove("enemy3")
}
function enemyMove(enemy) {
    // the variable enemy is the id passed as an argument to the function 
    var enemyimage = document.getElementById(enemy);
        var leftenemy = parseInt(enemyimage.style.left);
        var topenemy = parseInt(enemyimage.style.top);
        // Pass the parameter in timeout as well. You have access to enemy variable due to concept of closure
        var time = setTimeout(function(){enemyMove(enemy)}, 20)
        if (leftenemy < leftplayer) {
            leftenemy = leftenemy + 5;
        }
        if (leftenemy > leftplayer) {
            leftenemy = leftenemy - 5;
        }
        if (topenemy < topplayer) {
            topenemy = topenemy + 5;
        }
        if (topenemy > topplayer) {
            topenemy = topenemy - 5;
        }
        enemyimage.style.left = leftenemy + "px";
        enemyimage.style.top = topenemy + "px";
        var hit_list = $("#x").collision(".lollol");
        hit_list.remove();
}

在这种情况下，您可以将调用之间的值变化参数化。

您可以将变化的id作为参数传递给enemyMove方法。

function enemyMove(id) {

    var enemyimage = document.getElementById(id);
    var leftenemy = parseInt(enemyimage.style.left);
    var topenemy = parseInt(enemyimage.style.top);
    var time = setTimeout(function(){
        enemyMove(id);
    }, 20)
    if (leftenemy < leftplayer) {
        leftenemy = leftenemy + 5;
    }
    if (leftenemy > leftplayer) {
        leftenemy = leftenemy - 5;
    }
    if (topenemy < topplayer) {
        topenemy = topenemy + 5;
    }
    if (topenemy > topplayer) {
        topenemy = topenemy - 5;
    }
    enemyimage.style.left = leftenemy + "px";
    enemyimage.style.top = topenemy + "px";
    var hit_list = $("#x").collision(".lollol");
    hit_list.remove();
}
然后

function enemyGet() {
    new enemyMove('enemy')
    new enemyMove('enemy2')
    new enemyMove('enemy3')
}

可以使用方括号来引用函数:

// Store reference to global object for use wherever
var global = this;
...
  var n = 3;
  // Call method based on value of n
  global['enemyMove' + n]();

…

你可以让你的函数属性(方法)不是全局/window对象

相关文章：