简单的前端js+ajax 购物车框架(入门篇)

今天在公司实在没有事做，突然就想到写下商城的购物车的前端框架，当然我这里只有购物车的增删改查，也许写的并不是那么完善，但最重要的是一个入门，也希望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,搞定！！