首頁  >  文章  >  web前端  >  Avalonjs 實作簡單購物車功能

Avalonjs 實作簡單購物車功能

不言
不言原創
2018-05-05 16:08:041490瀏覽

這篇文章主要介紹了關於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:&#39;商品1&#39;
 },
 {
 id:2,
 num:1,
 price:8.8,
 text:&#39;商品2&#39;
 }<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+&#39;&#39;;
  });
  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
 = &#39;&#39;,
 _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 &#39;&#39;;
 var i=0,
  _arr
 = this.arr,
  _obj
 = &#39;&#39;,
  _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:&#39;商品1&#39;
   },
   {
   id:2,
   num:1,
   price:8.8,
   text:&#39;商品2&#39;
   }
  ],
  selected
 : ["1"],
  checkAllbool
 : false,
  checkAll
 : function() {
   if
 (this.checked) {
   var
 _arr = [];
   avalon.each(vm.arr,function(index,item){
    _arr[index]
 = item.id+&#39;&#39;;
   });
   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
 = &#39;&#39;,
   _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 &#39;&#39;;
   var
 i=0,
   _arr
 = this.arr,
   _obj
 = &#39;&#39;,
   _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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn