avalonjs 實現簡單購物車

2024-04-27 15:11:19

字體：大中小

來源：轉載

供稿：網友

因為最近有在做購物車，然后我們是用avalon來實現一些模塊的，所以順其自然的用avalon來實現購物車，目前發現avalon還是比較強大的，大大的節約了代碼量。

購物車一般具備的功能是加減數量、選擇商品、刪除商品和計算金額，因為avalon具有雙向綁定功能，所以杜絕了dom的操作，只需要完成功能的邏輯即可，可以分下面幾個步驟實現。

　　runjs: http://runjs.cn/detail/1dnkgxom

1、頁面的Html結構

這里不考慮好的效果，所以直接用最簡單的html來實現了，主要包含控制器，列表循環，金額顯示，簡單代碼結構如下

12345678910111213141516 <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:;" ms-click="plus(el)">加</a> <a href="Javascript:;" ms-click="minus(el)">減</a> <a href="javascript:;" 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后可以定義了

123	`var` `vm = avalon.define({` `$id:"test"});`

這樣就定義了一個簡單的模型，$id傳入的是控制器的值，本文例子的控制器是寫在body，如果不理解可以去看看官網。

3、定義購物車里面的商品

實際項目中，這個肯定是通過后臺獲取到的，這里為了演示就直接定義了，從第一點的html結構可以看出來，這里購物車的商品用的是arr，所以接著定義的就是arr，可以這樣定義

12345678910111213 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屬性，類型為數組

1	`selected:[]`

4、定義全選的模型和方法

購物車里面一般都有全選的功能的，只是表現的形式不一樣，那么可以這么定義

123456789101112 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(前面定義的屬性)中刪除

1234567891011121314151617181920212223242526 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來找出對應的商品，這樣才能計算該商品的金額。

123456789101112131415161718192021222324252627282930313233343536 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改變，則表示商品有被刪除，需要重新計算總金額。

1234567 vm.selected.$watch("length",function(n) { vm.checkAllbool = n === vm.arr.size() vm.cal();});vm.arr.$watch("length",function(n) { vm.cal();});

通過上面的步驟分析，可以了解了大概的實現流程，下面是完整的代碼。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128 <!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:;" ms-click="plus(el)">加</a> <a href="javascript:;" ms-click="minus(el)">減</a> <a href="javascript:;" 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>