そして、将来のプロジェクトで簡単に使用できるようにコードを書く必要があるという結論に達しました。
そのため、jQueryを使用してオンラインストアのバスケットを操作するためのモジュールを作成しています。
JavaScriptコードのみを公開することを予約します。サーバーの部分には触れず、クライアントとサーバーが交換するデータを指定します。
メソッドを決定します。
(function($) { $.Cart = { init : function(settings){ // }, add : function(context){ // 1. }, get : function(){ // }, count : function(context) { // }, del : function(context) { // }, clear : function() { // }, showMessage : function(message) { // } } })(jQuery);
初期化：
初期化で何をする必要がありますか？
initメソッドに渡される設定は、適切に処理され（デフォルトのパラメーターと組み合わせて）、適用される必要があります。また、設定で設定された対応するイベントハンドラーが要素でハングする必要があります。
デフォルト設定を決定します。
var defaults = { content : '.content', // count : '.prod span font', // .prod summ : '.summ span font', // .prod add : '.tocart', // , addattr : 'name', // , ID counta : '.carts .actions .count input', // countattr : 'name', // , ID countvattr : 'value', // , del : '.carts .actions .delete input', // , 1 delattr : 'name', // , ID clear : '.cartclear', // , topcart : '.topcart', // urladd : '/cart/add/', // url urlget : '/cart/get/', // url urlcart : '/cart/', // url urlcount : '/cart/count/', // url urlclear : '/cart/clear/', // url urldel : '/cart/del/', // url type_message : 'flash', // time_message : 3000, // interval : 10000 // , };
初期化中に指定されたパラメーターをデフォルトのパラメーターと混合して適用します
$.extend(defaults, settings); this.settings = defaults;
バスケット内の製品の数と合計金額に関する情報でブロックを更新し、指定された要素にイベントハンドラーをハングアップし、オブジェクトのエンティティを返します（便利な場合があります）。
this.get(); // setInterval(function(){ $.Cart.get(); // }, this.settings.interval); $(this.settings.add).click(function(){ $.Cart.add(this); // settings.add, }); $(this.settings.counta).live('blur', function(){ $.Cart.count(this); // , , }); $(this.settings.del).live('click', function(){ $.Cart.del(this); // "" }); $(this.settings.clear).live('click', function(){ $.Cart.clear(); // }); return this;
1個のアイテムをバスケットに1個追加します。
addメソッドは、コンテキストパラメーター（クリックされた要素）を取得し、サーバーにデータを送信します。
$.ajax({ url : $.Cart.settings.urladd, // type : 'post', // dataType: 'json', // , data : {id : $(context).attr($.Cart.settings.addattr)}, // , (id ) 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()); // } });
バスケット内の製品数と合計金額に関する情報を取得し、ブロックを更新します（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) { // count context ( - ) $.post($.Cart.settings.urlcount, { // url id : $(context).attr($.Cart.settings.countattr), // ID count : $(context).attr($.Cart.settings.countvattr) // }, function(data){ // (text/html) $($.Cart.settings.content).html(data); // $.Cart.get(); // }); },
名前を削除します。
del : function(context) { // del context ( - ) $.post($.Cart.settings.urldel, { // id : $(context).attr($.Cart.settings.delattr) // ID }, function(data){ // (text/html) $($.Cart.settings.content).html(data); // $.Cart.get(); // }); },
バスケットを空にします。
clear : function() { $.post($.Cart.settings.urlclear, {}, function(data){ $($.Cart.settings.content).html(data); // data , $.Cart.get(); // , }); },
バスケットへの製品の追加に関するメッセージ（アラートまたはフラッシュのタイプに応じて）。
showMessage : function(message) { // if ($.Cart.settings.type_message==='alert') { // alert alert(message); // return; } else if ($.Cart.settings.type_message==='flash') { // flash if ($('.flashmessage').length===0) // , $('<div />').addClass('flashmessage').html(message).hide().appendTo('body').fadeIn(); // , , </body>, else // $('.flashmessage').html(message); // if (typeof($.Cart.message_time)==='number') // clearTimeout($.Cart.message_time); // $.Cart.message_time = setTimeout(function(){ // $('.flashmessage').fadeOut(function(){ // $(this).remove(); // }); }, $.Cart.settings.time_message); // } }
今、私たちはすべてを統合します。
ここでは、モジュールの例を見ることができます、
ここでアーカイブにダウンロードできます 。
モジュールが追加および修正されます。
ご清聴ありがとうございました。 批判、質問、コメントを楽しみにしています。
オンラインストアで作業するために、これを特定のAPIに改良したいという要望があります。