"moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")"的分析

在《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用引号表示字符串，用 “+”号连接字符串。首先用不同颜色标出代码的不同部分，红色表示字符串，蓝色表示变量：
repeat ="moveElement('" +elementID +"'," +final_x+","+final_y+","+interval+")";
然后将字符串的双引号去除，所要拼接的部分就是以下几个：

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

拼接以后如下：

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('"和"',"是两个字符串就很容易理解了。