avalonjs 实现简单购物车

时间  2019-11-17
标签 avalonjs 实现 简单 购物车 繁體版
原文   原文链接

    由于最近有在作购物车，而后咱们是用avalon来实现一些模块的，因此顺其天然的用avalon来实现购物车，目前发现avalon仍是比较强大的，大大的节约了代码量。 javascript

    购物车通常具有的功能是加减数量、选择商品、删除商品和计算金额，由于avalon具备双向绑定功能，因此杜绝了dom的操做，只须要完成功能的逻辑便可，能够分下面几个步骤实现。 html

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

    一、页面的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后能够定义了 框架

var vm = avalon.define({
                $id: "test"
});
    这样就定义了一个简单的模型，$id传入的是控制器的值，本文例子的控制器是写在body，若是不理解能够去看看官网。


    三、定义购物车里面的商品

    实际项目中，这个确定是经过后台获取到的，这里为了演示就直接定义了，从第一点的html结构能够看出来，这里购物车的商品用的是arr，因此接着定义的就是arr，能够这样定义 dom

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

    这里就定义两个用来测试，那么还须要一个值来保存选中的商品id,这里给模型增长一个selected属性，类型为数组 mvvm

selected:[]


    四、定义全选的模型和方法

    购物车里面通常都有全选的功能的，只是表现的形式不同，那么能够这么定义 测试

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属性。 ui

     四、定义加、减、删除的方法

      加减主要是数量上的变化，而删除则是须要把该商品直接从arr(前面定义的属性)中删除 this

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教程