1

残念ながら、私のプロジェクトでは、次のような JavaScript で多くの HTML コードを生成します。

var html = new StringBuffer();
html.append("<td class=\"gr-my-deals\"><a href=\"").append(deal.url).append("\" target=\"_blank\">").append(deal.description).append("</a></td>");

これについて 2 つの具体的な不満があります。

  1. HTML 文字列内でのエスケープされた二重引用符 (\”) の使用。読みやすくするために、これらを一重引用符 (') に置き換える必要があります。
  2. JavaScript 文字列連結演算子「+」の代わりに .append() を使用</li>

これらの両方の提案を適用すると、次の同等のコード行が生成されます。これは、はるかに読みやすいと思います。

var html = "<td class=’gr-my-deals’&gt;<a href=’" + deal.url + "’ target=’_blank’&gt;" + deal.description + "</a></td>";

私は今、コードの最初の行を 2 行目に自動的に変換する方法を探しています。これまでに思いついたのは、すべての Javascript コードに対して次の検索と置換を実行することだけです。

Find:    ).append(  
Replace: +

これにより、上記のコード行が次のように変換されます。

html.append("<td class=\"gr-my-deals\"><a href=\"" + deal.url + "\" target=\"_blank\">" + deal.description + "</a></td>)";

これにより、最初の 'append()' ステートメント以外は安全に削除されます。残念ながら、エスケープされた二重引用符を単一引用符に自動的に変換する安全な方法は思いつきません。場合によっては、エスケープされた二重引用符を実際に使用する必要があるため、単純に検索/置換を行うことはできないことに注意してください。通常、これは、ネストされた JS を含む HTML を生成していて、その JS に文字列パラメーターが含まれている場合です。

function makeLink(stringParam) {

  var sb = new StringBuffer();
  sb.append("<a href=\"JavaScript:myFunc('" + stringParam + "');\">");
}

私の質問は（最終的に）次のとおりです。

  • 「append()」への呼び出しを「+」に安全に置き換えるより良い方法はありますか
  • エスケープされた二重引用符を単一引用符、正規表現に安全に置き換える方法はありますか?

乾杯、ドン

4

5 に答える 5

4

JavaScript テンプレート プロセッサへの切り替えを検討してください。それらは一般的にかなり軽量であり、コードの明快さを劇的に改善することができます... 再利用が多く、テンプレートをプリコンパイルするものを選択する場合は、パフォーマンスも向上します.

于 2008-10-29T16:05:00.627 に答える
2

これは、連結と醜い置換値を排除するのに役立つstringFormat関数です。

function stringFormat( str ) {

    for( i = 0; i < arguments.length; i++ ) {
        var r = new RegExp( '\\{' + ( i ) + '\\}','gm' );

        str = str.replace( r, arguments[ i + 1 ] );    
    }
    return str;
}

次のように使用します。

var htmlMask = "<td class=’gr-my-deals’&gt;<a href=’{0}’ target=’_blank’&gt;{1}</a></td>";

var x = stringFormat( htmlMask, deal.Url, deal.description );
于 2008-10-29T16:00:46.827 に答える
1

Shog9 が示すように、優れた JavaScript テンプレート エンジンがいくつかあります。これは、私のjQuery Simple Templatesの使用方法の例です。

var tmpl, vals, html;

tmpl  = '<td class="gr-my-deals">';
tmpl += '<a href="#{href}">#{text}</a>';
tmpl += '</td>';

vals  = {
    href : 'http://example.com/example',
    text : 'Click me!'
};

html  = $.tmpl(tmpl, vals);
于 2008-10-29T19:39:37.667 に答える
0

テンプレート？テンプレがダサい！コードを書く方法は次のとおりです。

TD({ "class" : "gr-my-deals" },
   A({ href : deal.url,
       target : "_blank"},
     deal.description ))

私は DOMination と呼ばれる 20 行のライブラリーを使用しています。このようなコードをサポートするために、このライブラリーを求める人には誰にでも送ります。

利点は多岐にわたりますが、最も明白なものは次のとおりです。

  • 読みやすく直感的なコード
  • 学びやすく、書きやすい
  • コンパクトなコード (閉じタグなし、閉じ括弧のみ)
  • JavaScript 対応のエディタ、ミニファイヤなどによってよく理解されている
  • いくつかのブラウザー固有の問題を解決します (IE での rowSpan と rowspan の違いなど)
  • CSSとうまく統合する

（あなたの例、ところで、DOMinationの唯一の欠点を強調しています。classこの場合、JavaScriptの予約語でもあるHTML属性は、悪いことが起こらないように引用する必要があります。）

于 2010-12-30T00:40:40.063 に答える
0

JavaScript で文字列連結の代わりに StringBuffer() を使用する必要があるのには十分な理由があります。StringBuffer() とその append() メソッドは、Array と Array の join() を使用して文字列を結合します。結合したい部分文字列がかなりの数ある場合、これがより高速な方法であることが知られています。

于 2008-10-30T00:55:29.977 に答える