第三の修練

JavaScriptのテンプレートエンジン

いろんな人がそれぞれのやり方でやっているわけですが、個人的にはテンプレートをHTMLとして書ければいいや、くらいなのでちょっとしたのを書いてみた。

まずはHTMLがこんなん。特別な記法はないけど、テンプレートとして使用するHTMLにIDを振っておく必要がある。

<div id="container">
  <div class="head" id="t_head">
    <h3 id="t_title"></h3>
    <h4 id="t_direction"></h4>
  </div>
  <div class="etc"></div>
</div>

これに、

// テンプレートとして使いたい要素のIDを渡すと、
// スタイルも含めてテンプレートに準じたエレメントを作る。
var dom = new Template('container');

// 該当IDのinnerHTMLを埋めてくれる
dom.fill({
  t_title: "タイトル",
  t_status: "説明文"
}

// innerHTMLを使っているので、
// こうするとid:t_title、id:t_statusが消えるから大変。
dom.fill({ t_head: "あたま" });

// IDが振られているものはこうやってアクセスできる。
dom.container
dom.t_direction

非インテリジェントだけどわかりやすいし、コードみやすくなるし、自分の場合は大抵これで問題ない。

いや、問題あった。場合によってはテンプレートのHTMLが見えないようにdisplay:noneとかを設定する必要があることと、個別のidに対して設定しているスタイルは引き継がれないこと。（引き継ぎたいスタイルはclassに対して設定してあげる。）

スピードは気にならないので実装は特に工夫していない。（気になればその時考える。）

ソース