Maison > Article > interface Web > Avalonjs implémente une fonction de panier d'achat simple

Avalonjs implémente une fonction de panier d'achat simple

不言original: 2018-05-05 16:08:041489parcourir

Cet article présente principalement Avalonjs pour implémenter une fonction de panier d'achat simple, qui a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

avalon est le framework MVVM le plus puissant du monde. Chine Récemment, dans le projet de panier de l'éditeur, nous avons utilisé avalon pour implémenter certains modules, il était donc naturel d'utiliser avalon pour implémenter le panier. Ensuite, je partagerai avec vous l'exemple de code d'Avalonjs pour implémenter une fonction de panier simple à travers cet article. Les amis qui en ont besoin peuvent s'y référer

Tout d'abord, je vais vous donner un. brève introduction au concept d'avalon

avalon est le framework MVVM le plus puissant en Chine, sans exception. Bien que l'équipe Taobao KISSY ait également développé deux frameworks MVVM, ils n'ont tous abouti à rien. Il existe peu d'autres frameworks MVVM. Seuls les étrangers et les architectes oisifs comme moi ont le temps d'étudier ce genre de choses. J'ai prédit il y a longtemps que MVVM serait la solution frontale ultime. J'ai une compréhension approfondie de Shanda Pass lorsque je travaillais pour Shanda Wireless. Une logique métier correspond à plus de dix interfaces différentes, et une architecture en couches est essentielle. Par conséquent, la liaison bidirectionnelle sert d’antidote, combinée au framework MVC, très populaire, pour dériver l’artefact de MVVM.

Parce que nous avons travaillé récemment sur un panier et que nous utilisons avalon pour implémenter certains modules, nous utilisons donc naturellement avalon pour implémenter le panier Actuellement, nous trouvons qu'avalon est relativement puissant, ce qui permet d'économiser beaucoup. quantité.

Les fonctions générales d'un panier sont d'ajouter et de soustraire des quantités, de sélectionner des produits, de supprimer des produits et de calculer des montants. Parce qu'Avalon a une fonction de liaison bidirectionnelle, il élimine les opérations dom et n'a besoin que de compléter la logique. de la fonction. Ceci peut être réalisé dans les étapes suivantes.

1. Structure HTML de la page

Nous ne considérons pas les bons effets ici, nous utilisons donc directement le HTML le plus simple pour l'implémenter, incluant principalement les contrôleurs et la liste boucles. Affichage du montant, la structure de code simple est la suivante

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

Il existe plusieurs événements fonctionnels tels que toutes les sélections, additions, soustractions et suppressions. Le montant utilise la devise du filtre.

2. Introduisez avalon.js et définissez le modèle

Il faut introduire js, puis après avoir introduit avalon.js, vous pouvez définir

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

Ceci définit un modèle simple. Le $id transmis est la valeur du contrôleur dans l'exemple de cet article. Si vous ne comprenez pas, vous pouvez consulter le site officiel.

3. Définir les produits dans le panier

Dans le projet lui-même, cela doit être obtenu en arrière-plan. À des fins de démonstration, cela est défini directement ici. Dès le premier Vous pouvez voir sur la structure html du clic que les articles dans le panier ici utilisent arr, donc la prochaine chose à définir est arr, qui peut être défini comme ceci

