HTMLのモデルをもう一段抽象化

• HTMLBuilder.js

ほったらかしにしてある自分のところのJavaScriptファイルをまず何とかすべき。一番気分が悪いのがDOM関係で、某ブラウザのバグゆえ止む無くdocument.writeする部分と、DOM APIを利用して生成する部分がある。

これを何とかしようということで、HTMLのモデルをもう一段抽象化してみた。

// 使用例:
var tree = {
// Objectリテラルを利用した文書フラグメントの表記
  div:
  [
    { h3: "Heading Level3" },
    { p: "paragraph." },
    { $comment: "comment" },
    {
      ul:[
        { li: "item1" },
        { li: "item2" }
      ]
    }
  ],
  $attrs: {id: "d2003", title: "test"}
}

var builder = new HTMLBuilder();
builder.feed(tree);

// document.writeする場合
builder.setLevel(0);
document.write( builder.build() );

// DOM 1 HTMLを利用する場合 （未実装）
builder.setLevel(1);
var elmDiv = builder.build();
Element.appendChild(elmDiv);

/* 生成されるHTML
<div id="d2003" title="test">
<h3>Heading Level3</h3>
<p>this is a paragraph.</p>
<!--comment-->
<ul>
<li>item1</li>
<li>item2</li>
</ul>
</div>

JavaScriptは、HTMLの要素等を生成する部分の視認性が悪すぎてメンテナンスする気力が奪われる。かといってこの表記を利用しても、繰り返し生成する部分には関数リテラルを使うしかなく、視認性が向上するケースは結構少ないことに気づいて、やる気喪失。