Im vorherigen Projekt brauchte ich eine Funktion zum Kauf von Datenprodukten und zum Bezahlen dieser. Zu Beginn habe ich es nicht gewagt, objektorientiertes Schreiben zu verwenden. Der Hauptgrund war, dass ich meine Ideen nicht geklärt habe. Darüber hinaus waren die Datenprodukte zu diesem Zeitpunkt relativ kompliziert, so dass ich es nicht gewagt habe, sie zu bewegen. Ich suchte auch nach objektorientierten Schreibmethoden online, sortierte die Ideen aus und wollte versuchen, sie selbst zu schreiben.
Als nächstes werde ich Schritt für Schritt den objektorientierten Schreibprozess analysieren. Der gesamte Prozess ist grob unterteilt in:
1. Definieren Sie zunächst das Datenformular und die Gesamtproduktsatz einer Produktliste, ähnlich wie folgt:
var data = [{name: 'name', unitprice: 10, num: 2}]; var total = {type: 0, totalnum: 0, preis: 0};Es ist offensichtlich, dass UnitPrice im Datenarray -Namen einen einzelnen Produktnamen darstellt, der einen einzelnen Produkteinheitspreis darstellt. Num repräsentiert eine einzelne Produktmenge. Im gesamten Objekttyp repräsentiert Totalnum eine Gesamtmenge von Produkten und der Preis stellt einen Gesamtpreis für Produkte dar.
2. Erstellen Sie einen Einkaufswagen -Objekt -Einkaufsbetrieb und setzen Sie seine entsprechenden Eigenschaften wie folgt fest:
Funktion ein ShoppingCart (Name, UnitPrice, num) {this.name = name; this.unitprice = unitprice; this.num = num; this.info = {name: this.name, UnitPrice: this.unitprice, num: this.num};}Verwenden Sie eine Info, um den Namen, den Einheitspreis und die Menge eines einzelnen Produkts zu speichern. Anschließend müssen Sie diese Informationen in das Datenarray einfügen und die Gesamtzahl der Produkte berechnen, sodass Sie zwei Methoden dieses Funktionsobjekts festlegen müssen. Fügen Sie einfach zwei Methoden unten hinzu.
this.add ();
this.gettotal ();
Hier möchten wir erklären, warum diese beiden Methoden im Prototyp des Funktionsobjekts platziert werden. Wenn Sie ein neues Instanziierungsobjekt haben, müssen Sie diese Produktinformationen hinzufügen und die Gesamtzahl der Produkte berechnen, sodass Sie dieses Instanziierungsobjekt nicht verwenden müssen, um diese beiden Methoden aufzurufen.
Verwenden Sie dann die Prototyp -Eigenschaft des Objekts und geben Sie alle Methoden in diese Eigenschaft ein, um sie wie folgt aufzurufen:
ShoppingCart.Prototype = {// Produkt hinzufügen add: function () {var _this = this; Data.push (_this.info); }, // Total Product Set GetTotal: function () {Total.Type = Data.length; Total.totalnum = 0; Total.Price = 0; für (var i = 0; i <data.length; i ++) {Total.totalnum+= data [i] .num; Total.Price += Daten [i] .Num * Daten [i] .unitprice; }}}3. Wenn Sie hinzufügen, löschen Sie ein einzelnes Produkt. Fügen Sie eine Methode hinzu, um das Produkt im Prototyp -Attribut zu löschen. Um ein Produkt zu löschen, muss das angegebene Produkt basierend auf einem Logo gelöscht werden. Hier lösche ich es durch den Namenswert. Zu diesem Zeitpunkt ist eine Methode erforderlich, um das Produkt zu finden, das diesem Namen im Datumsarray entspricht, wie folgt:
// Produkt löschen Delekt: function () {var _this = this; Data.SPLICE (_this.Check (_this.name), 1); _this.gettotal ();}, Produktprüfung überprüfen: Funktion (Name) {für (var i = 0; i <data.length; i ++) {if (name == data [i] .name) return i; }}4. Ändern Sie die Menge der einzelnen Produkte wie folgt:
// die Menge eines einzelnen Produktwechselns ändern: Funktion (num) {var _this = this; if (num == 0) {_this.delect (); zurückkehren; } var _index = _this.Check (_this.name); Daten [_index] .num = num; _this.gettotal ();}Hier müssen Sie einen Parameter übergeben, um die angegebene Produktmenge festzulegen.
Der Gesamtcode lautet wie folgt:
var data = new Array; var total = {type: 0, totalnum: 0, preis: 0}; Funktion coppingCart (Name, UnitPrice, num) {this.name = name; this.unitprice = unitprice; this.num = num; this.info = {name: this.name, UnitPrice: this.unitprice, num: this.num}; this.add (); this.gettotal ();} coppingCart.Prototype = {add: function () {var _this = this; Data.push (_this.info); }, GetTotal: function () {Total.Type = Data.length; Total.totalnum = 0; Total.Price = 0; für (var i = 0; i <data.length; i ++) {Total.totalnum+= data [i] .num; Total.Price += Daten [i] .Num * Daten [i] .unitprice; }}, Delect: function () {var _this = this; Data.SPLICE (_this.Check (_this.name), 1); _this.gettotal (); }, wechseln: function (num) {var _this = this; if (num == 0) {_this.delect (); zurückkehren; } var _index = _this.Check (_this.name); Daten [_index] .num = num; _this.gettotal (); }, prüfen: function (name) {for (var i = 0; i <data.length; i ++) {if (name == data [i] .name) return i; }}}Die Initialisierungsdaten dieses Datenarrays können Daten aus dem Hintergrund übertragen werden. Das Datenformular muss jedoch mit dem definierten und der Gettotal -Methode aufgerufen werden, um den Gesamtsatz von Produkten zu erhalten.
Schließlich ist es ein einfacher neuer Instanziation nacheinander, zum Beispiel:
var goods1 = neuer ShoppingCart ('123', 100, 2) var Waren2 = Neues Einkaufsbetrieb ('456', 10, 3) var Waren3 = neuer Einkaufsbetrieb ('789', 1, 4) Waren2.DELECT (); Good3.Changenum (2) Waren2 = neuer Einkaufsbetrieb ('1234', 11, 1) Waren.Sie können Daten und insgesamt aus den Ergebnissen ausdrucken/(^o^)/~
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.