Avalonjs implémente une fonction de panier d'achat simple-js tutoriel-php.cn

Maison

interface Web

js tutoriel

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

不言

May 05, 2018 pm 04:08 PM

javascript购物车

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 connexe

Frameworks javascript: alimenter le développement Web moderneMay 02, 2025 am 12:04 AM

La puissance du cadre JavaScript réside dans la simplification du développement, l'amélioration de l'expérience utilisateur et les performances des applications. Lorsque vous choisissez un cadre, considérez: 1. Taille et complexité du projet, 2. Expérience d'équipe, 3. Écosystème et soutien communautaire.

La relation entre JavaScript, C et BrowsersMay 01, 2025 am 12:06 AM

INTRODUCTION Je sais que vous pouvez le trouver étrange, que doit faire exactement JavaScript, C et Browser? Ils semblent sans rapport, mais en fait, ils jouent un rôle très important dans le développement Web moderne. Aujourd'hui, nous discuterons du lien étroit entre ces trois. Grâce à cet article, vous apprendrez comment JavaScript fonctionne dans le navigateur, le rôle de C dans le moteur du navigateur et comment ils fonctionnent ensemble pour stimuler le rendu et l'interaction des pages Web. Nous connaissons tous la relation entre JavaScript et Browser. JavaScript est la langue principale du développement frontal. Il fonctionne directement dans le navigateur, rendant les pages Web vives et intéressantes. Vous êtes-vous déjà demandé pourquoi javascr

Node.js diffuse avec dactylographieApr 30, 2025 am 08:22 AM

Node.js excelle dans des E / S efficaces, en grande partie grâce aux flux. Streams traite les données progressivement, en évitant la surcharge de mémoire - idéal pour les fichiers volumineux, les tâches réseau et les applications en temps réel. Combiner les flux avec la sécurité de type dactylographié crée un powe

Python vs JavaScript: considérations de performance et d'efficacitéApr 30, 2025 am 12:08 AM

Les différences de performance et d'efficacité entre Python et JavaScript se reflètent principalement dans: 1) comme un langage interprété, Python fonctionne lentement mais a une efficacité de développement élevée et convient au développement rapide des prototypes; 2) JavaScript est limité au thread unique dans le navigateur, mais les E / S multi-threading et asynchrones peuvent être utilisées pour améliorer les performances dans Node.js, et les deux ont des avantages dans les projets réels.

Les origines de JavaScript: explorer son langage d'implémentationApr 29, 2025 am 12:51 AM

JavaScript est originaire de 1995 et a été créé par Brandon Ike, et a réalisé que la langue en langue C. 1.C offre des capacités de programmation élevées et au niveau du système pour JavaScript. 2. La gestion de la mémoire de JavaScript et l'optimisation des performances reposent sur le langage C. 3. La fonctionnalité multiplateforme du langage C aide JavaScript à s'exécuter efficacement sur différents systèmes d'exploitation.

Dans les coulisses: quel langage alimente JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript s'exécute dans les navigateurs et les environnements Node.js et s'appuie sur le moteur JavaScript pour analyser et exécuter du code. 1) Générer une arborescence de syntaxe abstraite (AST) au stade d'analyse; 2) Convertir AST en bytecode ou code machine à l'étape de compilation; 3) Exécutez le code compilé à l'étape d'exécution.

L'avenir de Python et Javascript: tendances et prédictionsApr 27, 2025 am 12:21 AM

Les tendances futures de Python et JavaScript incluent: 1. Python consolidera sa position dans les domaines de l'informatique scientifique et de l'IA, 2. JavaScript favorisera le développement de la technologie Web, 3. Le développement de plate-forme multiplié deviendra un sujet brûlant, et 4. L'optimisation des performances sera le focus. Les deux continueront d'étendre les scénarios d'application dans leurs champs respectifs et de faire plus de percées dans les performances.

Python vs JavaScript: environnements et outils de développementApr 26, 2025 am 12:09 AM

Les choix de Python et JavaScript dans les environnements de développement sont importants. 1) L'environnement de développement de Python comprend Pycharm, Jupyternotebook et Anaconda, qui conviennent à la science des données et au prototypage rapide. 2) L'environnement de développement de JavaScript comprend Node.js, VScode et WebPack, qui conviennent au développement frontal et back-end. Le choix des bons outils en fonction des besoins du projet peut améliorer l'efficacité du développement et le taux de réussite du projet.

See all articles

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

Video Face Swap

Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !

Afficher plus

Article chaud

Quoi de neuf dans Windows 11 KB5054979 et comment résoudre les problèmes de mise à jour

4 Il y a quelques semainesByDDD

Comment réparer KB5055523 ne parvient pas à s'installer dans Windows 11?

3 Il y a quelques semainesByDDD

Inzoi: Comment postuler à l'école et à l'université

1 Il y a quelques moisByDDD

Comment réparer KB5055518 ne parvient pas à s'installer dans Windows 10?

3 Il y a quelques semainesByDDD

Où trouver la clé du bureau du site dans Atomfall

4 Il y a quelques semainesByDDD

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Listes Sec

SecLists est le compagnon ultime du testeur de sécurité. Il s'agit d'une collection de différents types de listes fréquemment utilisées lors des évaluations de sécurité, le tout en un seul endroit. SecLists contribue à rendre les tests de sécurité plus efficaces et productifs en fournissant facilement toutes les listes dont un testeur de sécurité pourrait avoir besoin. Les types de listes incluent les noms d'utilisateur, les mots de passe, les URL, les charges utiles floues, les modèles de données sensibles, les shells Web, etc. Le testeur peut simplement extraire ce référentiel sur une nouvelle machine de test et il aura accès à tous les types de listes dont il a besoin.