前端购物车框架(精髓篇)

其实，一直想把自己写的一些js给总结下，也许是能力有限不能把它完美结合起来。只能自己默默的看着哪些代码，无能为力。

今天在公司实在没有事做，突然就想到写下商城的购物车的前端框架，当然我这里只有购物车的增删改查，也许写的并不是那么完善，但最重要的是一个入门，也希望js达人给些建议，好让我更上一个台阶。

HOHO~~~开始咯：

Js：

//为了省事，就没写自己的js ajax了 用了jquery的，当然你也可以添加到jquery的扩展方法内,哈哈，我太懒了，所以就写这里了。
var _$ = { AJAX: function (urlparm, d, beforecall, successcall) {
    $.ajax({
        url: "ashx/ajax_shoppingCart.ashx?" + urlparm,
        data:d,
        dataType:"Json",
        type: "POST",
        before: beforecall,
        success:successcall
    });
}
};
(function () {
    var Jusoc = {};
    Jusoc = {
        _inital: function () { window.Jusoc = Jusoc; },
        Base: {},
        DAO: {},
        BLL: {},
        UI: {}
    }
    Jusoc.Base = {
        Validate: {
        }
    }
//AJAX()
Jusoc.DAO = {
    Shopping: {
        Get: function (beforecall, successcall) {
            _$.AJAX("action=get", null, beforecall, successcall);
        },
        Remove: function (pid, beforecall, successcall) {
            _$.AJAX("action=remove", { "pid": pid }, beforecall, successcall);
        },
        Add: function (pid, pcount, beforecall, successcall) {
            _$.AJAX("action=add", { "pid": pid, "pcount": pcount }, beforecall, successcall);
        },
        Set: function (pid, pcount, beforecall, successcall) {
            _$.AJAX("action=set", { "pid": pid, "pcount": pcount }, beforecall, successcall);
        }
    }
}
Jusoc.BLL = {
    Shopping: (function () {
        var Data = null;  
        var isLock = false;
        var _successcall = null; 
        var _beforecall = null; 
        function Unlock() {
            isLock = false;
        }
        function Lock() {
            isLock = true;
            if(Data&&Data !=null)
            {
            Data = null;
            }
        }
        function CallBackFunction(xhr) {
            Unlock();
//            if (xhr[0] == "ERROR") {

//                alert(xhr[1]);
//                return;
//            }
//            else if (xhr[0] == "SUCCESS") {
//                Jusoc.BLL.Shopping.SetData(xhr[1]);
//            }

            Jusoc.BLL.Shopping.SetData(xhr);
            
            if (_successcall != null && _successcall) {
                _successcall.call(window, xhr);
            }
            _successcall = null;
        }
        function PrepareRequst(beforecall, successcall) {
            if (isLock) {
                return false;
            }
            Lock();
            if (beforecall != null && beforecall) {
                _beforecall = beforecall;
            }
            if (successcall != null && successcall) {
                _successcall = successcall;
            }
        }
        return {
            Get: function (beforecall, successcall) {
                if(PrepareRequst(beforecall, successcall)==false)return false;
                Jusoc.DAO.Shopping.Get(_beforecall, CallBackFunction);
            },
            Remove: function (pid, beforecall, successcall) {
               if(PrepareRequst(beforecall, successcall)==false)return false;
                Jusoc.DAO.Shopping.Remove(pid, _beforecall, CallBackFunction);
            },
            Set: function (pid, pcount, beforecall, successcall) {
                if(PrepareRequst(beforecall, successcall)==false)return false;
                Jusoc.DAO.Shopping.Set(pid, pcount, beforecall, CallBackFunction);
            },
            Add: function (pid, pcount, beforecall, successcall) {
                if(PrepareRequst(beforecall, successcall)==false)return false;
                Jusoc.DAO.Shopping.Add(pid, pcount, _beforecall, CallBackFunction);
            },
            GetData: function () {
            //alert(Data);
                return Data;
            },
            SetData: function (data) { Data = data; },
            RemoveData: function () {
                if (Data != null && Data)
                    Data= null;
            }
        }
    })(),
    XHR: {
    }
}
Jusoc.UI = {
    ShoppingCart: (function () {
        function Constract() {
            Jusoc.BLL.Shopping.Get(null,SetShoppingCart);
        }
        function SetShoppingCart(data) {
            //这里来填充购物车中的数据
            var data = Jusoc.BLL.Shopping.GetData();

            //这里 先构建 整个的购物车
            var html = "<table class=\"shoppingcart-list\" id=\"sm\">"+
                        "<tr>"+
                        "<th>"+
                        "书啊"+
                        "</th>"+
                        "<th>"+
                        "书名"+
                        "</th>"+
                        "<th>"+
                        "  单价"+
                        "</th>"+
                        "<th>"+
                        "   数量"+
                        "</th>"+
                        "<th>"+
                        "   操作"+
                        "</th>"+
                        "</tr>";    
                        for(var i =0;i<data.length;i++)
                        {
                        html += "<tr>"+
                                "<td>"+
                                "<img src=\"ss\" height=\"36px\" width=\"28px\"/>"+
                                "</td>"+
                                "<td>"+
                                  data[i].Name+
                                "</td>"+
                                "<td>"+
                                "￥"+data[i].Money+
                                "</td>"+
                                "<td>"+
                                "<div class=\"item-change\">"+
                                "<input type=\"text\" value='"+data[i].Count+"' />"+
                                "<span title=\"数量加一\" class=\"add\" onclick=\"Jusoc.UI.ShoppingCart.Plus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])\"></span> <span "+
                                "title=\"数量减一\" class=\"cut\" onclick=\"Jusoc.UI.ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])\"></span>"+
                                "</div>"+
                                "</td>"+
                                "<td>"+
                                "<span class=\"RemoveLink\" onclick=\"Jusoc.UI.ShoppingCart.Remove(1,this.parentNode.parentNode)\">Remove From Cark</span>"+
                                "</td>"+
                                "</tr>";
                        }
                        html+="</table>";
                        document.body.innerHTML+=html;
        }
        function AddToPanel(data) {
            //这里是对 添加一个商品到购物车 来修改前台样式
            
            var obj = document.getElementById("sm");
      
            var html =   "<td>"+
                                "<img src=\"soo\" height=\"36px\" width=\"28px\"/>"+
                                "</td>"+
                                "<td>"+
                                  data.Name+
                                "</td>"+
                                "<td>"+
                                "￥"+data.Money+
                                "</td>"+
                                "<td >"+
                                "<div class=\"item-change\">"+
                                "<input type=\"text\" value='"+data.Count+"' />"+
                                "<span title=\"数量加一\" class=\"add\" onclick=\"Jusoc.UI.ShoppingCart.Plus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])\"></span> <span "+
                                "title=\"数量减一\" class=\"cut\" onclick=\"Jusoc.UI.ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])\"></span>"+
                                "</div>"+
                                "</td>"+
                                "<td>"+
                                "<span class=\"RemoveLink\" onclick=\"Jusoc.UI.ShoppingCart.Remove(1,this.parentNode.parentNode)\">Remove From Cark</span>"+
                                "</td>";

                                      var row = obj.insertRow(1);
                                        row.innerHTML = html;
                                    return;
                                obj.childNodes[0].innerHTML += html;
        }
        function UpdatePanel(obj, count) {
            //这里是从购物车中 增加 或者 减少 修改操作
            obj.value = count;
        }
        function RemoveFromPanel(child)
        {
            var obj = document.getElementById("sm");
                obj.childNodes[0].removeChild(child);
        }
        return {
            PageLoad: function () {
            Constract();
            },
            Add: function (pid, pcount) {
                Jusoc.BLL.Shopping.Add(pid,pcount, null, AddToPanel);
            },
            Plus: function (pid, pcount, obj) {
                pcount = parseInt(pcount) + 1;
                Jusoc.BLL.Shopping.Set(pid, pcount, function () { alert("before") }, function (data) { UpdatePanel(obj, pcount) });
            },
            Minus:function(pid,pcount,obj){
                pcount = parseInt(pcount) - 1;
                Jusoc.BLL.Shopping.Set(pid,pcount,null,function(data){ UpdatePanel(obj,pcount)});
            },
            Remove:function(pid,obj){
                Jusoc.BLL.Shopping.Remove(pid,null,function(data){ RemoveFromPanel(obj);});
            }
        }
    })()
}
Jusoc._inital();
})()

