backbone.js と require.js を使って簡単なアプリを作りました。以前は、index.html ファイルが 1 つだけあり、さまざまなビューを動的にレンダリング/非表示にしていました。今はrequire.jsを使用していますが、index.htmlファイルはまだありますが、アプリ内の4つのビューごとに個別のhtmlファイルを作成し、それらをすべてテンプレートフォルダーに配置しました。要点は、これら 4 つの html ファイルにはタグがなく、ビュー<!DOCTYPE html></html>のタグだけが<div>あるということです。
これがrequire.jsを使用して行う正しい方法かどうかはわかりません。すべての html コードを 1 つの index.html に統合し<script>、テンプレートにタグを使用する必要がありますか?
require.jsテンプレートを 1 つの大きな html ファイルにまとめるべきではありBackbone.jsません。必要な場合にのみ読み込まれる非常に柔軟なモジュールにすべてを含めるのに最適な組み合わせです。
少数のモジュールだけでは、その利点に気付かないかもしれませんが、私を信じてください。より複雑で動的に成長する高速 Web アプリケーションを作成すると、デバッグとリファクタリングの時間を節約でき、コードの読み取りと変更が非常に簡単になります。
テンプレートを変数にロードした場合など、Backbone でテンプレートを処理する方法はいくつかあります。this.$el.html( _.template(template, this.model.toJSON() ))template
速度には影響しません。テンプレートはわずか数キロバイトです。BB.jsあなたのページがモジュールやモジュールがなくても、すでに十数個のファイル (多くのアイコン、いくつかの画像、css-es、js-es) をロードしている可能性が高いという事実と比較するとRequire.js、新しい数キロバイトの大きなファイルは目立ちません。また、テンプレートをロードするために使用する場合、最初のロード後にテンプレートをキャッシュできRequire.jsます。
場合によります...
ほとんどの場合、それらはより整理され、維持しやすいため、それらを分離しますが、... それらが多すぎると (「タイル」と呼びましょう)、描画するためにサーバーを何度も移動するため、サイトが遅くなる可能性があります。このサイトで、ブラウザが同時に 4 つ以上のリクエスト HTTP を作成する必要がある場合、パフォーマンスが低下して罰せられることをどこかで読んだことがあります。ソースを見つけてここに投稿しようとします。
タイルが常に一緒にある場合は、すべてを単一の HTML に入れても問題ないと思います。そのため、単一の HTTP リクエストですべてを取得できますが、欠点は、単一のテンプレートを更新すると、クライアント側のすべてのキャッシュがキャッシュされることです。テンプレートは地獄に落ちます。
もう 1 つの解決策は、それらを別々のファイルにして、より整理し、ビルド ツールを使用して本番環境で使用する大きな縮小テンプレート ファイルを作成することですが、これには多少の作業が必要になります。
したがって、サイトに最適な方法を見つける必要があります。
PS: テンプレート メカニズムを使用していますか? このような状況では、それらが本当に役立つと思います。