JavaScriptで動くテンプレートエンジン:JSmarty
2006年08月01日-
スポンサード リンク
Thousand Years - JSmartyとは?
JSmartyはJavaScriptで動くテンプレートエンジンです。PHPにSmartyっていうテンプレートエンジンがあります。それのぶっちゃけいってクローン(完全ではないですが…)になります。なので利用するメソッドやプロパティととかもそんままでSmartyのテンプレートがそんまま利用できます(たぶん)あと当然ながらプラグインとかも対応しています。
JavaScriptで動くテンプレートエンジン、JSmarty。
次のような使い方で、Smartyとほぼ同様に動作するそうです。
■テンプレート'foo.tpl' {$foo} ■コード var render = new JSmarty; render.assign('foo','Hello World!!'); render.display('foo.tpl'); ■結果 Hello World!!
これは、JavaScript で、動的にHTML部品を作ってインタフェースを構築する際に便利そうです。
JSmartyのような仕組みを使わない場合、動的にHTML部品を作ってインタフェースを構築するには次の方法があります。
・document.createElement とかで要素を動的作成&追加していく方法
・innerHTMLで直接HTMLを入れ込んでしまう方法
document.createElementの場合はソースは綺麗になりますが、HTMLの変更が容易ではなかったり、後々分かりにくいコードになってしまいます。
innerHTMLで直接div等に入れこんでしまう場合もコードとHTMLが混在してしまって分かりにくいソースになりがちです。
小さなプログラムではこれらの方法も問題ないと思いますが、ある程度のコード量になってくると、PHP同様、こういったJSmartyのようなテンプレートエンジンを使った方が便利そうですね。
Smartyのようにテンプレートはテンプレートで分けておくことで規模が大きくなっても見栄えの変更は容易になり、ソースも綺麗に分かりやすくできそう。
どの程度使えるのか、試していませんが面白い試みだと思います。
関連の記事検索:JavaScript, smarty
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- CSSで太陽が差し込むようなアニメーション実装
- 可愛くアニメーションする「beautifully crafted animated icons」
- アイソメトリックなアイコンがアイコンがPNG,SVGでゲットできる「Isoicons」
- ユニークなカタカナフォントtorisippo
- 美しいメッシュグラデーションをCSSで簡単に取得できる「MSHR」
- TailwindCSSなサイトで使える100以上のアニメーションエフェクト「animata」
- SVG形式のテック系企業のロゴを簡単にゲットできる「Svgl」
- 統一感のある色味を一括生成できるツール「The good colors」
- くちばしフォント【商用可】
- 小説表紙などに使えそうな商用可なフォント「になロマン」
- 過去のエントリ