JavaScriptの複数行とテンプレート？

あなたはPHPのような言語で行うことができますようにJavaScriptで複数行の文字列を定義する方法がある場合、私は疑問に思ってきた：JavaScriptの複数行とテンプレート？

var str = "here 
goes 
another 
line";

どうやらこれはパーサを壊します。

var str = "here\ 
goes\ 
another\ 
line";

または私はちょうど近いと何度も何度も、文字列の引用符を再度開くことができます：私は、改行の前にバックスラッシュ\を配置しても問題が解決していることが分かりました。

私は、JavaScriptで書かれたHTMLテンプレートを利用したJavaScriptベースのUIウィジェットを作っているので、私が尋ねている理由です。常に引用符を開いたり閉じたりする必要がある場合は、文字列にHTMLを入力するのは面倒です。 JavaScript内でHTMLテンプレートを定義するにはどうすればよいでしょうか？

すべてを簡単にするために別々のHTMLファイルとコンパイルシステムを使用することを検討していますが、ライブラリは他の開発者に配布され、HTMLテンプレートを開発者に簡単に組み込む必要があります。

出典

2011-01-06 Tower

これは基本的に、複数行の文字列を処理するために必要な作業です。

しかし、なぜJavaScriptはあくまでもJavaで定義していますか？なぜそれらをファイルに入れて、必要なときに変数にロードするajax呼び出しを持っているのですか？ instantceについては

（jqueryのを使用して）

$.get('/path/to/template.html', function(data) { 
    alert(data); //will alert the template code 
});

出典

2011-01-06 15:06:17

テンプレートごとにXHRを実行するには時間がかかりますか？それとも他の提案を回避する方法がありますか？ – Tower

テンプレートが膨大で、サーバーが極端に遅くならない限り、時間は無視してください（500ms〜2秒が標準であるはずです）。テンプレートを取得した後は、必要なときに使用できるように、テンプレートをjavascript変数に格納するだけです。 –

@rファクタ：この問題を回避する方法については私の答えを見てください。 – slebetman

いくつかのテンプレートシステムはJavaScriptであります。しかし、私の個人的な好みは、XMLテンプレートをフェッチするためにajaxを使って自分自身で開発したものです。

<title>This is optional</title> 
<body><![CDATA[ 
    HTML content goes here, the CDATA block prevents XML errors 
    when using non-xhtml html. 

    <div id="more"> 
     $CONTENT$ may be substituted using replace() before being 
     inserted into $DOCUMENT$. 
    </div> 
]]></body> 
<script><![CDATA[ 
    /* javascript code to be evaled after template 
    * is inserted into document. This is to get around 
    * the fact that this templating system does not 
    * have its own turing complete programming language. 
    * Here's an example use: 
    */ 
    if ($HIDE_MORE$) { 
     document.getElementById('more').display = 'none'; 
    } 
]]></script>

、テンプレートを処理するJavaScriptコードはこのような何か行く：道へ

function insertTemplate (url_to_template, insertion_point, substitutions) { 
    // Ajax call depends on the library you're using, this is my own style: 
    ajax(url_to_template, function (request) { 
    var xml = request.responseXML; 
    var title = xml.getElementsByTagName('title'); 
    if (title) { 
     insertion_point.innerHTML += substitute_strings(title[0],substitutions); 
    } 
    var body = xml.getElementsByTagName('body'); 
    if (body) { 
     insertion_point.innerHTML += substitute_strings(body[0],substitutions); 
    } 
    var script = xml.getElementsByTagName('script'); 
    if (script) { 
     eval(substitute_strings(script[0],substitutions)); 
    } 
    }); 
} 

function substitute_strings (str, substitutions) { 
    for (var n in substitutions) { 
    str.replace(n,substitutions[n]); 
    } 
    return str; 
}

をテンプレートには、きれいにHTMLを埋め込むことが容易になり、それは次のようになりますXMLファイルですテンプレートを呼び出すと、次のようになります。

insertTemplate('http://path.to.my.template', myDiv, { 
    '$CONTENT$' : "The template's content", 
    '$DOCUMENT$' : "the document", 
    '$HIDE_MORE$' : 0 
});

置換文字列の$記号は、あなたがの%を使用することができ、単なる慣習です#または任意の区切り文字を使用してください。置換される部分をあいまいにすることはちょうどそこにあります。

テンプレートのサーバー側の処理ではなく、JavaScript側で置換を使用する大きな利点の1つは、テンプレートをプレーンな静的ファイルにすることができることです。サーバー側のコードを記述しなくて済むことを除けば、テンプレートのキャッシュポリシーを非常に積極的に設定できるため、ブラウザで最初に読み込んだときにブラウザでテンプレートを取得するだけで済みます。その後のテンプレートの使用はキャッシュから来て、非常に高速になります。

また、これはメカニズムを説明するための実装の非常に簡単な例です。私が使っているものではありません。これをさらに修正して、複数の置換、スクリプトブロックの処理の改善、返された最初の要素を使うだけでなく、forループを使用して複数のコンテンツブロックを処理したり、HTMLエンティティを適切に処理したりすることができます。

このように、HTMLはプレーンテキストファイルのHTMLだけです。これにより、HTML文字列をjavascriptに直接埋め込むと、通常は見つかる恐れのあるひどい文字列連結パフォーマンスの問題が回避されます。

出典

2011-01-06 15:22:23 slebetman

私が好きな解決策を見つけたと思う。

テンプレートをファイルに保存し、AJAXを使用してそれらをフェッチします。これは開発段階でのみ有効です。生産段階では、ソースファイルを含むすべてのテンプレートをコンパイルするコンパイラを一度実行する必要があります。また、JavaScriptとCSSをコンパクトにコンパイルし、1つのファイルにコンパイルします。

今最大の問題は、他の開発者にそれを教える方法です。なぜ、何をしているのかを理解し理解するのが簡単なように、私はそれを構築する必要があります。

出典

2011-01-08 11:56:01 Tower

\ nを使って改行を生成することもできます。しかし、htmlは1行になり、編集が難しくなります。しかし、PHPを使用してJSを生成したり、何かがある可能性があります。

出典

2011-01-08 12:05:51 Gerben

@slebetman、詳細な例をありがとう。 substitute_strings関数のクイックコメント。は、私はそれを動作させるために

str = str.replace(n,substitutions[n]);

する

str.replace(n,substitutions[n]);

を改正しなければなりませんでした。私は私のテンプレートの状況下に持っていたとき - （？。jQueryのバージョン1.5が、それはしかし、純粋なjavascriptのです）

はまた：

$CONTENT$ repeated twice $CONTENT$ like this

私はそれを動作させるために追加の処理をしなければなりませんでした。

str = str.replace(new RegExp(n, 'g'), substitutions[n]);

そして私は、区切り文字として$（正規表現の特殊文字）を控えなければならなかったし、代わりに#を使用。私の知見を共有します。

出典

2012-01-22 08:41:20 ssk

JavaScriptの複数行とテンプレート？

答えて

関連する問題