溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
先給大家簡單介紹下avalon概念
avalon是國內最強大的MVVM框架，沒有之一，雖然淘寶KISSY團隊也搞了兩個MVVM框架，但都無疾而終。其他的MVVM框架都沒幾個。也只有外國人與像我這樣閑的架構師才有時間鉆研這東西。我很早之前就預言，MVVM是前端的終極解決方案。我之前在盛大無線做盛大通行證就深有體會，一個業務邏輯對應十來個不同的界面，分層架構是必不可少的。因此雙向綁定作為解藥，結合很早就流行的MVC框架，衍生出MVVM這神器。
因為最近有在做購物車，然后我們是用avalon來實現一些模塊的，所以順其自然的用avalon來實現購物車，目前發現avalon還是比較強大的，大大的節約了代碼量。
購物車一般具備的功能是加減數量、選擇商品、刪除商品和計算金額，因為avalon具有雙向綁定功能，所以杜絕了dom的操作，只需要完成功能的邏輯即可，可以分下面幾個步驟實現。
runjs: http://runjs.cn/detail/1dnkgxom
1、頁面的Html結構
這里不考慮好的效果，所以直接用最簡單的html來實現了，主要包含控制器，列表循環，金額顯示，簡單代碼結構如下
<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>單價：{{el.price
| currency}}</p>
<p>金額：{{el.num*el.price
| currency}}</p>
</li>
</ul>
<p>總金額：{{total
| currency}}</p>
</body>
這里有全選、加減、刪除幾個功能事件，金額用了過濾器currency。
2、引入avalon.js,定義模型
引入js是必須的，那么引入avalon.js后可以定義了
var vm
= avalon.define({
$id:
"test"
});
這樣就定義了一個簡單的模型，$id傳入的是控制器的值，本文例子的控制器是寫在body，如果不理解可以去看看官網。
3、定義購物車里面的商品
實際項目中，這個肯定是通過后臺獲取到的，這里為了演示就直接定義了，從第一點的html結構可以看出來，這里購物車的商品用的是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>
這里就定義兩個用來測試，那么還需要一個值來保存選中的商品id,這里給模型增加一個selected屬性，類型為數組
selected:[]
4、定義全選的模型和方法
購物車里面一般都有全選的功能的，只是表現的形式不一樣，那么可以這么定義
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屬性來實現和判斷是否選中“全選”，通過checkAll來實現選中全部或者取消選中全部，其實就是修改模型里面的selected屬性，如果selected為空數組則沒有一個是選中的，如果那個需要選中只需要把對應的值放到selected數組中即可，因為在html中checkbox使用 ms-duplex 進行綁定的，而綁定的是 selected屬性。
4、定義加、減、刪除的方法
加減主要是數量上的變化，而刪除則是需要把該商品直接從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();
}
這里還有一個是當輸入框改變時執行的方法，這里通過出入對象來進行操作，可以看看第一步中的html代碼，就明白了，無論是改變還是加減都最后要執行 vm.cal，vm.cal是計算總金額的，將在下面講解。
加減的方法都很簡單主要是修改num屬性即可，changeNum則增加了正則判斷，判斷輸入的是否為數字。
5、定義計算總金額
計算總金額的方法很簡單，就是把所有選中的商品的數量乘以單價再加起來，但是這里面涉及到另一個方法，那就是通過商品的id來找出對應的商品，這樣才能計算該商品的金額。
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;
}
這里面主要用的是循環，找到商品的對象然后計算商品的金額再相加，代碼略長。
6、監聽屬性
需要監聽兩個屬性，那就是 selected 和 arr，監聽 selected是為了隨時了解商品有沒有全選中，主要通過監聽Length。監聽arr是判斷商品有沒有被刪除，如果arr的length改變，則表示商品有被刪除，需要重新計算總金額。
vm.selected.$watch("length",
function(n)
{
vm.checkAllbool
= n === vm.arr.size()
vm.cal();
});
vm.arr.$watch("length",
function(n)
{
vm.cal();
});
通過上面的步驟分析，可以了解了大概的實現流程，下面是完整的代碼。
<!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>單價：{{el.price
| currency}}</p>
<p>金額：{{el.num*el.price
| currency}}</p>
</li>
</ul>
<p>總金額：{{total
| currency}}</p>
</body>
</html>
用avalon時間還不久，一步步來，希望能更深入了解mvvm框架，在后面的日子里應用更多的場景。
以上所述是小編給大家介紹的Avalonjs 實現簡單購物車功能(實例代碼)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
