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:'商品1'
},
{
id:2,
num:1,
price:8.8,
text:'商品2'
}<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 cecicheckAllbool
: 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=[];
}
}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) Supprimezplus:
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();
}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
= '',
_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. 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:'商品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> <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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
