溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Avalonjs 實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車功能(實(shí)例代碼)

發(fā)布時(shí)間：2020-08-21 08:09:47 來(lái)源：腳本之家 閱讀：98 作者：忽爾明了 欄目：web開(kāi)發(fā)

 先給大家簡(jiǎn)單介紹下avalon概念

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

  因?yàn)樽罱性谧鲑?gòu)物車，然后我們是用avalon來(lái)實(shí)現(xiàn)一些模塊的，所以順其自然的用avalon來(lái)實(shí)現(xiàn)購(gòu)物車，目前發(fā)現(xiàn)avalon還是比較強(qiáng)大的，大大的節(jié)約了代碼量。

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

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

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

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

<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>單價(jià)：{{el.price
 | currency}}</p>
  <p>金額：{{el.num*el.price
 | currency}}</p>
  </li>
 </ul>
 <p>總金額：{{total
 | currency}}</p>
 </body>

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

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

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

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

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

    3、定義購(gòu)物車?yán)锩娴纳唐?/strong>

    實(shí)際項(xiàng)目中，這個(gè)肯定是通過(guò)后臺(tái)獲取到的，這里為了演示就直接定義了，從第一點(diǎn)的html結(jié)構(gòu)可以看出來(lái)，這里購(gòu)物車的商品用的是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>

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

selected:[]

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

    購(gòu)物車?yán)锩嬉话愣加腥x的功能的，只是表現(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=[];
 }
}

    通過(guò)checkAllbool屬性來(lái)實(shí)現(xiàn)和判斷是否選中“全選”，通過(guò)checkAll來(lái)實(shí)現(xiàn)選中全部或者取消選中全部，其實(shí)就是修改模型里面的selected屬性，如果selected為空數(shù)組則沒(méi)有一個(gè)是選中的，如果那個(gè)需要選中只需要把對(duì)應(yīng)的值放到selected數(shù)組中即可，因?yàn)樵趆tml中checkbox使用 ms-duplex 進(jìn)行綁定的，而綁定的是 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();
}

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

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

    5、定義計(jì)算總金額

    計(jì)算總金額的方法很簡(jiǎn)單，就是把所有選中的商品的數(shù)量乘以單價(jià)再加起來(lái)，但是這里面涉及到另一個(gè)方法，那就是通過(guò)商品的id來(lái)找出對(duì)應(yīng)的商品，這樣才能計(jì)算該商品的金額。

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)，找到商品的對(duì)象然后計(jì)算商品的金額再相加，代碼略長(zhǎng)。

    6、監(jiān)聽(tīng)屬性

    需要監(jiān)聽(tīng)兩個(gè)屬性，那就是 selected 和 arr，監(jiān)聽(tīng) selected是為了隨時(shí)了解商品有沒(méi)有全選中，主要通過(guò)監(jiān)聽(tīng)Length。監(jiān)聽(tīng)arr是判斷商品有沒(méi)有被刪除，如果arr的length改變，則表示商品有被刪除，需要重新計(jì)算總金額。

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

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

<!DOCTYPE html> <html>
 <head>
 <title>購(gòu)物車</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>單價(jià)：{{el.price
 | currency}}</p>
  <p>金額：{{el.num*el.price
 | currency}}</p>
  </li>
 </ul>
 <p>總金額：{{total
 | currency}}</p>
 </body>
</html>

    用avalon時(shí)間還不久，一步步來(lái)，希望能更深入了解mvvm框架，在后面的日子里應(yīng)用更多的場(chǎng)景。

以上所述是小編給大家介紹的Avalonjs 實(shí)現(xiàn)簡(jiǎn)單購(gòu)物車功能(實(shí)例代碼)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手