先給大家簡單介紹下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 實現簡單購物車功能(實例代碼)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
