這篇文章主要介紹了關於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中文網其他相關文章!