suchen

Heim  >  Artikel  >  Web-Frontend  >  Avalonjs implementiert eine einfache Warenkorbfunktion

Avalonjs implementiert eine einfache Warenkorbfunktion

不言
不言Original
2018-05-05 16:08:041507Durchsuche

In diesem Artikel wird hauptsächlich die Implementierung einer einfachen Warenkorbfunktion vorgestellt, die einen gewissen Referenzwert hat. Jetzt können Freunde in Not darauf verweisen.

Avalon ist das leistungsstärkste MVVM-Framework China Kürzlich haben wir in meinem letzten Warenkorbprojekt Avalon verwendet, um einige Module zu implementieren, also haben wir natürlich Avalon verwendet, um den Warenkorb zu implementieren. Als nächstes werde ich Ihnen in diesem Artikel den Beispielcode von Avalonjs zur Implementierung einer einfachen Warenkorbfunktion mitteilen. Freunde, die ihn benötigen, können darauf verweisen

Zuerst gebe ich Ihnen einen Kurze Einführung in das Konzept von Avalon

Avalon ist das leistungsstärkste MVVM-Framework in China. Obwohl das Taobao KISSY-Team auch zwei MVVM-Frameworks entwickelt hat, haben sie alle zu nichts geführt. Es gibt nur wenige andere MVVM-Frameworks. Nur Ausländer und untätige Architekten wie ich haben Zeit, sich mit diesem Thema zu beschäftigen. Ich habe schon vor langer Zeit vorhergesagt, dass MVVM die ultimative Front-End-Lösung ist. Ich habe ein tiefes Verständnis für Shanda Pass, als ich für Shanda Wireless gearbeitet habe. Eine Geschäftslogik entspricht mehr als zehn verschiedenen Schnittstellen, und eine mehrschichtige Architektur ist unerlässlich. Daher dient die bidirektionale Bindung als Gegenmittel in Kombination mit dem seit langem beliebten MVC-Framework, um das Artefakt von MVVM abzuleiten.

Da wir kürzlich an einem Warenkorb gearbeitet haben und Avalon verwenden, um einige Module zu implementieren, verwenden wir natürlich Avalon, um den Warenkorb zu implementieren. Derzeit finden wir, dass Avalon relativ leistungsfähig ist, was viel spart Code. Menge.

Die allgemeinen Funktionen eines Einkaufswagens bestehen darin, Mengen zu addieren und zu subtrahieren, Produkte auszuwählen, Produkte zu löschen und Mengen zu berechnen. Da Avalon über eine bidirektionale Bindungsfunktion verfügt, entfallen Dom-Operationen und es muss nur die Logik vervollständigt werden Dies kann in den folgenden Schritten erreicht werden.

1. HTML-Struktur der Seite

Wir berücksichtigen hier keine guten Effekte, daher verwenden wir direkt das einfachste HTML, um es zu implementieren, hauptsächlich einschließlich Controller und Liste Schleifen. Betragsanzeige, die einfache Codestruktur ist wie folgt: 

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

Es gibt mehrere funktionale Ereignisse wie alle Auswahl, Addition, Subtraktion und Löschung. Der Betrag verwendet die Filterwährung.

2. Führen Sie avalon.js ein und definieren Sie das Modell

Es ist notwendig, js einzuführen. Nach der Einführung von avalon.js können Sie 

var vm
 = avalon.define({
  $id:
"test"
});
so ist ein einfaches Modell definiert. Die übergebene $id ist der Wert des Controllers im Beispiel dieses Artikels. Wenn Sie es nicht verstehen, können Sie auf der offiziellen Website nachsehen.

3. Definieren Sie die Produkte im Warenkorb

Im eigentlichen Projekt muss dies über den Hintergrund erfolgen, zu Demonstrationszwecken wird es direkt hier definiert. Von Anfang an können Sie der HTML-Struktur des Klicks entnehmen, dass die Artikel im Warenkorb hier arr verwenden. Als nächstes müssen Sie also arr definieren, das wie folgt definiert werden kann: 

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>

Hier definieren wir zwei Zum Testen benötigen wir einen Wert. Fügen Sie hier ein ausgewähltes Attribut zum Modell hinzu. Der Typ ist ausgewählt:[]

4 . Definieren Sie das Modell und die Methode zum Auswählen aller

Einkaufswagen haben im Allgemeinen die Funktion, alle auszuwählen, aber die Ausdrucksform ist anders, dann können Sie es wie folgt definieren 

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=[];
 }
}
Verwenden Sie das checkAllbool-Attribut, um zu implementieren und zu bestimmen, ob „Alle auswählen“ ausgewählt ist. Um alle auszuwählen oder die Auswahl aufzuheben, wird tatsächlich das ausgewählte Attribut im Modell geändert. Wenn ausgewählt ist, wird niemand ausgewählt Das muss ausgewählt werden. Geben Sie einfach den entsprechenden Wert in das ausgewählte Array ein, da das Kontrollkästchen in HTML mithilfe von ms-duplex gebunden ist und das gebundene Attribut das ausgewählte Attribut ist.

4. Definieren Sie die Methoden der Addition, Subtraktion und Löschung

Addition und Subtraktion sind hauptsächlich Mengenänderungen, während die Löschung erfordert, dass das Produkt direkt aus arr entfernt wird (zuvor) Löschen Sie 

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();
}
in den definierten Attributen.) Es gibt auch eine Methode, die ausgeführt wird, wenn sich das Eingabefeld ändert. Der Vorgang wird durch Betreten und Verlassen des Objekts ausgeführt. Sie können sich den HTML-Code ansehen Erster Schritt und Sie werden verstehen, ob es sich um Änderungen, Additionen oder Subtraktionen handelt, vm.cal muss am Ende den Gesamtbetrag berechnen, der unten erläutert wird.

Die Additions- und Subtraktionsmethoden sind sehr einfach. Ändern Sie einfach das Num-Attribut, um zu bestimmen, ob die Eingabe eine Zahl ist.

5. Definieren Sie die Berechnung der Gesamtmenge

Die Methode zur Berechnung der Gesamtmenge ist sehr einfach, das heißt, Sie multiplizieren die Menge aller ausgewählten Produkte mit der Stückpreis und addieren Sie sie, aber hier gibt es eine andere Methode, die darin besteht, das entsprechende Produkt über die Produkt-ID zu finden, damit die Menge des Produkts berechnet werden kann. 

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;
}
Hier wird hauptsächlich eine Schleife verwendet. Suchen Sie das Objekt des Produkts, berechnen Sie dann die Menge des Produkts und addieren Sie es. Der Code ist etwas länger.

6. Überwachungsattribute

    需要监听两个属性，那就是 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框架，在后面的日子里应用更多的场景。


Das obige ist der detaillierte Inhalt vonAvalonjs implementiert eine einfache Warenkorbfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：JS implementiert das dynamische Hinzufügen von Ereignissen zu BeschriftungssteuerelementenNächster Artikel：JS implementiert das dynamische Hinzufügen von Ereignissen zu Beschriftungssteuerelementen

In Verbindung stehende Artikel

Mehr sehen