[代码解析] 关于交换两个DOM节点在文档中的位置

Question

交换两个DOM节点在文档中的位置,下面的代码中分了两种情况：
(1)a b是同级元素
(2)a嵌套b（或者b嵌套a）

html：

<div><span id="a1">a</span><span id="b1">b</span></div>
<div><span id="a2">a</span><span></span><span id="b2">b</span></div>
<div><span id="a3">a<span id="b3">b</span></span></div>

js:

function swapElements(a,b){
  if(a==b)return;
  //记录父元素
  var bp=b.parentNode,ap=a.parentNode;
  //记录下一个同级元素
  var an=a.nextElementSibling,bn=b.nextElementSibling;
  //如果参照物是邻近元素则直接调整位置
  if(an==b)return bp.insertBefore(b,a);
  if(bn==a)return ap.insertBefore(a,b);
  if(a.contains(b)) //如果a包含了b
    return ap.insertBefore(b,a),bp.insertBefore(a,bn);
  else
    return bp.insertBefore(a,b),ap.insertBefore(b,an);
};
swapElements(a1,b1);
swapElements(a2,b2);
swapElements(a3,b3);

问题是，

(1)为什么同级情况中
bp.insertBefore(b,a);要return 回去

(2)嵌套情况中,下列代码看不懂

return ap.insertBefore(b,a),bp.insertBefore(a,bn);

Answer 1

1. return是为了结束本函数执行, 大部分是因个人习惯, 因为在if中写了return之后就不必去写else了, 运行时解释器也没必要去执行后面的代码了。调用的时候也并没有关系返回值。

2. return ap.insertBefore(b,a),bp.insertBefore(a,bn);可以理解为

   ap.insertBefore(b,a)
   return bp.insertBefore(a,bn)

   js压缩后大部分都是这种语法格式的代码,这种代码是为了节约空间文件大小的, 是给机器看的, 不是给人看的

总的来讲都是为了代码节约。

Answer 2

你这是原生js还是用jquery啊，如果是jquery去看看replacWith();replaceAll()方法；就懂了。，

Answer 3

我的理解，用return写个闭包可以避免用复杂的if..elseIf这种判断去躲各种分支，直接到分支上丢个闭包然后就可以退出了函数了，代码看上去相对清爽些。

Answer 4

楼主你好，我本地测试下了代码，发现下面代码判断可以替换成（应该无需a.contains(b)判断）
if (a.contains(b)) { // 如果a包含了b
return ap.insertBefore(b, a), bp.insertBefore(a, bn);
} else {
return bp.insertBefore(a, b), ap.insertBefore(b, an);
}
===》return ap.insertBefore(b, a), bp.insertBefore(a, bn);