　　Tips:这里的显示页面仅仅是demo，如需要，可以自己定制。

　　HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        *{margin:0; padding:0;border:0}
    body{font-size: .85em;font-family: Verdana,Helvetica,SimSun,Arial, "Arial Unicode MS" ,MingLiu,PMingLiu, "MS Gothic" ,sans-serief;color: #232323;text-align:center;  font-size:12px;  background-color: #fff;}
    #ltRight {width: 722px;float: left;position: relative;padding: 16px 40px;text-align:left}
    /*shoppingcart-list*/
    .shoppingcart-list{border: 1px solid #C2D8ED;border-collapse: collapse;color: #666666;width: 750px;}
    .shoppingcart-list th{background-color: #F1F7F9;color: #666;font-size: 13px;text-align: center;}
    .shoppingcart-list tr{border: 1px solid #C2D8ED;line-height: 25px;text-align:center;}
    .shoppingcart-list tr:hover{background-color: #fff;}
    th, td{padding-left: 5px;}
    
    .item-change{font: 12px/74px Arial;text-align: center;width: 58px;padding: 28px 0 0 25px;height: 46px;}
    .item-change input{width: 36px;height: 19px;border: 1px solid #C4C4C4;background: white;float: left;margin-top: 1px;text-align: center;line-height: 19px;margin-right: 1px;font-size: 12px;}
    .item-change span{width: 17px;height: 8px;float: left;display: block;margin-top: 1px;font-size: 0;line-height: 0;border: 1px solid #C9C9C9;text-indent: -9999px; cursor:pointer}
    .item-change .add{background: url(Images/leftmenu/icon_cart.gif) no-repeat 6px -58px;}
    .item-change .cut{background: url(Images/leftmenu/icon_cart.gif) no-repeat 6px -67px;}
    .box_window {width: 204px;position:absolute;left:-9999px;}
    .box_window .updateTip{width: 184px;border: solid 1px #DFC9B2;background-color: #FDF2E3;line-height: 20px;padding: 11px 8px 8px;}
    .t_c {text-align: center;}
    .c_red_s {color: #C30;font-weight: bold;}
    .box_window .c_b {width: 9px;height: 6px;margin: 0 auto;background: url(Images/leftmenu/p_window_b.gif) no-repeat;position: relative;margin-top: -1px;font-size: 0;overflow: hidden;}
    .RemoveLink{ cursor:pointer}
    
    </style>
    <script src="../js/jquery-1.6.js" type="text/javascript"></script>
    <script src="Js/base.Jusoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload =function () {
            Jusoc.UI.ShoppingCart.PageLoad();   
            
        }
    </script>
</head>
<body>
    
<div id="ltRight">
    <h5 class="htitle">
        购物车
        <span style="float:right; padding-right:20px;">总金额：￥<em id="cart-total"></em></span>
    </h5>
    <div id="update-message" style="text-align: left; text-indent: 48px; font-weight: bold;
        padding: 6px;">
    </div>


    <div id="item-tip" class="box_window">
        <div class="updateTip">
            <p class="t_c">
                修改成功！</p>
            <p>
                您的商品总金额为￥<span class="c_red_s" id="update_total_account">@Model.Total.ToString("0.00")</span>元</p>
            <p class="t_c">
                <a href="javascript:void(0)" onclick="$('#item-tip').css('left','-9999px');">关闭</a></p>
        </div>
        <div class="c_b">
        </div>
    </div>

    <h5><a href="javascript:Jusoc.UI.ShoppingCart.Add(1,1)">Add one to Shopping Cart</a></h5>
</div>

</body>
</html>

　　

ashx：这个我就不就木有必要黏贴出来了，根据自己的业务去写额。

总结：OK,搞定~ ho ho~！！