Avalonjs 實(shí)現(xiàn)簡單購物車功能(實(shí)例代碼)
先給大家簡單介紹下avalon概念
avalon是國內(nèi)最強(qiáng)大的MVVM框架，沒有之一，雖然淘寶KISSY團(tuán)隊(duì)也搞了兩個(gè)MVVM框架，但都無疾而終。其他的MVVM框架都沒幾個(gè)。也只有外國人與像我這樣閑的架構(gòu)師才有時(shí)間鉆研這東西。我很早之前就預(yù)言，MVVM是前端的終極解決方案。我之前在盛大無線做盛大通行證就深有體會(huì)，一個(gè)業(yè)務(wù)邏輯對(duì)應(yīng)十來個(gè)不同的界面，分層架構(gòu)是必不可少的。因此雙向綁定作為解藥，結(jié)合很早就流行的MVC框架，衍生出MVVM這神器。
因?yàn)樽罱性谧鲑徫镘?，然后我們是用avalon來實(shí)現(xiàn)一些模塊的，所以順其自然的用avalon來實(shí)現(xiàn)購物車，目前發(fā)現(xiàn)avalon還是比較強(qiáng)大的，大大的節(jié)約了代碼量。
購物車一般具備的功能是加減數(shù)量、選擇商品、刪除商品和計(jì)算金額，因?yàn)閍valon具有雙向綁定功能，所以杜絕了dom的操作，只需要完成功能的邏輯即可，可以分下面幾個(gè)步驟實(shí)現(xiàn)。
runjs: http://runjs.cn/detail/1dnkgxom
1、頁面的Html結(jié)構(gòu)
這里不考慮好的效果，所以直接用最簡單的html來實(shí)現(xiàn)了，主要包含控制器，列表循環(huán)，金額顯示，簡單代碼結(jié)構(gòu)如下
<body ms-controller="test">
<ul ms-visible="arr.length">
<li><input type="checkbox"
ms-click="checkAll" ms-duplex-checked="checkAllbool"/>全選</li>
<li ms-repeat="arr"
>
<input type="checkbox"
ms-attr-value="el.id" ms-duplex="selected" />
{{el.text}}
<input type="text"
name="" ms-attr-value="el.num" ms-on-input="changeNum(el)">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
ms-click="plus(el)">加</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
ms-click="minus(el)">減</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
ms-click="del(el)">刪除</a>
<p>單價(jià)：{{el.price
| currency}}</p>
<p>金額：{{el.num*el.price
| currency}}</p>
</li>
</ul>
<p>總金額：{{total
| currency}}</p>
</body>
這里有全選、加減、刪除幾個(gè)功能事件，金額用了過濾器currency。
2、引入avalon.js,定義模型
引入js是必須的，那么引入avalon.js后可以定義了
var vm
= avalon.define({
$id:
"test"
});
這樣就定義了一個(gè)簡單的模型，$id傳入的是控制器的值，本文例子的控制器是寫在body，如果不理解可以去看看官網(wǎng)。
3、定義購物車?yán)锩娴纳唐?/strong>
實(shí)際項(xiàng)目中，這個(gè)肯定是通過后臺(tái)獲取到的，這里為了演示就直接定義了，從第一點(diǎn)的html結(jié)構(gòu)可以看出來，這里購物車的商品用的是arr，所以接著定義的就是arr，可以這樣定義
arr
: [
{
id:1,
num:1,
price:45.5,
text:'商品1'
},
{
id:2,
num:1,
price:8.8,
text:'商品2'
}<span
style="font-size:
9pt; line-height: 1.5;">]</span>
這里就定義兩個(gè)用來測試，那么還需要一個(gè)值來保存選中的商品id,這里給模型增加一個(gè)selected屬性，類型為數(shù)組
selected:[]
4、定義全選的模型和方法
購物車?yán)锩嬉话愣加腥x的功能的，只是表現(xiàn)的形式不一樣，那么可以這么定義
checkAllbool
: false,
checkAll
: function()
{
if (this.checked)
{
var _arr
= [];
avalon.each(vm.arr,function(index,item){
_arr[index]
= item.id+'';
});
vm.selected
= _arr;
}
else {
vm.selected=[];
}
}
通過checkAllbool屬性來實(shí)現(xiàn)和判斷是否選中“全選”，通過checkAll來實(shí)現(xiàn)選中全部或者取消選中全部，其實(shí)就是修改模型里面的selected屬性，如果selected為空數(shù)組則沒有一個(gè)是選中的，如果那個(gè)需要選中只需要把對(duì)應(yīng)的值放到selected數(shù)組中即可，因?yàn)樵趆tml中checkbox使用 ms-duplex 進(jìn)行綁定的，而綁定的是 selected屬性。
4、定義加、減、刪除的方法
加減主要是數(shù)量上的變化，而刪除則是需要把該商品直接從arr(前面定義的屬性)中刪除
plus:
function(el){
el.num++;
vm.cal();
},
minus:
function(el){
if(el.num>1){
el.num--;
vm.cal();
}
},
del:
function(el){
vm.arr.remove(el);
},
changeNum:
function(el){
var _value
= this.value,
_reg
= /^[1-9]\d?$/
;
if(!_reg.test(_value)){
this.value
= 1;
el.num
= 1;
}else{
el.num
= _value;
}
vm.cal();
}
這里還有一個(gè)是當(dāng)輸入框改變時(shí)執(zhí)行的方法，這里通過出入對(duì)象來進(jìn)行操作，可以看看第一步中的html代碼，就明白了，無論是改變還是加減都最后要執(zhí)行 vm.cal，vm.cal是計(jì)算總金額的，將在下面講解。
加減的方法都很簡單主要是修改num屬性即可，changeNum則增加了正則判斷，判斷輸入的是否為數(shù)字。
5、定義計(jì)算總金額
計(jì)算總金額的方法很簡單，就是把所有選中的商品的數(shù)量乘以單價(jià)再加起來，但是這里面涉及到另一個(gè)方法，那就是通過商品的id來找出對(duì)應(yīng)的商品，這樣才能計(jì)算該商品的金額。
total:0,
cal:
function(){
var _arr
= this.arr,
_selected
= this.selected,
i
= 0,
_obj
= '',
_prcie
= 0
;
if(_selected.length){
for(;i<_selected.length;i++){
_obj
= this.findById(_selected[i])
||{};
if(_obj.price
&& _obj.num){
_prcie
= _prcie + _obj.price * _obj.num;
}
}
}
this.total
= _prcie;
},
findById:
function(id){
if(!id)
return '';
var i=0,
_arr
= this.arr,
_obj
= '',
_id
= parseInt(id,10)
;
for(;i<_arr.length;i++){
if(_arr[i].id
=== _id){
_obj
= _arr[i];
}
}
return _obj;
}
這里面主要用的是循環(huán)，找到商品的對(duì)象然后計(jì)算商品的金額再相加，代碼略長。
6、監(jiān)聽屬性
需要監(jiān)聽兩個(gè)屬性，那就是 selected 和 arr，監(jiān)聽 selected是為了隨時(shí)了解商品有沒有全選中，主要通過監(jiān)聽Length。監(jiān)聽arr是判斷商品有沒有被刪除，如果arr的length改變，則表示商品有被刪除，需要重新計(jì)算總金額。
vm.selected.$watch("length",
function(n)
{
vm.checkAllbool
= n === vm.arr.size()
vm.cal();
});
vm.arr.$watch("length",
function(n)
{
vm.cal();
});
通過上面的步驟分析，可以了解了大概的實(shí)現(xiàn)流程，下面是完整的代碼。
<!DOCTYPE html> <html>
<head>
<title>購物車</title>
<meta http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<script src="../avalon.js"
></script>
<script>
var
vm = avalon.define({
$id:
"test",
arr
: [
{
id:1,
num:1,
price:45.5,
text:'商品1'
},
{
id:2,
num:1,
price:8.8,
text:'商品2'
}
],
selected
: ["1"],
checkAllbool
: false,
checkAll
: function() {
if
(this.checked) {
var
_arr = [];
avalon.each(vm.arr,function(index,item){
_arr[index]
= item.id+'';
});
vm.selected
= _arr;
}
else {
vm.selected=[];
}
},
plus:
function(el){
el.num++;
vm.cal();
},
minus:
function(el){
if(el.num>1){
el.num--;
vm.cal();
}
},
del:
function(el){
vm.arr.remove(el);
},
changeNum:
function(el){
var
_value = this.value,
_reg
= /^[1-9]\d?$/
;
if(!_reg.test(_value)){
this.value
= 1;
el.num
= 1;
}else{
el.num
= _value;
}
vm.cal();
},
total:0,
cal:
function(){
var
_arr = this.arr,
_selected
= this.selected,
i
= 0,
_obj
= '',
_prcie
= 0
;
if(_selected.length){
for(;i<_selected.length;i++){
_obj
= this.findById(_selected[i]) ||{};
if(_obj.price
&& _obj.num){
_prcie
= _prcie + _obj.price * _obj.num;
}
}
}
this.total
= _prcie;
},
findById:
function(id){
if(!id)
return '';
var
i=0,
_arr
= this.arr,
_obj
= '',
_id
= parseInt(id,10)
;
for(;i<_arr.length;i++){
if(_arr[i].id
=== _id){
_obj
= _arr[i];
}
}
return
_obj;
}
});
vm.selected.$watch("length",
function(n) {
vm.checkAllbool
= n === vm.arr.size()
vm.cal();
});
vm.arr.$watch("length",
function(n) {
vm.cal();
});
vm.cal();
</script>
</head>
<body ms-controller="test">
<ul ms-visible="arr.length">
<li><input type="checkbox"
ms-click="checkAll" ms-duplex-checked="checkAllbool"/>全選</li>
<li ms-repeat="arr"
>
<input type="checkbox"
ms-attr-value="el.id" ms-duplex="selected" />
{{el.text}}
<input type="text"
name="" ms-attr-value="el.num" ms-on-input="changeNum(el)">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
ms-click="plus(el)">加</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
ms-click="minus(el)">減</a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow"
ms-click="del(el)">刪除</a>
<p>單價(jià)：{{el.price
| currency}}</p>
<p>金額：{{el.num*el.price
| currency}}</p>
</li>
</ul>
<p>總金額：{{total
| currency}}</p>
</body>
</html>
用avalon時(shí)間還不久，一步步來，希望能更深入了解mvvm框架，在后面的日子里應(yīng)用更多的場景。
以上所述是小編給大家介紹的Avalonjs 實(shí)現(xiàn)簡單購物車功能(實(shí)例代碼)，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài))
這篇文章主要介紹了Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài)) 的相關(guān)資料,還給大家介紹了在Bootstrap框架中提供的機(jī)制驗(yàn)證效果，非常不錯(cuò)，需要的朋友可以參考下2016-08-08
這篇文章主要介紹了使用postMessage實(shí)現(xiàn)iframe跨域通信，第一種使用postMessage在irfame中實(shí)現(xiàn)跨域數(shù)據(jù)傳遞，第二種使用postMessage在window.open()中的使用，本文結(jié)合示例代碼給大家詳細(xì)講解，需要的朋友跟隨小編一起看看吧2022-03-03
js常用函數(shù)push()、pop()、shift()、unshift()、slice()和splice()等詳解
這篇文章主要給大家介紹了關(guān)于js常用函數(shù)push()、pop()、shift()、unshift()、slice()和splice()等的相關(guān)資料,js中數(shù)組操作函數(shù)還是非常多的,今天忽然想到來總結(jié)一下,也算是溫故而知新吧,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了JavaScript操作cookie類,實(shí)例分析了javascript針對(duì)cookie的設(shè)置、讀取、刪除等常用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03
JavaScript實(shí)現(xiàn)下載超大文件的方法詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)下載超大文件的相關(guān)方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
JavaScript實(shí)現(xiàn)PC端四格密碼輸入框功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)PC端四格密碼輸入框功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
實(shí)現(xiàn)JavaScript高性能的數(shù)據(jù)存儲(chǔ)
本文主要對(duì)JavaScript的數(shù)據(jù)存儲(chǔ)，產(chǎn)生性能問題的原因，內(nèi)存泄露的幾種情況等做了簡要分析介紹，需要的朋友可以看下2016-12-12
這篇文章主要介紹了webpack v4 從dev到prd的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
前后端分離開發(fā)模式中,無論前后端都有可能區(qū)分不同的環(huán)境配置,下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序多環(huán)境配置以及使用的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
JavaScript兩個(gè)變量交換值的實(shí)現(xiàn)方法
本文主要介紹了JavaScript兩個(gè)變量交換值（不使用臨時(shí)變量）的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-03-03