JAvaScriptショッピングモールはショッピングカートの構想を実現する

5570 ワード

jquery javaScript

プロセス(1):ユーザは1つ1つの商品のチェックを行い,1つの店舗の下の商品が満タンになったらその店舗を選択し,そうでなければその店舗を選択しない.すべての店舗が満タンになったら、全選ボタンをマークして選択します.そうしないと、全選ボタンは選択しません.(2):ユーザは1店舗1店舗のチェックを行い,その場合はマークを選択して店舗下のすべての商品を選択し,逆に選択しない.すべての店舗が満タンになったら、全選ボタンをマークして選択します.そうしないと、全選ボタンは選択しません.(3):直接全選ボタンをチェックし、その場合はすべての商品と店舗を選択し、逆に選択しない.(4):以上の3の場合を任意に組み合わせる.
注意点:ユーザーがクリックするたびにカートの決済価格を再計算する必要があるため、今はサービス側とインタラクティブになります.
コアコンセプト:カスケード呼び出し、あるいは簡単な通知メカニズムを採用する例えば体験フロー(1)の場合、商品項目をチェックする際に判断することができ、その商品項目が属する店舗の下ですべての商品がチェックされた場合、ここで通知あるいは店舗ボタンをチェックする方法を呼び出す(注:ここでは単に店舗ボタンのスタイルを変えるのではなく、呼び出し方法を強調する).他の状況については、このように推定します.
コード構想:(1)ユーザ行動オブジェクト(UserAction,ユーザと対話するメソッド集合を単純に抽象化し,一般にクリックイベント),ページ行動オブジェクト(PageAction,ページUIを更新するメソッド集合),システム行動オブジェクト(SystemAction,ユーザとサービス側が対話するメソッド集合)
(2)カートの複雑さから,一つのツールオブジェクト(CHECKBOX_TOOL)を抽象化することを提案し,実現方法は以下のように提案した(具体的な状況に応じて調整できる).
//checkbox要素を取得する工場(カートリスト項目が削除される可能性があるため、使用するたびに再取得する必要があります)var CHECKBOX_TOOL={all:$("label[data-selected='all']),/**リアルタイムの店舗ボタンリストを取得(*@return{jQuery|HTML Element}*/store:function(){

    },
    /**
     *             (    )
     * @return {jQuery|HTMLElement}
     */
    goods: function () {

    },
      /**
     *      css   
     */
    checkedClzName: ""
};

/**
 *      
 * @param $checkbox     chexkbox  
 * @param caller    ，      undeifed   ，              
 **/
CHECKBOX_TOOL.isSelected = function ($checkbox, caller) {
    if (caller != undefined) {
        return caller.selected;
    }
    return TODO;
}

/**
 *        
 **/
CHECKBOX_TOOL.setSelected = function ($checkbox) {

}

/**
 *         
 **/
CHECKBOX_TOOL.setUnSelected = function ($checkbox) {

}

/**
 *       
 **/
CHECKBOX_TOOL.getStoreList = function () {
    return $("label[data-store]");
}

/**
 *            
 **/
CHECKBOX_TOOL.getStoreGoodsList = function ($checkBox) {

}


/**
 *           
 **/
CHECKBOX_TOOL.storeHasSelected = function ($checkBox) {

}

/**
 *           
 **/
CHECKBOX_TOOL.allButtonHasSelected = function () {

}
(3):UserAction実装リファレンス(コア構想:callまたはapplyメソッドを使用してthisオブジェクトを変更)://ユーザ動作オブジェクトvar UserAction={}

/**
 *         
 **/
UserAction.clickGoodsItem = function (event, caller) {
    var $self = $(this);
    var isSelected = CHECKBOX_TOOL.isSelected($self, caller);
    if (isSelected) {
        //      ，       
        CHECKBOX_TOOL.setUnSelected($self)
    } else {
        CHECKBOX_TOOL.setSelected($self)
    }
    if (caller === undefined || caller === this) {
        //               ，           
        SystemAction.priceCalculate();
    }

    //         ,           
    if (CHECKBOX_TOOL.storeHasSelected($self) && caller === undefined) {
        //    
        var $store = $self.parents("dl").find("label[data-store]");
        UserAction.clickStoreItem.call($store, null, {isGoods: true, selected: isSelected});
    }

}

/**
 *         
 **/
UserAction.clickStoreItem = function (event, caller) {
    var $self = $(this);
    var isSelected = CHECKBOX_TOOL.isSelected($self, caller);
    if (isSelected) {
        //      ，       
        CHECKBOX_TOOL.setUnSelected($self);
    } else {
        CHECKBOX_TOOL.setSelected($self);
    }

    //                      
    var allButtonHasSelected = CHECKBOX_TOOL.allButtonHasSelected();
    if (allButtonHasSelected ) {
        UserAction.clickAllShopCart.call(CHECKBOX_TOOL.all, null, {isStore: true, selected: false});
    } else {
        UserAction.clickAllShopCart.call(CHECKBOX_TOOL.all, null, {isStore: true, selected: true});
    }

    //             return
    if (caller !== undefined && caller.isGoods) {
        return;
    }

    //         ,  
    CHECKBOX_TOOL.getStoreGoodsList($self).each(function () {
        UserAction.clickGoodsItem.call(this, null, {isStore: true, selected: isSelected});
    });

    //            
    //         ，     
    if (caller === undefined || caller === this) {
        SystemAction.priceCalculate();
    }

}

/**
 *       
 **/
UserAction.clickAllShopCart = function (event, caller) {
    console.log(caller);
    var $self = $(this);
    var isSelected = CHECKBOX_TOOL.isSelected($self, caller);
    if (isSelected) {
        //      ，       
        CHECKBOX_TOOL.setUnSelected($self);
    } else {
        CHECKBOX_TOOL.setSelected($self);
    }

    //              
    //         ，     
    if (caller === undefined || caller === this) {
        CHECKBOX_TOOL.getStoreList($self).each(function () {
            UserAction.clickStoreItem.call(this, null, {isAll: true, selected: isSelected});
        });
        SystemAction.priceCalculate();
    }

PageAction実装リファレンス:
var PageAction={}; PageAction.updateCartInfo=function(params….){//TODOカート情報更新}
SystemAction実装リファレンス:var SystemAction={}
SystemAction.priceCalculate=function(params…){//このメソッドは外部からパラメータを入力してもよいし、独自にメソッド内部で関連するパラメータを取得してもよい.//Ajaxリクエストを発行し、リクエストが成功したらPageAction.updateCartInfoメソッドを呼び出してページを更新する}
最終呼び出しコード(モバイル側はclickの代わりにtouch時間を使用することを考慮できる)://総選択ボタンCHECKBOXをクリックTOOL.all.click(function (event) { UserAction.clickAllShopCart.call(this, event); });

    //      
    CHECKBOX_TOOL.store().click(function (event) {
        UserAction.clickStoreItem.call(this, event);
    });

    //     
    CHECKBOX_TOOL.goods().click(function (event,) {
        UserAction.clickGoodsItem.call(this, event);
    });

jsカート実現の基本構想は以上の通りである.
注意:UserActionでは、callerが誰であるかを区別する、ループ呼び出しを防止し、選択状態エラー、システムActionを引き起こす.priceCalculateメソッドが複数回呼び出され、体験プロセスがスムーズでなく、パフォーマンスが損なわれます.

nginxでの静的GZIPサポートの構成

[原创]JS侧は一时间内の平日の日数を计算して、周末と法定の祝日を排除して、同时に休日を考虑して...