読者です 読者をやめる 読者になる 読者になる

daiizの自由帳

フレンチフライ トリュフ塩仕立て

HTMLバインディング関数をつくってみた

作品

JavaScriptプログラム中でHTMLコードを生成するときに、変数と文字列の「+」の連結でゴチャゴチャになることを避けるためにつくってみました。エスケープとかはしていないけれど紹介します。

f:id:daiiz:20140812234424p:plain

関数本体

function bind(template, json) {
   var code = template;
   var keys = Object.keys(json);
   var rg, key;
   for(var i = 0; i < keys.length; i++) {
      key = keys[i];
      rg = new RegExp("{" + key + "}", "gi");
      code = code.replace(rg, json[key]);
   }
   return code;
}

使い方

キーワード{}で括ると置換対象と認識されます。キーワードは第二引数のJSONのkeyと対応しており、JSONでのvalueが置換後の値になります。JSONオブジェクトは複数のKey-Valueペアを持つことができるため、第一引数のHTMLテンプレートでも複数の置換対象キーワードを埋め込むことができます。例えば、以下のようにして使います。

bind("今年は<b>{year}</b>年です{face}", 
      {year: new Date().getFullYear(), face: "(^o^)"}
    );

これを実行すると、文字列

今年は<b>2014</b>年です(^o^)

が得られます。あとはinnerHTMLなどで表示すればOKです。

製作過程で学んだこと

  • JSONのキーの数の取得方法*1
    • Object.keys(JSON)を用いる。