moveElement('"+elementID+"',"+final_x+","的解析

在《JavaScript DOM编程艺术（中文第二版）》一书第10章中有一段移动元素的代码如下：

function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
    return true;
  }
  if (xpos < final_x) {
    xpos++;
  }
  if (xpos > final_x) {
    xpos--;
  }
  if (ypos < final_y) {
    ypos++;
  }
  if (ypos > final_y) {
    ypos--;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  movement = setTimeout(repeat,interval);
}

其中 var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";这段代码研究了很久，终于看明白了，现在写下来，留作参考。

分析如下

这行代码的意思是重新调用本函数。

首先要知道setTimeout()函数的第一个参数是一个字符串，Javascript用引号表示字符串，用 “+”号连接字符串。首先用不同颜色标出代码的不同部分，红色表示字符串，蓝色表示变量：

然后将字符串的双引号去除，所要拼接的部分就是以下几个：

moveElement(' 和 elementID 和 ', 和 final_x 和 ,和 final_y 和 , 和 interval 和 )

拼接以后如下：

现在来做一些假设如下:

elementID = 'message'    //javascript中单双引号是一样的
final_x = 100;
final_y = 200;
interval = 10;

将变量用以上参数代替后如下：

moveElement('message',100,200,10);

开始的错误思路

我曾经想过是否可以这样写：

var repeat = "moveElement("+elementID+","+final_x+","+final_y+","+interval+")";

这种写法是不对的，用以上方法替换掉变量后得到的结果是：

moveElement(message,100,200,10);

注意其中message没有引号，所以会被误判为变量。

总结

这里的主要问题是单引号被分在两个字符串中，太多的引号很难分辨，只要弄明白了"moveElement('"和"',"是两个字符串就很容易理解了。

转："moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"的分析 - Hardyantelope - CSDN博客

参与讨论