5

ハッシュを変更し、ページのコンテンツのみを読み込んで変更する単一ページ アプリでは、各「ページ」に必要な JavaScript を管理する方法を決定しようとしています。

のように見える場所のハッシュを監視する History モジュールdomain.com/#/company/aboutと、XHR を使用してコンテンツを取得し、コンテンツ領域に挿入する Page クラスを既に持っています。

function onHashChange(hash) {
    var skipCache = false;
    if(hash in noCacheList) {
        skipCache = true;
    } 
    new Page(hash, skipCache).insert();
}


// Page.js
var _pageCache = {};
function Page(url, skipCache) {

    if(!skipCache && (url in _pageCache)) {
        return _pageCache[url];
    }
    this.url = url;
    this.load();

}

キャッシュは、すでにロードされているページが XHR をスキップできるようにする必要があります。また、コンテンツを documentFragment に格納し、新しい を挿入するときに現在のコンテンツをドキュメントから引き出すPageので、ブラウザはフラグメントの DOM を 1 回だけ構築する必要があります。

ページに時間依存のデータがある場合は、キャッシュをスキップすることが望ましい場合があります。

決定するのに助けが必要なのは次のとおりです。ロードされるページには、ページを制御するための独自の JavaScript が含まれている可能性が非常に高いです。ページがタブを使用する場合、スライド ショーが必要な場合、ある種のアニメーションがある場合、Ajax フォームがある場合、または what-have-you がある場合などです。

その JavaScript をページにロードする最善の方法は何ですか? XHR から取得した documentFragment にスクリプト タグを含めますか? キャッシュをスキップして、フラグメントを再ダウンロードする必要がある場合はどうすればよいでしょうか。まったく同じ JavaScript が 2 回呼び出されると、同じ変数を再宣言するなど、競合が発生する可能性があると思います。

新しい をつかむときに、スクリプトを頭に添付する方が良いでしょうPageか? そのためには、元のページが、他のすべてのページが必要とする可能性のあるすべてのアセットを知っている必要があります。

そして、すべてを含める最善の方法を知っているだけでなく、メモリ管理や、非常に多くの異なる JavaScript ビットを 1 つのページ インスタンスにロードすることによるリークの可能性について心配する必要はありませんか?

4

7 に答える 7

1

私がケースを正しく理解していれば、現在、通常のナビゲーション用に作成されたページが既にあるサイトを取得しようとしていて、ページのリロードを節約するために ajax を介してそれらをプルダウンしたいですか?

次に、これが発生した場合、ページにまだ読み込まれていない場合を除き、それらのページのスクリプト タグを再読み込みする必要はありませんか?

その場合は、新しい html を dom に挿入する前に、ページからすべてのタグを取得することを試みることができます。

//first set up a cache of urls you already have loaded.
var loadedScripts = [];

//after user has triggered the ajax call, and you've received the text-response
function clearLoadedScripts(response){
   var womb = document.createElement('div');
   womb.innerHTML = response;
   var scripts = womb.getElementsByTagName('script');
   var script, i = scripts.length;
   while (i--) {
      script = scripts[i];
      if (loadedScripts.indexOf(script.src) !== -1) {
          script.parentNode.removeChild(script);
      }
      else {
          loadedScripts.push(script.src);
      }
   }

   //then do whatever you want with the contents.. something like:
   document.body.innerHTML = womb.getElementsByTagName('body')[0].innerHTML);

}
于 2010-05-20T04:15:15.100 に答える
1

ああ、あなたは運がいいですか。私は自分のプロジェクトのためにこのすべての調査を行いました。

1: 使用すべきハッシュ イベント/マネージャーは Ben Alman の BBQ です: http://benalman.com/projects/jquery-bbq-plugin/

2: 検索エンジンに気に入られるようにするには、次の非常に明確な一連のルールに従う必要があります: http://code.google.com/web/ajaxcrawling/docs/specification.html

私はこれとゲームを遅く見つけて、多くのコードを廃棄しなければなりませんでした。いくらか廃棄しなければならないように思えますが、結果としてより多くのものを得ることができます。

