JavaScript Object-oriented writing cart features _javascript tips

Source: Internet
Author: User

The previous project requires a function of buying and paying for data items, the beginning has been afraid to use object-oriented writing, mainly is not clear thinking, and at that time the complexity of the data commodity, has not dared to move, on the Internet also find some object-oriented style, the idea of a clear, just want to try to write.

Next I will step by step analysis, object-oriented writing process. The whole process is roughly divided into:
1. First, define the data form of a commodity list and the total number of merchandise, similar to:

var data = [{name: ' name ', Unitprice:10, num:2}];
var total = {type:0, totalnum:0, price:0}; 

Clearly in the data array name denotes a single product name, UnitPrice represents the unit price of a single item, num represents the number of individual items, and type in the Total object represents the product category, the Totalnum represents the overall quantity of the product, and price represents the product total.

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 item, and then you need to put this info in the data array and compute the total number of items, so you need to set two methods for this function object. Just add two methods below the This.info:

This.add ();
This.gettotal ();
here to explain why the two methods are placed in the prototype of the function object, when the new one to instantiate the object, you need to immediately add this product information and calculate the total number of items, so there is no need to use this instantiation object to invoke the two methods.

The prototype property of the object is then used to call the method in this property, as follows:

Shoppingcart.prototype = {
  //Add commodity
  add:function () {
    var _this = this;
    Data.push (_this.info); 
  },
  //Total set of merchandise
  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, there will be added to delete a single product, in the prototype attribute and then add the method of deleting the goods, delete the goods need to be based on a logo to delete the specified goods, here I delete the name value, then need a way to the date array to find the corresponding name of the product, as follows:

Delete commodity
delect:function () {
  var _this = this;
  Data.splice (_this.check (_this.name), 1);
  _this.gettotal ();
check:function (name
) {for
  (var i = 0; i < data.length; i++) {
    if (name = = Data[i].name) return i
  }
}

4, modify the number of individual goods, as follows:

Modify the number of individual items
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 number of items you specify.

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;

 }
  }
}

This data array can be initialized with data from the background, but must have the same data form and definition, and call the Gettotal method to get the total set of merchandise.

The last is a simple new instantiation, for example:

var goods1 = new ShoppingCart (' 123 ', MB, 2)
var goods2 = new ShoppingCart (' 456 ', ten, 3)
var goods3 = new Shoppi Ngcart (' 789 ', 1, 4)

goods2.delect ();
Good3.changenum (2)
goods2 = new ShoppingCart (' 1234 ', one, 1)
goods2.changenum (0)

You can print data and total to see the results \ (^o^)/~

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.