Dans le projet précédent, j'avais besoin d'une fonction d'achat de produits de données et de payer pour eux. Au début, je n'ai pas osé utiliser l'écriture orientée objet. La raison principale était que je n'ai pas clarifié mes idées. De plus, les produits de données étaient relativement compliqués à ce moment-là, donc je n'ai pas osé les déplacer. J'ai également trouvé des méthodes d'écriture orientées objet en ligne, trié les idées et je voulais essayer de les écrire par moi-même.
Ensuite, je vais analyser le processus d'écriture orienté objet étape par étape. L'ensemble du processus est à peu près divisé en:
1. Définissez d'abord le formulaire de données et l'ensemble de produits total d'une liste de produits, similaire à:
var data = [{name: 'name', unitprice: 10, num: 2}]; var total = {type: 0, totalnum: 0, prix: 0};Il est évident que dans le nom du tableau de données représente un seul nom de produit, UnitPrice représente un prix unitaire unique, NUM représente une seule quantité de produit; Dans le type d'objet total représente un type de produit, TotalNum représente une quantité totale de produits et le prix représente un prix total des produits.
2. Créez un objet de fonction de panier d'achat d'objet d'achat et définissez ses propriétés correspondantes, comme suit:
fonction shoppingcart (name, unitprice, num) {this.name = name; this.unitprice = unitprice; this.num = num; this.info = {nom: this.name, unitprice: this.unitprice, num: this.num};}Utilisez une information pour économiser le nom, le prix unitaire et la quantité d'un seul produit, puis vous devez mettre ces informations dans le tableau de données et calculer le nombre total de produits total, vous devez donc définir deux méthodes de cet objet de fonction. Ajoutez simplement deux méthodes en dessous de ce.info:
this.add ();
this.getTotal ();
Ici, nous voulons expliquer pourquoi ces deux méthodes sont placées dans le prototype de l'objet de fonction. Lorsque un nouvel objet d'instanciation, vous devez ajouter ces informations sur le produit et calculer le nombre total de produits, il n'est donc pas nécessaire d'utiliser cet objet d'instanciation pour appeler ces deux méthodes.
Ensuite, utilisez la propriété Prototype de l'objet et placez toutes les méthodes de cette propriété pour l'appeler, comme suit:
Shoppingcart.prototype = {// Ajouter un produit Ajouter: function () {var _This = this; data.push (_This.info); }, // Total Product Set getTotal: function () {total.type = data.length; total.totalnum = 0; TOTAL.PRICE = 0; for (var i = 0; i <data.length; i ++) {total.totalnum + = data [i] .num; TOTAL.PRICE + = DATA [I] .num * Data [i] .UnitPrice; }}}3. Si vous ajoutez, vous supprimerez un seul produit. Ajoutez une méthode pour supprimer le produit dans l'attribut Prototype. La suppression d'un produit nécessite la suppression du produit spécifié en fonction d'un logo. Ici, je le supprime via la valeur du nom. À l'heure actuelle, une méthode est nécessaire pour trouver le produit correspondant à ce nom dans le tableau de date, comme suit:
// Supprimer le produit delct: function () {var _This = this; data.splice (_This.check (_This.name), 1); _This.getTotal ();}, // Vérifier le produit Contrôle: fonction (name) {for (var i = 0; i <data.length; i ++) {if (name == data [i] .name) return i; }}4. Modifier la quantité de produits individuels, comme suit:
// Modifiez la quantité d'un seul changeur de produit: fonction (num) {var _This = this; if (num == 0) {_This.delect (); retour; } var _index = _This.check (_This.name); data [_index] .num = num; _This.getTotal ();}Ici, vous devez passer un paramètre pour définir la quantité spécifiée de produits.
Le code global est le suivant:
var data = nouveau tableau; var total = {type: 0, totalNum: 0, prix: 0}; fonction shoppingcart (nom, unitprice, num) {this.name = name; this.unitprice = unitprice; this.num = num; this.info = {nom: this.name, unitprice: this.unitprice, num: this.num}; this.add (); this.getTotal ();} shoppingcart.prototype = {add: function () {var _This = this; data.push (_This.info); }, getTotal: function () {total.type = data.length; total.totalnum = 0; TOTAL.PRICE = 0; for (var i = 0; i <data.length; i ++) {total.totalnum + = data [i] .num; TOTAL.PRICE + = DATA [I] .num * Data [i] .UnitPrice; }}, dellect: function () {var _This = this; data.splice (_This.check (_This.name), 1); _This.getTotal (); }, changeNum: fonction (num) {var _This = this; if (num == 0) {_This.delect (); retour; } var _index = _This.check (_This.name); data [_index] .num = num; _This.getTotal (); }, check: function (name) {for (var i = 0; i <data.length; i ++) {if (name == data [i] .name) return i; }}}Les données d'initialisation de ce tableau de données peuvent être des données transmises à partir de l'arrière-plan, mais le formulaire de données doit être le même que celui défini, et la méthode Gettotal doit être appelée pour obtenir l'ensemble total de produits.
Enfin, c'est une nouvelle instanciation simple une par une, par exemple:
Var Goods1 = New ShoppingCart ('123', 100, 2) Var Goods2 = New ShoppingCart ('456', 10, 3) Var Goods3 = New ShoppingCart ('789', 1, 4) Goods2.Delect (); Good3.Changenum (2) Goods2 = New ShoppingCart ('1234', 11, 1) Goods.Changenum (0)Vous pouvez imprimer des données et totalement les résultats / (^ o ^) / ~
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.