1

私は自分のアプリケーションで Twitter ブートストラップ ライブラリを使用しており、素晴らしい経験をしています。現在、オートコンプリート用にブートストラップ typeahad を実装しています。ここで、サーバーへの多くのリクエストを避けるために結果をキャッシュすることに問題があります。Web で調査を行っているときに、この lib https://github.com/twitter/typeahead.jsも twitter typeahead と呼ばれていることがわかりました。boottrap http://twitter.github.io/bootstrap/javascript.html#typeaheadのものとは大きく異なるようです。私が間違っている？

最初のオプションは意図したものに最も適しているようですが、次の質問があります。

  • プリフェッチの使用方法 これは既存のjsonファイルである必要がありますか、それともページロード時のサーバーへの最初のリクエストである可能性がありますか?

    プリフェッチとリモートを使用する実際の例はありますか?

参考までに：これは、twitter boottrap typeahead を使用した実際のコードです (twitter typeahead ではありません)。

$searchbox.typeahead(
      {
          minLength: 2,
          source: function (query, process) {
              $SearchID.val('');
              persons = [];
              map = {};
              $.getJSON("App_Services/MyService.svc/GetData", { max: 100, criteria: query }, function (data) {
 
                  $.each(data, function (i, person) {
                      map[person.name] = person;

                      persons.push(person.name);
                  });
                  process(persons);
              });

          },
          updater: function (item) {
              selected = map[item].id;
              //alert(selected)
              return item;
          },
          matcher: function (item) {
              if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
                  return true;
              }
          },
          sorter: function (items) {
              return items.sort();
          },
          highlighter: function (item) {
              var regex = new RegExp('(' + this.query + ')', 'gi');
              return '<div>' + item.replace(regex, "<strong>$1</strong>") + '</div>';
          }
      })

明確にするために。私がやろうとしているのは、結果のキャッシュを作成し、キャッシュに一致が見つからない場合はサーバーのみを使用することです。

4

2 に答える 2

4 
window.query_cache = {};
$searchbox.typeahead({
    minLength: 2,
    source: function(query, process) {
        if (query_cache[query]) {
            process(query_cache[query]); //If cached, use it !
            return;
        }
        $SearchID.val('');
        persons = [];
        map = {};
        $.getJSON("App_Services/MyService.svc/GetData", {
            max: 100,
            criteria: query
        }, function(data) {
            $.each(data, function(i, person) {
                map[person.name] = person;
                persons.push(person.name);
            });
            query_cache[query] = persons; //Add it if it doesn't exist.
            process(persons);
        });
    },
    updater: function(item) {
        selected = map[item].id;
        //alert(selected)
        return item;
    },
    matcher: function(item) {
        if (item.toLowerCase().indexOf(this.query.trim().toLowerCase()) != -1) {
            return true;
        }
    },
    sorter: function(items) {
        return items.sort();
    },
    highlighter: function(item) {
        var regex = new RegExp('(' + this.query + ')', 'gi');
        return '<div>' + item.replace(regex, "<strong>$1</strong>") + '</div>';
    }
})

このコードは何をしますか?

  1. グローバル変数を定義しますquery_cache。
  2. 次に、キャッシュされた結果を探します。存在する場合はそれを処理するため、サーバーに負荷がかかりません。
  3. キャッシュされていない場合は、キャッシュされるため、次回から使用できます。
  4. あなたの問題を解決します。
于 2014-02-06T12:41:58.823 に答える
0

あなたの場合、サーバーへの多くのリクエストを避けるために、サーバー側でjsonを出力するときにhttpヘッダーにキャッシュを追加する必要があります。

PHPでは、それが好きです：

$time = time();  
$interval = 3600 * 24 * 60; //cache for 60 days  
header('Last-Modified: '.gmdate('r',$time));  
header('Expires: '.gmdate('r',($time+$interval)));  
header('Cache-Control: max-age='.$interval);  
header('Content-type: application/json');
echo $json;
exit;

データベースへの多くのクエリを避けるために、memcache のようなものを使用して、頻繁にクエリの結果をキャッシュする必要があります。

于 2013-05-15T09:18:09.143 に答える