クライアントサイドJavaScriptでのビューの作り方4つ - id:anatooのブログ
追記: 指摘により、UIオブジェクト型を追加した(thx @kanreisa)。 クライアントサイドJavaScriptでのビューの作り方を大別すると、3つ4つある。 DOM操作型 テンプレートエンジン型 UIオブジェクト型 データバインディング型 ここでいうビューの作り方とは、有り体にいうとJavaScriptからどうやってDOM要素を生成したりするかどうか。イベントリスナーの登録とかも含む。 DOM操作型 昔ながらのやり方。jQueryとか使って直接DOM操作してビューを作る。 // 例えば、<div class='hoge'>fugafuga</div> みたいなDOMを表示する var myView = $("<div class='hoge'/>"); myView.text('fugafuga'); // body以下に挿入 $(body).append(myView); 長所
超簡単なテンプレートエンジンをJavaScriptで実装する。 - 設計と実装の狭間で。
話題としては、まぁ、何かどこにでも転がってる感じなのだろうけど、 余りに簡単に出来たので、自分用にメモ書き。 function emit(template,map) { return template.replace(/\$\{[^\$\{\}]*\}/g,function(key) { var v = map[key.substring(2,key.length-1)]; return v ? v : ''; }); } 使い方はこんな感じ。 ${パラメータ名}がプレースフォルダになっていて、 そのパラメータ名で、二番目の引数のmapから値を取り出して置換する。 var tmplt = "<div>hoge ${hoge} ${fuga}</div>"; var newone = emit(tmplt,parseParams()); console.log(newone); f
[Javascript]Javascriptでテンプレートエンジンを作ってみた - 考え得る最高を常に行う
前回のエントリがブックマークしてくれた人が多かったので嬉しくなって作ってみました。 テンプレートエンジンはAjaxPagesを前は使ってましたが、サーバのレスポンスが悪いとテンプレートをロードする前に表示しようとしてエラったので、自分好みのテンプレートエンジンを作りました。 特徴 Javascriptでテンプレートが使える 外部ファイルが使える(タイムアウトも設定できる。) 文字列をテンプレートとして使える JSPっぽい書き方が出来る テンプレートが展開された内容が確認できる！デバック簡単！(かもしれない) ライセンスがMITで使い放題 サンプルとダウンロード jsTemplate 使い方 jsTemplate('sample01.jshtml') // 読み込み エラーがあれば通知 .load(function(e){ alert('error '+e); }) // レンダリング .r
![[Javascript]Javascriptでテンプレートエンジンを作ってみた - 考え得る最高を常に行う](https://cdn-ak-scissors.b.st-hatena.com/image/square/39dc785a2059b522e9709c6db5ace08d9d21b859/height=288;version=1;width=512/https%3A%2F%2Fogimage.blog.st-hatena.com%2F17680117127091821896%2F17680117127091826576%2F1556526071)
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
『C++テンプレートテクニック』もうすぐ発売です。 - Faith and Brave - C++で遊ぼう
Velocity-TECHSCORE-
