Avalonjs 實作簡單購物車功能
- 不言原創
- 2018-05-05 16:08:041495瀏覽
這篇文章主要介紹了關於Avalonjs 實現簡單購物車功能，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
avalon是國內最強大的MVVM框架，最近小編在高購物車的項目，我們是用avalon來實現一些模組的，所以順其自然的用avalon來實現購物車。接下來透過本文跟大家分享Avalonjs 實作簡單購物車功能的實例程式碼，需要的朋友參考下
先給大家簡單介紹一下avalon概念
avalon是國內最強大的MVVM框架，沒有之一，雖然淘寶KISSY團隊也搞了兩個MVVM框架，但都無疾而終。其他的MVVM框架都沒幾個。也只有外國人與像我這樣閒的架構師才有時間鑽研這東西。我很早之前就預言，MVVM是前端的終極解決方案。我之前在盛大無線做盛大通行證就深有體會，一個業務邏輯對應十來個不同的介面，分層架構是不可或缺的。因此雙向綁定作為解藥，結合很早就流行的MVC框架，衍生出MVVM這神器。
因為最近有在做購物車，然後我們是用avalon來實現一些模組的，所以順其自然的用avalon來實現購物車，目前發現avalon還是比較強大的，大大的節約了代碼量。
購物車一般具備的功能是加減數量、選擇商品、刪除商品和計算金額，因為avalon具有雙向綁定功能，所以杜絕了dom的操作，只需要完成功能的邏輯即可，可以分下面幾個步驟實現。
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();
});通过上面的步骤分析，可以了解了大概的实现流程，下面是完整的代码。
购物车 <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> <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>
用avalon时间还不久，一步步来，希望能更深入了解mvvm框架，在后面的日子里应用更多的场景。
以上是Avalonjs 實作簡單購物車功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！