Question

我正在开展一个新项目;像javaScript中的模板系统。所以，这是我的小代码：

var Tree = ( function ( _Obj ) {
  var _E,
      _N;
  _Obj.forEach ( function ( e ) {
    _E = document.createDocumentFragment();
    if ( "tagName" in e ) {
      _N = document.createElement( e.tagName ); 
    }
    if ( "childNode" in e ) {
      _N.appendChild( Tree ( e.childNode ) );
    }
  });
  _E.appendChild ( _N );
  return _E;
});

这里是该函数的参数：

Fragment = [{ // firstNode
    "tagName" : "div",
    "childNode" : [{
      "tagName" : "p",
      "childNode" : [{
        "tagName" : "string",
        "childNode" : [{
          "tagName" : "span",
        }]
      }]
    }]
  },
  { //secondNode
    "tagName" : "div",
    "childNode" : [{
      "tagName" : "p",
      "childNode" : [{
        "tagName" : "span",
        "childNode" : [{
          "tagName" : "div"
        }]
      }]
    }]
  }
];

确定;这段代码应该返回一个包含var Fragment的每个对象的文档片段;如果你看，JSON基于tagName和childNode元素;对于每个对象依赖于一个tagName，因此该函数返回一个具有相同名称的新元素。

但这里出了点问题;该函数只返回var Fragment的SECOND NODE：

#document-fragment
|_<div>
  |_<p>
    |_<span>
        <div></div>
      </span>
    </p>
  </div>

这等于：

{
    "tagName" : "div",
    "childNode" : [{
      "tagName" : "p",
      "childNode" : [{
        "tagName" : "span",
        "childNode" : [{
          "tagName" : "div"
        }]
      }]
    }]
  }

但是，FIRST NODE会发生什么事？

感谢先进：）

PD：对不起我的英语，我来自阿根廷。

Answer 1

看起来你的forEach循环通过并将_N分配给正确的东西，但是在整个循环完成之后只会_N追加到_E。将_E.appendChild(_N)移到您的内部和底部。

Answer 2

var Tree = ( function ( _Obj ) {
  var _E,
      _N;
  _E = document.createDocumentFragment(); // put this out of forEach
  _Obj.forEach ( function ( e ) {
    if ( "tagName" in e ) {
      _N = document.createElement( e.tagName ); 
    }
    if ( "childNode" in e ) {
      _N.appendChild( Tree ( e.childNode ) );
    }
    _E.appendChild ( _N ); // put this inside of forEach
  });
  return _E;
});

forEach只执行数组的最后一个元素

2 个答案: