avalonjs 實現簡單購物車

時間  2019-11-10
標籤 avalonjs 實現 簡單 購物車 简体版
原文   原文鏈接

    由於最近有在作購物車，而後咱們是用avalon來實現一些模塊的，因此順其天然的用avalon來實現購物車，目前發現avalon仍是比較強大的，大大的節約了代碼量。javascript

    購物車通常具有的功能是加減數量、選擇商品、刪除商品和計算金額，由於avalon具備雙向綁定功能，因此杜絕了dom的操做，只須要完成功能的邏輯便可，能夠分下面幾個步驟實現。html

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

    一、頁面的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:;" 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。框架


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

    引入js是必須的，那麼引入avalon.js後能夠定義了 dom

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

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


    三、定義購物車裏面的商品

    實際項目中，這個確定是經過後臺獲取到的，這裏爲了演示就直接定義了，從第一點的html結構能夠看出來，這裏購物車的商品用的是arr，因此接着定義的就是arr，能夠這樣定義 測試

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

    這裏就定義兩個用來測試，那麼還須要一個值來保存選中的商品id,這裏給模型增長一個selected屬性，類型爲數組ui

selected:[]


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

    購物車裏面通常都有全選的功能的，只是表現的形式不同，那麼能夠這麼定義 this

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屬性。

 

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

      加減主要是數量上的變化，而刪除則是須要把該商品直接從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則增長了正則判斷，判斷輸入的是否爲數字。


    五、定義計算總金額

    計算總金額的方法很簡單，就是把全部選中的商品的數量乘以單價再加起來，可是這裏面涉及到另外一個方法，那就是經過商品的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;
}



    這裏面主要用的是循環，找到商品的對象而後計算商品的金額再相加，代碼略長。


    六、監聽屬性

    須要監聽兩個屬性，那就是 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();
});

 

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

<!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>


    用avalon時間還不久，一步步來，但願能更深刻了解mvvm框架，在後面的日子裏應用更多的場景。

    本文同時發佈在個人我的博客 http://www.subying.com/archives/131.html

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程