Avalonjs implementiert eine einfache Warenkorbfunktion-js-Tutorial-php.cn

Heim

Web-Frontend

js-Tutorial

Avalonjs implementiert eine einfache Warenkorbfunktion

不言

May 05, 2018 pm 04:08 PM

javascript购物车

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

Verwandter Artikel

Hinter den Kulissen: Welche Sprache macht JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript wird in Browsern und Node.js -Umgebungen ausgeführt und stützt sich auf die JavaScript -Engine, um Code zu analysieren und auszuführen. 1) abstrakter Syntaxbaum (AST) in der Parsenstufe erzeugen; 2) AST in die Kompilierungsphase in Bytecode oder Maschinencode umwandeln; 3) Führen Sie den kompilierten Code in der Ausführungsstufe aus.

Die Zukunft von Python und JavaScript: Trends und VorhersagenApr 27, 2025 am 12:21 AM

Zu den zukünftigen Trends von Python und JavaScript gehören: 1. Python wird seine Position in den Bereichen wissenschaftlicher Computer und KI konsolidieren. JavaScript wird die Entwicklung der Web-Technologie fördern. Beide werden die Anwendungsszenarien in ihren jeweiligen Bereichen weiter erweitern und mehr Durchbrüche in der Leistung erzielen.

Python vs. JavaScript: Entwicklungsumgebungen und ToolsApr 26, 2025 am 12:09 AM

Sowohl Python als auch JavaScripts Entscheidungen in Entwicklungsumgebungen sind wichtig. 1) Die Entwicklungsumgebung von Python umfasst Pycharm, Jupyternotebook und Anaconda, die für Datenwissenschaft und schnelles Prototyping geeignet sind. 2) Die Entwicklungsumgebung von JavaScript umfasst Node.JS, VSCODE und WebPack, die für die Entwicklung von Front-End- und Back-End-Entwicklung geeignet sind. Durch die Auswahl der richtigen Tools nach den Projektbedürfnissen kann die Entwicklung der Entwicklung und die Erfolgsquote der Projekte verbessert werden.

Ist JavaScript in C geschrieben? Prüfung der BeweiseApr 25, 2025 am 12:15 AM

Ja, der Motorkern von JavaScript ist in C. 1) Die C -Sprache bietet eine effiziente Leistung und die zugrunde liegende Steuerung, die für die Entwicklung der JavaScript -Engine geeignet ist. 2) Die V8-Engine als Beispiel wird sein Kern in C geschrieben, wobei die Effizienz und objektorientierte Eigenschaften von C kombiniert werden.

JavaScripts Rolle: das Web interaktiv und dynamisch machenApr 24, 2025 am 12:12 AM

JavaScript ist das Herzstück moderner Websites, da es die Interaktivität und Dynamik von Webseiten verbessert. 1) Es ermöglicht die Änderung von Inhalten, ohne die Seite zu aktualisieren, 2) Webseiten durch DOMAPI zu manipulieren, 3) Komplexe interaktive Effekte wie Animation und Drag & Drop, 4) die Leistung und Best Practices optimieren, um die Benutzererfahrung zu verbessern.

C und JavaScript: Die Verbindung erklärteApr 23, 2025 am 12:07 AM

C und JavaScript erreichen die Interoperabilität durch WebAssembly. 1) C -Code wird in das WebAssembly -Modul zusammengestellt und in die JavaScript -Umgebung eingeführt, um die Rechenleistung zu verbessern. 2) In der Spieleentwicklung kümmert sich C über Physik -Engines und Grafikwiedergabe, und JavaScript ist für die Spiellogik und die Benutzeroberfläche verantwortlich.

Von Websites zu Apps: Die verschiedenen Anwendungen von JavaScriptApr 22, 2025 am 12:02 AM

JavaScript wird in Websites, mobilen Anwendungen, Desktop-Anwendungen und serverseitigen Programmierungen häufig verwendet. 1) In der Website -Entwicklung betreibt JavaScript DOM zusammen mit HTML und CSS, um dynamische Effekte zu erzielen und Frameworks wie JQuery und React zu unterstützen. 2) Durch reaktnatives und ionisches JavaScript wird ein plattformübergreifendes mobile Anwendungen entwickelt. 3) Mit dem Elektronenframework können JavaScript Desktop -Anwendungen erstellen. 4) Node.js ermöglicht es JavaScript, auf der Serverseite auszuführen und unterstützt hohe gleichzeitige Anforderungen.

Python gegen JavaScript: Anwendungsfälle und Anwendungen verglichenApr 21, 2025 am 12:01 AM

Python eignet sich besser für Datenwissenschaft und Automatisierung, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python funktioniert in Datenwissenschaft und maschinellem Lernen gut und unter Verwendung von Bibliotheken wie Numpy und Pandas für die Datenverarbeitung und -modellierung. 2. Python ist prägnant und effizient in der Automatisierung und Skripten. 3. JavaScript ist in der Front-End-Entwicklung unverzichtbar und wird verwendet, um dynamische Webseiten und einseitige Anwendungen zu erstellen. 4. JavaScript spielt eine Rolle bei der Back-End-Entwicklung durch Node.js und unterstützt die Entwicklung der Vollstapel.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Assassin's Creed Shadows: Seashell Riddle -Lösung

1 Monate vorByDDD

Was ist neu in Windows 11 KB5054979 und wie Sie Update -Probleme beheben

3 Wochen vorByDDD

Wo kann man die Kransteuerungsschlüsselkarten in Atomfall finden

1 Monate vorByDDD

Wie kann ich KB5055523 in Windows 11 nicht installieren?

2 Wochen vorByDDD

Inzoi: Wie man sich für Schule und Universität bewerbt

3 Wochen vorByDDD

Heiße Werkzeuge

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!

MantisBT

Mantis ist ein einfach zu implementierendes webbasiertes Tool zur Fehlerverfolgung, das die Fehlerverfolgung von Produkten unterstützen soll. Es erfordert PHP, MySQL und einen Webserver. Schauen Sie sich unsere Demo- und Hosting-Services an.

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

SecLists

SecLists ist der ultimative Begleiter für Sicherheitstester. Dabei handelt es sich um eine Sammlung verschiedener Arten von Listen, die häufig bei Sicherheitsbewertungen verwendet werden, an einem Ort. SecLists trägt dazu bei, Sicherheitstests effizienter und produktiver zu gestalten, indem es bequem alle Listen bereitstellt, die ein Sicherheitstester benötigen könnte. Zu den Listentypen gehören Benutzernamen, Passwörter, URLs, Fuzzing-Payloads, Muster für vertrauliche Daten, Web-Shells und mehr. Der Tester kann dieses Repository einfach auf einen neuen Testcomputer übertragen und hat dann Zugriff auf alle Arten von Listen, die er benötigt.

Heiße Themen

Wo ist der Login-Zugang für Gmail-E-Mail?

7781

1644

1399

1296

1234