Clever Geek Handbook

jQueryを使用したクライアント側の「仮想ストレージ」

場合によっては、Webアプリケーションのクライアント部分とサーバー部分の両方をロードすることはまったく意味がなく、不当です。 長く歩き回らないようにするために、人生の例を挙げましょう。 開発者からオンラインストアを1つ入手しました。このオンラインストアでは、バスケットが次のように運営されていました。 Cookieの[製品の追加]ボタンをクリックすると、製品IDとその数量が保存されます。 したがって、さまざまなページにアクセスしたときに、バスケットに何が入っているか、どれだけ、どれだけのデータがどれだけコストがかかるかをユーザーに示すために、サーバーアプリケーションは次の機能を実行する必要がありました。

  1. Cookieから製品IDのリストを取得します。
  2. 製品の名前、その値、およびその他の必要なデータが返されたデータベースへの要求。
  3. テンプレートエンジン（Smarty）を使用して、カートブロックを生成し、残りのコンテンツを生成します。


何もかもが何もないようです。 多くの人が同じようなスキームに何度も出くわしたと思います。 しかし、アプリケーションを最適化するという課題に直面し、データベースのクエリとカートブロックを生成することでサーバーからの余分な負荷を取り除くことにしました。 選択した製品に関するすべてのデータをクライアント側に保存したいと思います。 さらに、理想的には、選択した商品の配列だけでなく、バ​​スケットブロック用の既製のHTMLコード、およびチェックアウトページ用の商品のテーブルも保存したかったのです。 しかし、それを行う方法は？



クライアントリポジトリを使用したJavaScriptのクロスブラウザサポートを待つことができます。 また、少なくともCookieの行の長さが非常に制限されているため、このタスクにCookieを使用することは実用的ではありません。 次のソリューションをjQueryのプラグインとして提案し、サーバー側に少し追加します。



Javascript 




;(function($){ var self={ config: { //   ,        callback: function(){}, //    path: 'storage.php' }, current: { // ? first: true }, //   storage: {}, init: function(objects,config){ if(!self.current.first)return; self.current.first=false; //.  $.extend(self.config,config); //.  self.storage=objects; //.  self.get(); $(window).unload(self.set); $('iframe').unload(self.set); }, //  ext: function(objects){ for(var k in objects){ if(typeof(self.storage[k])=='undefined'){ self.storage[k]={}; }; // if(typeof(objects[k])=='object'){ $.extend(true,self.storage[k],objects[k]); } else { self.storage[k]=objects[k]; }; }; }, //    get: function(){ $.getJSON(self.config.path,function(data){ self.ext(data); self.config.callback(); }); }, //   set: function(){ $.ajax({ type: 'POST', url: self.config.path, data: { storage: JSON.stringify(self.storage) } }); } }; $.extend({ storage: self.init, storageUpdate: self.set }); })(jQuery);




PHP：storage.php 




 <? session_start(); if(isset($_POST['storage'])){ $_SESSION['storage']=$_POST['storage']; } elseif(isset($_SESSION['storage'])){ echo $_SESSION['storage']; } ?>




したがって、サーバーを間接的に使用するクライアント側のデータの仮想ストレージがあります。 これを実際にどのように適用できますか？ 



 var a={i:0}; $(function(){ $.storage({storageA:a},{ callback: function(){ a.i++; alert('    '+a.i+'- .'); } }); });




つまり、データストレージスキームはアプリケーション開発者にとって完全に透過的であり、データをどのような形式でどのように格納するかについて心配する必要はありません。 この場合、オブジェクトaのすべてのデータは、別のページに移動する前にストレージに保存されます。 そして、別のページを開いた直後に、データがオブジェクトaに入力されます。



PS多くの人は、アプリケーションのサーバー部分を最適化し、セッションにデータをすぐに保存し、ページを生成するときにすぐに同じオブジェクトをクライアントに渡すことができる場合、そのような複雑さを叫ぶことができます（多くのオプションがあります）。 答えがあります。 ほぼすべての動的ページが静的HTMLビューの一時サーバーキャッシュに保存されるアプリケーションを最適化する道を進んだと想像してみましょう。 ところで、この方法でより重要なデータを保存する必要がある場合、このスキームは、Cookieを使用したハッシュ保護で「塩漬け」できます。


More articles:


All Articles