In fact, I always want to sum up some of my own js files. Maybe it cannot be perfectly combined with limited capabilities. I can only look at the code by myself. I can't do anything in my company today. I suddenly thought of writing the front-end framework of the shopping cart of the mall. Of course, I only need to add, delete, modify, and query the shopping cart here, it may not be so well written, but the most important thing is to get started. I also hope that the js talents can give me some suggestions so that I can take a step further.
HOHO ~~~ Start:
Js:
The Code is as follows:
// In order to save trouble, I didn't write my own js ajax and used jquery. Of course, you can also add it to jquery's extension method. Haha, I am too lazy, so I wrote it here.
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 = {
_ Infound: 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 ){
// Fill in the data in the shopping cart here
Var data = Jusoc. BLL. Shopping. GetData ();
// Create the entire shopping cart first.
Var html ="
{
Html + ="
"+"
"+"
"+ "Books" + " | "+"
"+ "Title" + " | "+"
"+ "Unit price" + " | "+"
"+ "Quantity" + " | "+"
"+ "Operation" + " | "+"
";For (var I = 0; I
"+"
"+ "" + " | "+"
"+ Data [I]. Name + " | "+"
"+ "¥" + Data [I]. Money + " | "+"
"+ ""+ ""+ "" Title = \ "minus 1 \" class = \ "cut \" onclick = \ "Jusoc. UI. shoppingCart. minus (1, this. parentNode. childNodes [0]. value, this. parentNode. childNodes [0]) \ ">" + " "+ " | "+"
"+ "Remove From Cark" + " | "+"
";}Html + ="
";
Document. body. innerHTML + = html;
}
Function AddToPanel (data ){
// Add a product to the shopping cart to modify the foreground style.
Var obj = document. getElementById ("sm ");
Var html =""+
"" +
""+
""+
Data. Name +
""+
""+
"¥" + Data. Money +
""+
""+
"
"+
""+
"" Title = \ "minus 1 \" class = \ "cut \" onclick = \ "Jusoc. UI. shoppingCart. minus (1, this. parentNode. childNodes [0]. value, this. parentNode. childNodes [0]) \ ">" +
"
"+
""+
""+
"Remove From Cark" +
"";
Var row = obj. insertRow (1 );
Row. innerHTML = html;
Return;
Obj. childNodes [0]. innerHTML + = html;
}
Function UpdatePanel (obj, count ){
// Add or remove modifications from the shopping cart.
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. _ in1 ();
})()
Tips: The display page here is only a demo. You can customize it as needed.
HTML:
The Code is as follows: