■

Javascriptでテンプレート的な…（徒書）

javascript脳を動かす。私はgetElementsByTagNameを回避する方向で。あと、createTextNodeが個人的に見づらいので、テンプレートの各要素に空白文字を入れてdataアトリビュートの書き換えにしてみました。

<script type="text/javascript">

function HTMLWalker(handler){
  this.handler = handler;
}
HTMLWalker.prototype.walk = function(node) {
  try {
    this.handler[node.nodeName](node);
  } catch(err) {
    if (node === null)
      return;
    else if (err instanceof TypeError)
      // yada yada yada..
      "";
  }
  arguments.callee.call(this, node.firstChild);
  arguments.callee.call(this, node.nextSibling);
};

function MyHandler(){
  this.resultNode = document.createDocumentFragment();
  
  this["DIV"] = function(node) {
    alert("DIV handler called");
    node.id = "";
    node.style.display = "block";
    this.resultNode.appendChild(node);
  };
  this["H1"] = function(node) {
    alert("H1 handler called");
    node.firstChild.data = "Title";
  };
  this["P"] = function(node) {
    alert("P handler called");
    node.firstChild.data = "Paragraph";
  };
  this["#text"] = function(node) {
    alert("#text handler called");
  }
}

function add(){
  var handler = new MyHandler();
  var walker = new HTMLWalker(handler)
  walker.walk(document.getElementById("template").cloneNode(true));
  var contents = document.getElementById("contents");
  contents.appendChild(handler.resultNode);
}

</script>

<button onclick="add()">add</button>

<div id="template" style="display: none;">
<h1> </h1>
<p> </p>
</div>

<div id="contents">
</div>

意味は無し。