간단한 프론트엔드 js ajax 장바구니 프레임워크(시작하기)_javascript 기술

오늘은 정말 회사에서 할 일이 없어서 문득 쇼핑몰에 있는 장바구니의 프론트엔드 프레임워크를 적어볼까 하는 생각이 들었습니다. 물론 장바구니의 추가, 삭제, 수정, 조회만 가능합니다. 어쩌면 글이 그렇게 완벽하지는 않을 수도 있지만, 가장 중요한 것은 소개입니다. 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 = ""+
""+
""+
""+
""+
""+
""+
"";
for(var i =0;i{
html += ""+
""+
""+
""+
""
""
html ="

"+ "书啊"+ "	"+ "书名"+ "	"+ " 单价"+ "	"+ " 数量"+ "	"+ " 操作"+ "
"+ ""+ "	"+ data[i].Name+ "	"+ "￥"+data[i].Money+ "	"+ " "+ ""+ " "title=\"数量减一\" class=\"cut\" onclick=\"Jusoc.UI.ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])\">"+ " " "	" "Cark에서 제거" "

" ;
document.body.innerHTML =html;
}
function AddToPanel(data) {
//프런트엔드 스타일을 수정하기 위해 장바구니에 항목을 추가합니다.
var obj = document .getElementById("sm");
var html = ""
"" >""
""
데이터.이름
""
"엔" 데이터입니다. 돈
""
""

" "title="수량 빼기 1" class="cut" onclick="Jusoc.UI. ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])">"
"

"""
"다음에서 제거 Cark< /span>"
"";
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 = parsInt(pcount)
Jusoc.BLL.Shopping.Set(pid , pcount, function () { 경고("이전") }, function (data) { UpdatePanel(obj, pcount) })
},
Minus:function(pid,pcount,obj){
pcount = parsInt (pcount) - 1;
Jusoc.BLL.Shopping.Set(pid,pcount,null,function(data){ UpdatePanel(obj,pcount)})
},
제거 :function(pid ,obj){
Jusoc.BLL.Shopping.Remove(pid,null,function(data){ RemoveFromPanel(obj);})
}
}
})( )
}
Jusoc._inital();
})()


팁: 여기 표시 페이지는 단지 데모일 뿐입니다.
　HTML:

코드 복사

코드는 다음과 같습니다.

<머리>
<제목>





<본문>

购物车
总金额：엔< /스팬>

修改成功！

您적商품总金额为PY@Model.Total.ToString("0.00")元

关闭

장바구니에 하나 추가

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

总结：OK,搞定！！