In the previous project, I needed a function of purchasing data products and paying for them. At the beginning, I didn’t dare to use object-oriented writing. The main reason was that I didn’t clarify my ideas. Moreover, the data products were relatively complicated at that time, so I didn’t dare to move them. I also looked for some object-oriented writing methods online, sorted out the ideas, and wanted to try to write them by myself.
Next, I will analyze the object-oriented writing process step by step. The entire process is roughly divided into:
1. First define the data form and total product set of a product list, similar to:
var data = [{name: 'name', unitPrice: 10, num: 2}];var total = {type: 0, totalNum: 0, price: 0};It is obvious that in the data array name represents a single product name, unitPrice represents a single product unit price, num represents a single product quantity; in the total object type represents a product type, totalNum represents a total quantity of products, and price represents a total price of products.
2. Create a shopping cart function object ShoppingCart and set its corresponding properties, as follows:
function ShoppingCart (name, unitPrice, num) { this.name = name; this.unitPrice = unitPrice; this.num = num; this.info = {name: this.name,unitPrice: this.unitPrice,num: this.num};}Use an info to save the name, unit price, and quantity of a single product, and then you need to put this info into the data array and calculate the total number of products total, so you need to set two methods of this function object. Just add two methods below this.info:
this.add();
this.getTotal();
Here we want to explain why these two methods are placed in the prototype of the function object. When new instantiation object, you need to add this product information and calculate the total number of products, so there is no need to use this instantiation object to call these two methods.
Then use the object's prototype property and put all methods in this property to call it, as follows:
ShoppingCart.prototype = { // Add product add: 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. If you add, you will delete a single product. Add a method to delete the product in the prototype attribute. Deleting a product requires deleting the specified product based on a logo. Here I delete it through the name value. At this time, a method is needed to find the product corresponding to this name in the date array, as follows:
// Delete product delect: function () { var _this = this; data.splice(_this.check(_this.name), 1); _this.getTotal();},// Check product check: function (name) { for (var i = 0; i < data.length; i++) { if (name == data[i].name) return i; }}4. Modify the quantity of individual products, as follows:
// Modify the quantity of a single product changeNum: function (num) { var _this = this; if (num == 0) { _this.delect(); return; } var _index = _this.check(_this.name); data[_index].num = num; _this.getTotal();}Here you need to pass a parameter to set the specified quantity of products.
The overall code is as follows:
var data = new Array;var total = {type: 0, totalNum : 0, price:0};function ShoppingCart (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();}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; } }, delect: function () { var _this = this; data.splice(_this.check(_this.name), 1); _this.getTotal(); }, changeNum: function (num) { var _this = this; if (num == 0) { _this.delect(); return; } 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; } }}The initialization data of this data array can be data transmitted from the background, but the data form must be the same as defined, and the getTotal method must be called to obtain the total set of products.
Finally, it is simple new instantiation one by one, for example:
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 )goods2.changeNum(0)You can print data and total out of the results/(^o^)/~
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.