先給大家簡單介紹下avalon概念

恒山網(wǎng)站制作公司哪家好，找創(chuàng)新互聯(lián)！從網(wǎng)頁設計、網(wǎng)站建設、微信開發(fā)、APP開發(fā)、響應式網(wǎng)站建設等網(wǎng)站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)從2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運維經(jīng)驗，來保證我們的工作的順利進行。專注于網(wǎng)站建設就選創(chuàng)新互聯(lián)。

avalon是國內(nèi)最強大的MVVM框架，沒有之一，雖然淘寶KISSY團隊也搞了兩個MVVM框架，但都無疾而終。其他的MVVM框架都沒幾個。也只有外國人與像我這樣閑的架構(gòu)師才有時間鉆研這東西。我很早之前就預言，MVVM是前端的終極解決方案。我之前在盛大無線做盛大通行證就深有體會，一個業(yè)務邏輯對應十來個不同的界面，分層架構(gòu)是必不可少的。因此雙向綁定作為解藥，結(jié)合很早就流行的MVC框架，衍生出MVVM這神器。

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

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

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

    1、頁面的Html結(jié)構(gòu)

    這里不考慮好的效果，所以直接用最簡單的html來實現(xiàn)了，主要包含控制器，列表循環(huán)，金額顯示，簡單代碼結(jié)構(gòu)如下

 

  
全選
  

  
  {{el.text}}
  
  加
  減
  刪除
  
單價：{{el.price
 | currency}}
  
金額：{{el.num*el.price
 | currency}}
  
 
 
總金額：{{total
 | currency}}
 

     這里有全選、加減、刪除幾個功能事件，金額用了過濾器currency。

    2、引入avalon.js,定義模型

    引入js是必須的，那么引入avalon.js后可以定義了

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

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

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

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

arr
 : [
 {
 id:1,
 num:1,
 price:45.5,
 text:'商品1'
 },
 {
 id:2,
 num:1,
 price:8.8,
 text:'商品2'
 }]

    這里就定義兩個用來測試，那么還需要一個值來保存選中的商品id,這里給模型增加一個selected屬性，類型為數(shù)組

selected:[]

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

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

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屬性來實現(xiàn)和判斷是否選中“全選”，通過checkAll來實現(xiàn)選中全部或者取消選中全部，其實就是修改模型里面的selected屬性，如果selected為空數(shù)組則沒有一個是選中的，如果那個需要選中只需要把對應的值放到selected數(shù)組中即可，因為在html中checkbox使用 ms-duplex 進行綁定的，而綁定的是 selected屬性。

     4、定義加、減、刪除的方法

      加減主要是數(shù)量上的變化，而刪除則是需要把該商品直接從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();
}

    這里還有一個是當輸入框改變時執(zhí)行的方法，這里通過出入對象來進行操作，可以看看第一步中的html代碼，就明白了，無論是改變還是加減都最后要執(zhí)行 vm.cal，vm.cal是計算總金額的，將在下面講解。

    加減的方法都很簡單主要是修改num屬性即可，changeNum則增加了正則判斷，判斷輸入的是否為數(shù)字。

    5、定義計算總金額

    計算總金額的方法很簡單，就是把所有選中的商品的數(shù)量乘以單價再加起來，但是這里面涉及到另一個方法，那就是通過商品的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;
}

    這里面主要用的是循環(huán)，找到商品的對象然后計算商品的金額再相加，代碼略長。

    6、監(jiān)聽屬性

    需要監(jiān)聽兩個屬性，那就是 selected 和 arr，監(jiān)聽 selected是為了隨時了解商品有沒有全選中，主要通過監(jiān)聽Length。監(jiān)聽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();
});

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

 
 
 
 
  
 
 
 
 
 

  
全選
  

  
  {{el.text}}
  
  加
  減
  刪除
  
單價：{{el.price
 | currency}}
  
金額：{{el.num*el.price
 | currency}}
  
 
 
總金額：{{total
 | currency}}
 

    用avalon時間還不久，一步步來，希望能更深入了解mvvm框架，在后面的日子里應用更多的場景。

以上所述是小編給大家介紹的Avalonjs 實現(xiàn)簡單購物車功能(實例代碼)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！