Avalonjs 实现简单购物车功能(实例代码)

站长资源 2024/11/28 佚名

9 1538 9

DDR爱好者之家 Design By 杰米

先给大家简单介绍下avalon概念

avalon是国内最强大的MVVM框架，没有之一，虽然淘宝KISSY团队也搞了两个MVVM框架，但都无疾而终。其他的MVVM框架都没几个。也只有外国人与像我这样闲的架构师才有时间钻研这东西。我很早之前就预言，MVVM是前端的终极解决方案。我之前在盛大无线做盛大通行证就深有体会，一个业务逻辑对应十来个不同的界面，分层架构是必不可少的。因此双向绑定作为解药，结合很早就流行的MVC框架，衍生出MVVM这神器。

因为最近有在做购物车，然后我们是用avalon来实现一些模块的，所以顺其自然的用avalon来实现购物车，目前发现avalon还是比较强大的，大大的节约了代码量。

购物车一般具备的功能是加减数量、选择商品、删除商品和计算金额，因为avalon具有双向绑定功能，所以杜绝了dom的操作，只需要完成功能的逻辑即可，可以分下面几个步骤实现。

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

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:'商品1'
 },
 {
 id:2,
 num:1,
 price:8.8,
 text:'商品2'
 }<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+'';
  });
  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"htmlcode">

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;
}


    这里面主要用的是循环，找到商品的对象然后计算商品的金额再相加，代码略长。
    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();
});


    通过上面的步骤分析，可以了解了大概的实现流程，下面是完整的代码。


<!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="/UploadFiles/2021-04-02/avalon.js">

    用avalon时间还不久，一步步来，希望能更深入了解mvvm框架，在后面的日子里应用更多的场景。
以上所述是小编给大家介绍的Avalonjs 实现简单购物车功能(实例代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

avalonjs,购物车

DDR爱好者之家 Design By 杰米

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

DDR爱好者之家 Design By 杰米

评论“Avalonjs 实现简单购物车功能(实例代码)”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年11月28日

Avalonjs 实现简单购物车功能(实例代码)

vue.js实现请求数据的方法示例

深入理解JavaScript中的尾调用(Tail Call)

评论“Avalonjs 实现简单购物车功能(实例代码)”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接