之前的项目中需要一个购买数据商品并付款的功能,刚开始一直不敢使用面向对象的写法,主要是没有理清思路,而且那时的数据商品比较的复杂,就一直没敢动,在网上也找些面向对象的写法,把思路理清一遍,就想自己试着写写。
接下来我会一步一步分析,面向对象的写法过程。整个流程大致分为:
1、先定义好一个商品列表的数据形式和商品总数集,类似:
var data = [{name: 'name', unitPrice: 10, num: 2}]; var total = {type: 0, totalNum: 0, price: 0};
很明显在 data 数组里 name 表示单个商品名称,unitPrice 表示单个商品单价,num 表示单个商品数量;在 total 对象里 type 表示商品种类、totalNum 表示商品总数量、price 表示商品总价。
2、创建一个购物车的函数对象 ShoppingCart,并设置它的相应属性,如下:
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}; }
用一个 info 来把单个商品的名称、单价、数量保存起来,然后需要把这个 info 放到 data 数组里并且计算商品总数集 total,所以就需要设置这个函数对象的两个方法。就在 this.info 下面添加两个方法:
this.add();
this.getTotal();
这里要说明一下,为什么要把这两个方法放在函数对象的原型里,当 new 一个实例化对象时,就需要马上添加这个商品信息和计算商品总数集,所以没必要再用这个实例化对象调用这两个方法。
然后使用对象的 prototype 属性,把方法都放在这个属性里来调用,如下:
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; } } }
3、有添加就会有删除单个商品,就在 prototype 属性里再添加删除商品的方法,删除商品需要依据一个标识来删除指定的商品,这里我通过 name 值来删除,这时就需要一个方法去 date 数组里找对应这个 name 的商品,如下:
// 删除商品 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、修改单个商品数量,如下:
// 修改单个商品的数量 changeNum: function (num) { var _this = this; if (num == 0) { _this.delect(); return; } var _index = _this.check(_this.name); data[_index].num = num; _this.getTotal(); }
这里需要传一个参数,来设置指定的商品的数量。
整体代码如下:
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; } } }
这个 data 数组初始化数据可以是从后台传过来的数据,但是必须数据形式和定义的一样,并且要调用一下 getTotal 这个方法获取商品总数集。
最后就是简单的 new 一个个实例化,例如:
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)
自行可以把 data 和 total 打印出来看看结果\(^o^)/~
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。
JavaScript面向对象编写购物车功能
- Author -
yu.l声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@