オンラインストアを開発するとき、プロジェクトごとに繰り返されるいくつかのことを行うために、javascript（より具体的にはそのフレームワークであるjQuery）を使用する必要がありました。 たとえば、バスケットへの商品の追加、ページ上の商品の数量と合計金額に関する情報の更新、バスケットから商品を1つずつ削除し、数量を変更して、バスケットからすべての商品を完全にクリアします。 そしてもちろん、ページをリロードせずにこれらすべてを行います。
そして、将来のプロジェクトで簡単に使用できるようにコードを書く必要があるという結論に達しました。
そのため、jQueryを使用してオンラインストアのバスケットを操作するためのモジュールを作成しています。
JavaScriptコードのみを公開することを予約します。サーバーの部分には触れず、クライアントとサーバーが交換するデータを指定します。
メソッドを決定します。
(function($) { $.Cart = { init : function(settings){
初期化：
初期化で何をする必要がありますか？
initメソッドに渡される設定は、適切に処理され（デフォルトのパラメーターと組み合わせて）、適用される必要があります。また、設定で設定された対応するイベントハンドラーが要素でハングする必要があります。
デフォルト設定を決定します。
var defaults = { content : '.content',
初期化中に指定されたパラメーターをデフォルトのパラメーターと混合して適用します
$.extend(defaults, settings); this.settings = defaults;
バスケット内の製品の数と合計金額に関する情報でブロックを更新し、指定された要素にイベントハンドラーをハングアップし、オブジェクトのエンティティを返します（便利な場合があります）。
this.get();
1個のアイテムをバスケットに1個追加します。
addメソッドは、コンテキストパラメーター（クリックされた要素）を取得し、サーバーにデータを送信します。
$.ajax({ url : $.Cart.settings.urladd,
バスケット内の製品数と合計金額に関する情報を取得し、ブロックを更新します（getメソッド）。
getメソッドとaddの違いは、データの送信先のURLとパラメーターにあります（getメソッドはパラメーターを渡しません）。
$.ajax({ url : $.Cart.settings.urlget, type : 'post', dataType: 'json', data : {}, success : function(data){ if (data.count && data.summ || data.count===0 && data.summ===0) { $($.Cart.settings.count).html(data.count); $($.Cart.settings.summ).html(data.summ); if (data.count>0) $($.Cart.settings.topcart).find('a').attr('href', $.Cart.settings.urlcart); else $($.Cart.settings.topcart).find('a').attr('href', 'javascript:void(0);'); } });
コードを再利用するために、urlとvars（パラメーター）が渡されるupdateCartメソッドを追加できると思います。
$.ajax({ url : data.url, type : 'post', dataType: 'json', data : data.vars, success : function(data){ if (data.count && data.summ || data.count===0 && data.summ===0) { $($.Cart.settings.count).html(data.count); $($.Cart.settings.summ).html(data.summ); if (data.count>0) $($.Cart.settings.topcart).find('a').attr('href', $.Cart.settings.urlcart); else $($.Cart.settings.topcart).find('a').attr('href', 'javascript:void(0);'); $.Cart.showMessage('<p>'+data.message+'</p>'+$($.Cart.settings.topcart).html()); } }, error : function(err) { if (err.status!==200) console.log(err.status+' '+err.statusText); } });
次に、addメソッドがこれに変更されます。
$.Cart.updateCart({ url : $.Cart.settings.urladd, data : {id : $(context).attr($.Cart.settings.addattr)} });
Getメソッド
$.Cart.updateCart({ url : $.Cart.settings.urlget, data : {} });
そのアイテムに対応するフィールドのフォーカスが失われた場合の、1つのアイテムの商品の数量の変化。
count : function(context) {
名前を削除します。
del : function(context) {
バスケットを空にします。
clear : function() { $.post($.Cart.settings.urlclear, {}, function(data){ $($.Cart.settings.content).html(data);
バスケットへの製品の追加に関するメッセージ（アラートまたはフラッシュのタイプに応じて）。
showMessage : function(message) {
今、私たちはすべてを統合します。
ここでは、モジュールの例を見ることができます、
ここでアーカイブにダウンロードできます 。
モジュールが追加および修正されます。
ご清聴ありがとうございました。 批判、質問、コメントを楽しみにしています。
オンラインストアで作業するために、これを特定のAPIに改良したいという要望があります。