ホームページ > 記事 > ウェブフロントエンド > シンプルなフロントエンド js ajax ショッピング カート フレームワーク (入門)_javascript スキル
シンプルなフロントエンド js ajax ショッピング カート フレームワーク (入門)_javascript スキル
- WBOYオリジナル
- 2016-05-16 18:00:141294ブラウズ
今日は会社で本当に何もすることがないので、ショッピングモールのショッピングカートのフロントエンドフレームワークを書き留めることを思いつきました。 もちろん、ここにはショッピングカートの追加、削除、変更、クエリしかありません。文章はそこまで完璧ではないかもしれませんが、より高いレベルに到達できるように、JS の専門家がいくつかのアドバイスを提供してくれることを願っています。
ほほ~~~ 始めましょう:
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 = "
| "+ "书啊"+ " | "+ "+ "书名"+ " | "+ "+ " 单价"+ " | "+ "+ " 数量"+ " | "+ "+ " 操作"+ " | "+
|---|---|---|---|---|
| "+ " " | "+ "+ 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 = "
"
"
data.Name
"
"
"お金
"
"
""
" "title="数量マイナス 1" class="cut" onclick="Jusoc.UI. ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])">"
"
" ;/ td>"
"
"削除元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 = 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)});
削除:function(pid ,obj){
Jusoc.BLL.Shopping.Remove(pid,null,function(data){ RemoveFromPanel(obj);});
}
}
}); )
}
Jusoc._inital();
})()
ヒント: ここでの表示ページは、必要に応じてカスタマイズできます。
HTML:
コードをコピー