08-购物车效果

 

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

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.da