幸運を！

于 2010-06-07T05:14:54.337 に答える
0

YUI Loader、LAB.js、またはjafのような他のスクリプトローダーを使用できます

Jafは、ビュー（HTMLスニペット）とそれぞれのjs、cssファイルをロードしてシングルページアプリを作成するメカニズムを提供します。サンプルのtodoリストアプリをチェックしてください。完全ではありませんが、使用できる便利なライブラリはまだたくさんあります。

于 2010-06-05T06:59:19.287 に答える
0

私には、最初から単一ページのアプリを作成しているように思えます (つまり、既存のサイトをリファクタリングしていません)。

私が考えることができるいくつかのオプション：

  1. どのスクリプト タグを含めるかをサーバーに制御させます。すでにロードされているスクリプト タグのリストを XHR リクエストで渡し、ロードする必要がある追加のスクリプトをサーバーに分類させます。
  2. 事前にすべてのスクリプトをロードし(時間を節約するために、ページがロードされた後にスクリプトを DOM に追加することもできます)、その後は忘れてください。UI を初期化する必要があるスクリプトの場合は、要求された各ページ呼び出しに、ページ名でグローバル init 関数を呼び出すスクリプト タグを含めるだけです。
  3. 要求された各ページで、スクリプトの読み込み/キャッシュを処理する JS 関数を呼び出すようにします。この関数は、グローバル スコープからアクセスでき、次のようになります。require_scripts('page_1_init', 'form_code', 'login_code') 次に、関数に、ロードされたスクリプトのリストを保持させ、まだロードされていないスクリプトの DOM スクリプト タグのみを追加します。
于 2010-05-22T18:11:06.520 に答える
0

個人的には、生の HTML ではなく JSON を送信します。

{
    "title": "About",
    "requires": ["navigation", "maps"],
    "content": "<div id=…"
}

これにより、必要なスクリプトの配列などのメタデータをコンテンツとともに送信できます。<head>次に、上記のいずれかまたは独自のスクリプトローダーを使用して、ページをレンダリングする前に、既に読み込まれているものを確認し、読み込まれていないものをプルダウン ( に挿入) します。

ページ固有のロジックにインラインでスクリプトを含める代わりに、特別な処理が必要な要素に対して、あらかじめ決められたクラス、ID、および属性を使用します。「onrender」イベントを起動するか、ページが初めてレンダリングまたはロードされた後にページ ローダーが呼び出すオンレンダリング コールバックをロジックの各部分に登録させることができます。

于 2010-06-07T22:14:33.357 に答える
0

私はそのようなサイトを構築したことがないので、それがベスト プラクティスかどうかはわかりませんが、何らかの制御情報 (コメントや HTTP ヘッダーなど) を応答に入れ、ローダー スクリプトに冗長性/依存性を処理させます。スクリプトタグをチェックしてヘッダーに追加します。

于 2010-05-07T17:15:42.017 に答える
0

それらのページが読み込まれるのを制御できますか? そうでない場合は、ロードされたページを IFrame に挿入することをお勧めします。

ページ スクリプトをコンテキストから外して head に挿入したり、別の HTML 要素に追加したりすると、ページがどのように構築されているかを正確に把握していない限り、問題が発生する可能性があります。

ロードされるページを完全に制御できる場合は、すべての HTML を JS に変換することをお勧めします。奇妙に聞こえるかもしれませんが、実際には、HTML->JS コンバーターはそれほど遠くありません。Pure JavaScript HTML パーサーから始めて、パーサーに JS コードを出力させて、たとえば JQuery を使用して DOM を構築することができます。

私は実際に少し前に取り組み始めた Web アプリケーションでその道をたどろうとしていましたが、今ではすべての純粋な JS ページを HTML+JQuery に変換する請負業者に引き渡しました。私は気にしませんが、私はその純粋な JS webapp アプローチに本当に興味があり、間違いなく試してみます。

于 2010-05-07T18:13:04.850 に答える