arr
 : [
 {
 id:1,
 num:1,
 price:45.5,
 text:&#39;商品1&#39;
 },
 {
 id:2,
 num:1,
 price:8.8,
 text:&#39;商品2&#39;
 }<span
 style="font-size:
 9pt; line-height: 1.5;">]</span>

Ici, nous définissez-en deux pour les tests, puis une valeur supplémentaire est nécessaire pour enregistrer l'identifiant du produit sélectionné. Ici, ajoutez un attribut sélectionné au modèle, le type est un tableau

sélectionné :[]

4. Définir le modèle et la méthode de sélection de tous

Les paniers d'achat ont généralement pour fonction de tout sélectionner, mais la forme d'expression est différente, vous pouvez donc la définir comme ceci

checkAllbool
 : false,
checkAll
 : function()
 {
 if (this.checked)
 {
  var _arr
 = [];
  avalon.each(vm.arr,function(index,item){
   _arr[index]
 = item.id+&#39;&#39;;
  });
  vm.selected
 = _arr;
 }
else {
  vm.selected=[];
 }
}

Utilisez l'attribut checkAllbool pour implémenter et déterminer si « tout sélectionner » est sélectionné », pour tout sélectionner ou tout désélectionner via checkAll, il s'agit en fait de modifier l'attribut sélectionné dans le modèle. Si sélectionné est un tableau vide, non. celui-ci est sélectionné. S'il doit être sélectionné, placez simplement la valeur correspondante dans le tableau sélectionné. Oui, car la case à cocher en HTML est liée à l'aide de ms-duplex et ce qui est lié est l'attribut sélectionné.

4. Définir les méthodes d'addition, de soustraction et de suppression

L'addition et la soustraction sont principalement des changements de quantité, tandis que la suppression nécessite que le produit soit directement retiré de l'arr ( précédemment) Supprimez

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

dans les attributs définis) Il existe également une méthode qui est exécutée lorsque la zone de saisie change Ici, l'opération est effectuée en entrant et en sortant de l'objet. Vous pouvez regarder le html. code dans la première étape et vous comprendrez Oui, qu'il s'agisse d'un changement ou d'une addition ou d'une soustraction, vm.cal doit être exécuté à la fin, vm.cal est utilisé pour calculer le montant total, qui sera expliqué ci-dessous.

Les méthodes d'addition et de soustraction sont très simples, il suffit de modifier l'attribut num changeNum ajoute un jugement régulier pour déterminer si l'entrée est un nombre.

5. Définir le calcul du montant total

La méthode de calcul du montant total est très simple, c'est-à-dire multiplier la quantité de tous les produits sélectionnés par le prix unitaire et additionnez-les, mais ici Une autre méthode est impliquée, qui consiste à trouver le produit correspondant via l'ID du produit, afin que le montant du produit puisse être calculé.

total:0,
cal:
function(){
 var _arr
 = this.arr,
 _selected
 = this.selected,
 i
 = 0,
 _obj
 = &#39;&#39;,
 _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 &#39;&#39;;
 var i=0,
  _arr
 = this.arr,
  _obj
 = &#39;&#39;,
  _id
 = parseInt(id,10)
 ;
  for(;i<_arr.length;i++){
  if(_arr[i].id
 === _id){
   _obj
 = _arr[i];
  }
 }
  return _obj;
}

La principale chose utilisée ici est une boucle Trouvez l'objet du produit puis calculez la quantité du produit et additionnez-la. Le code est légèrement plus long.

6. Attributs de surveillance

需要监听两个属性，那就是 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();
});

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

 
 
 购物车
 
  
 
 <script>
  var
 vm = avalon.define({
  $id:
 "test",
  arr
 : [
   {
   id:1,
   num:1,
   price:45.5,
   text:&#39;商品1&#39;
   },
   {
   id:2,
   num:1,
   price:8.8,
   text:&#39;商品2&#39;
   }
  ],
  selected
 : ["1"],
  checkAllbool
 : false,
  checkAll
 : function() {
   if
 (this.checked) {
   var
 _arr = [];
   avalon.each(vm.arr,function(index,item){
    _arr[index]
 = item.id+&#39;&#39;;
   });
   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
 = &#39;&#39;,
   _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 &#39;&#39;;
   var
 i=0,
   _arr
 = this.arr,
   _obj
 = &#39;&#39;,
   _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>
 
 <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>

用avalon时间还不久，一步步来，希望能更深入了解mvvm框架，在后面的日子里应用更多的场景。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：JS implémente l'ajout dynamique d'événements aux contrôles d'étiquetteArticle suivant：JS implémente l'ajout dynamique d'événements aux contrôles d'étiquette

Articles Liés

Voir plus