先做数据，再做功能，最后界面

var goods = [
  {
    pic: './assets/g1.png',
    title: '椰云拿铁',
    desc: `1人份【年度重磅，一口吞云】

    √原创椰云topping，绵密轻盈到飞起！
    原创瑞幸椰云™工艺，使用椰浆代替常规奶盖
    打造丰盈、绵密，如云朵般细腻奶沫体验
    椰香清甜饱满，一口滑入口腔
    
    【饮用建议】请注意不要用吸管，不要搅拌哦~`,
    sellNumber: 200,
    favorRate: 95,
    price: 32,
  },]

数据中缺少商品数量，两种做法

第一种：

给数组每一项去加上一个属性，好处是不用新开内存空间了

坏处是修改了原始数据

第二种：

新创建一个uiGoods对象，将原始数据当做参数传进去

UIGoods: {
    data: goods,
    choose: 0  //选择的商品数量
}

function createUIGoods (g) {
	return {
		data: g,
		choose: 0
	};
}

let uigoods = createUIGoods(goods[0]);

console.log(uigoods);

思考，我们现在需要创建对象，构造函数是专门用来创造对象的，所以用构造函数来做

function UIGoods (g) {
	this.data = g;
	this.choose = 0
}

let uig = new UIGoods(goods[0]);

console.log(uig);

NumberBox数字输入框，商品选中的问题

数量大于0，就显示减号和数量

数量等于0，只显示加号

商品总价应该怎么写？作为属性传递还是函数调用？

属性传递，会造成数据冗余

作为函数传递，会增加代码复杂性

是否选中

封装成es6的类


/**
 *单件商品的数据
 * @class UIGoods
 */
class UIGoods{
	constructor(g) {
		this.data = g;
		this.choose = 2;
	}

	/**
	 *获取总价
	 * @return {*} 
	 * @memberof UIGoods
	 */
	getTotalPrice () {
		return this.data.price * this.choose;
	}
	
	/**
	 *是否选中此商品
	 * @return {*} 
	 * @memberof UIGoods
	 */
	isChoose () {
		return this.choose > 0;
	}
}

let uig = new UIGoods(goods[0]);
console.log(uig);

商品数量的增减用函数做，考虑库存

如果需求有变动，库存可能只有10个，一直加超过库存如何处理？

整个界面的数据

把之前封装好的单个数据拿过来，添加配送门槛和配送费

class UIData {
	constructor() {
		const uiGoods = [];
		for (let i = 0; i < goods.length; i++) {
			let uig = new UIGoods(goods[i]);
			uiGoods.push(uig);
		}
		this.uiGoods = uiGoods;
		/* 配送门槛 */
		this.deliveryThreshold = 30;
		/* 配送费 */
		this.deliveryPrice = 5;
		console.log(uiGoods);
	}
}

const ui = new UIData();

面向对象写法，计算商品总价

/**
	 * 增加某件商品的数量
	 * @param {*} index 下标
	 * @memberof UIData
	 */
	increase (index) {
		this.uiGoods[index].increase();
	}

	/**
	 * 减少某件商品的选中数量
	 * @param {*} index 下标
	 * @memberof UIData
	 */
	decrease (index) {
		this.uiGoods[index].decrease();
	}