これで良いスタックオーバーフロースレッドを見つけることができませんでした。ウェブアプリケーションで「ページ」や画面を動的にロードするための最良のアプローチ
Webアプリケーションのページを動的に読み込むためのさまざまなアプローチや方法は何ですか？
あなたのWebアプリケーションが電話アプリケーションのようなものであることを想像してみましょう。ログイン画面、詳細画面、設定画面など、さまざまな画面があります。適切な時間？ 各ページのhtmlを別々のファイルに定義し、ユーザーがそのページにナビゲートした後にその特定のファイルをロードしたいとします。私は実際のブラウザのナビゲーションをしたくないですが、コンテンツを交換するだけです。
ご意見やご提案はありますか？
javascriptが遅延ロードのいくつかの並べ替えをお探しですか？
通常、特定のリソース名を相対パスで登録するマップが構築されていると思います。たとえば、
これは、必要に応じてキーと実際のパス値の間の相関関係を維持しようとすることでさらに多くのステップを実行できます。 （ボタンクリックなど）あなたのナビゲーションイベントに続い
showPage = function (resource, targetPane) {
if(resourceMap[resource].cachedResponse)
targetPane.innerHTML = resourceMap[resource].cachedResponse;
else {
xhrRequest({
url:resourcemap[resource],
xhrComplete:function (result) {
resourcemap[resource].cachedResponse = result;
targetPane.innerHTML = result;
}
});
}
}
：最後に
、あなたは（擬似コード）のようなものをやっていると思います
のContentElementがあなたのターゲットであるshowPage("settings",contentElement);
戻り値のHTMLで塗りつぶすdomElement。
これは、存在しない場合はhtmlページを取得し、以前にフェッチされている場合はクライアントのローカルコピーを使用します。さらに、現代のブラウザ用に書いていると仮定すると、ブラウザのローカルストレージを使用することができます。 resourcemapについての注意点として
：
あなたはリソースを名前空間場合、正しく、あなたは暗黙的にHTMLを取得するために必要なURLを知ることができます。 Dojoのツールキットには、これの良い例があります。同様の方法で名前空間を設定すると、アプリケーションのディレクトリ構造を使用して、オブジェクトの手動更新とは異なり、ロードパスを提供できるため、いくつかの問題を軽減できます。たとえば、/contextroot/homepage/home.htmlにページをロードする場合は、手動で管理されている次のような値ではなく、contextroot.homepage.home.htmlに対してフェッチを呼び出すだけです。
これはまさに私が探していたものです。私は他の人々がそれをやっているのかどうか不思議だっただけです（innerHTMLを設定するだけでなく）。 また、新しいスクリプトでもさまざまなスクリプトの参照を捨てるだけですか？私はメモリを節約するために他のスクリプトを「アンロード」する方法、あるいはそれが実現可能ではないと思いますか？名前空間についての詳細は？ HTMLだけの場合は、どのように名前空間を指定して管理しましたか？ – Steve
私はバックボーンや背骨のようなjavascriptのmvcフレームワークと、口髭や純粋なようなJavaScriptのテンプレートエンジンを使用したいと思います。現代のブラウザでは、履歴APIを使用して別の画面でURLを変更できます。
HTMLのアプローチ：
各ページには、単一のHTMLファイルです。 HTTP GETリクエストを送信してそのページに移動すると、サーバーはページを返し、ブラウザはそのページをレンダリングします。
AJAXビュー：
各ページの選択の単なるビュー（EJSを試してみてください）で、あなたは、単一のページを持っており、どちらかのURLの変更を検出するために、#! URLを使用するか、HTML5履歴ページを使用します。 URLが変更されると、サーバーにajax GETリクエストを送信してビューファイルを表示し、javascriptを使用してページをレンダリングします。
簡単な例は、HTML5ページ変更イベントへの結合と非同期EJSビューをレンダリングすることになるのWebSocketの道を
を（これはAJAXオーバービューファイルを取得し、Ajaxのリクエスト復帰したあとはDOMでそれをレンダリングする必要） ：
SocketStreamのようなフレームワークを使用すると、TCPソケットを開く1つの空のランディングページがあり、サーバーはすべてのHTML/CSSを単一のパッケージ/ gzippedファイルとしてストリームに送信します。クライアント側のjavascriptはHTMLをレンダリングします。
イベントが発生すると、必要なデータがあればTCPストリームの下にメッセージを送信し、それを表示するにはjavascriptを使用します。
websocketアプローチの美しさは、アプリケーションの開始時にアプリケーション全体HTML/CSS/JS/Images/Staticコンテンツをロードし、すべての静的コンテンツがキャッシュされた後にのみTCP要求でデータを要求することです。
私は間違いなくAJAXのやり方をしています。実際の計画では、すべてのクライアント側と、生のhtmlを提供するためのダミーのサーバーを用意しています。あなたは「ビューを提供してページに追加する」部分をどのようにしますか？あなたは本当にコンテンツをXHRして、それをDOMに置くためにHTMLの文字列を評価していますか？ – Steve
私はStackOverflowで同様の質問に答えました。これは非常に詳細なので、ここでは再投稿しません。しかし、私はそれがあなたの質問に完全に答えると思います。
Help learning from pivotaltracker's javascript, looking for a high level breakdown
説明したことは、HTMLベースのWebの基本的な運用モデルのように思えます。 – Pointy
シリアル化された「ページ」を「クライアント」から「サーバー」に転送するための「パケット」を取得する方法を誰かが記述することができれば、いいでしょう。 – hspain
どのように？私は実際にブラウザのナビゲーションをしたくない - ちょうどコンテンツを交換したい。 – Steve