javascript - 効率的な Javascript 文字列の置換

Question

こんにちは、HTML のブロックがあります。これを繰り返し使用します (一度にではなく、ユーザーの訪問中のさまざまな時点で)。これを達成する最善の方法は、HTML div を作成して非表示にし、必要に応じてその innerHTML を取得して、いくつかのキーワードで replace() を実行することだと思います。HTMLブロックの例として...

<div id='sample'>
  <h4>%TITLE%</h4>
  <p>Text text %KEYWORD% text</p>
  <p>%CONTENT%</p>
  <img src="images/%ID%/1.jpg" />
</div>

これらのキーワードを動的データに置き換える最善の方法は...

template = document.getElementById('sample');
template = template.replace(/%TITLE%/, some_var_with_title);
template = template.replace(/%KEYWORD%/, some_var_with_keyword);
template = template.replace(/%CONTENT%/, some_var_with_content);
template = template.replace(/%ID%/, some_var_with_id);

これを行うために愚かな方法を選択したように感じます。これをより速く、よりスマートに、またはより良い方法で行う方法について、誰か提案はありますか? このコードは、ユーザーの訪問中にかなり頻繁に実行され、3 ～ 4 秒に 1 回実行されることもあります。

前もって感謝します。

score 14 · Accepted Answer

これ以上効率的なものはないと思います。別の方法は、それを部分に分割してから連結することですが、それはあまり効率的ではないと思います。すべての連結の結果、そのオペランドと同じサイズの新しい文字列が生成されることを考えると、おそらくさらに少ないでしょう。

追加:これはおそらく最もエレガントな書き方です。その上、あなたは何を心配していますか？メモリ使用量？それは豊富で、Javascript には適切なメモリマネージャーがあります。実行速度？次に、巨大な文字列が必要です。私見これは良いです。

score 2 · Accepted Answer

あなたの方法は貧乏人のテンプレートシステムを実装するための標準的な方法なので、問題ありません。

JSTなどの JavaScript テンプレートライブラリを確認してみる価値はあります。

score 1 · Accepted Answer

Prototypeライブラリを使用する場合は、テンプレート機能が組み込まれています。

それは次のようになります：

element.innerHTML = (new Template(element.innerHTML)).evaluate({
    title: 'a title',
    keyword: 'some keyword',
    content: 'A bunch of content',
    id: 'id here'
})

これは、JSONオブジェクト/ Javascriptオブジェクトリテラルの作成が簡単なため、コードをループで実行している場合に特に便利です。

それでも、速度の向上は期待できません。

#{keyword}また、区切り文字のスタイルをではなくに変更する必要があります%keyword%

score 1 · Accepted Answer

これらすべての暫定的な割り当てを行う代わりに、置換を連鎖させることで、より効率的にすることができます。

すなわち

with(document.getElementById('sample'))
{
  innerHTML = innerHTML.replace(a, A).replace(b, B).replace(c, C); //etc
}

score 0 · Accepted Answer

Mustachejs は、非常にエレガントなテンプレート作成に最適です。

<div id='sample'>
  <h4>{{TITLE}}</h4>
  <p>Text text {{KEYWORD}} text</p>
  <p>{{CONTENT}}</p>
  <img src="images/{{ID}}/1.jpg" />
</div>

その後、次のようなテンプレートを使用できます。

var template = document.getElementById(templateid).innerHTML;
var newHtml = Mustache.render(template, {
    TITLE: some_var_with_title,
    KEYWORD: some_var_with_keyword,
    CONTENT: some_var_with_content,
    ID: some_var_with_id
});
document.getElementById('sample').innerHTML = newHtml;

これは、JSON を Ajax 呼び出しから取得する場合に特にうまく機能します。JSON を直接Mustache.render()呼び出しに渡すことができます。

わずかなバリエーションにより、各ブラウザーまたはサーバーで同じテンプレートを実行できます。詳細については、 https://github.com/janl/mustache.jsを参照してください。

score -2 · Accepted Answer

var template = "<div id='sample'><h4>%VAR%</h4><p>Text text %VAR% text</p><p>%VAR%</p><img src="images/%VAR%/1.jpg" /></div>";

var replace = function(temp,replace){
temp = temp.split('%VAR%');
for(var i in replace){
          if(typeof temp[i] != 'undefined'){
            temp[i] = temp[i] + replace[i];
          }
        }
   return temp.join('');
}

replace(template,['title','keyword','content','id'])

javascript - 効率的な Javascript 文字列の置換

11 に答える 11

Related

Reference