购物车-面向对象_vue 面向对象购物车-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45114208/article/details/109787286

本文探讨了如何运用面向对象编程原则在JavaScript中设计一个购物车功能，特别关注了在Vue.js环境中实现这一功能的方法。内容包括创建购物车类、添加商品、更新商品数量、以及使用DOM操作来动态展示购物车内容。同时也讨论了jQuery进行DOM操作的辅助作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		thead tr{
			height: 50px;
			background-color: #00ff00; 
		}
		td{
			width: 142px;
			height: 26px;
			text-align: center;
		}
		button{
			padding: 0 6px;
		}
		#template{
			display: none;

		}
	</style>
</head>
<body>
	<table cellspacing="0" width="700px" border="1" align="center">
		<thead>
			<tr>
				<th>商品名称</th>
				<th>数量</th>
				<th>单价</th>
				<th>小计</th>
				<th>操作</th>
			</tr>
			<tbody class="shopcartbody">
				<tr id="template">
					<td class="subname"></td>
					<td>
						<button class="sub">-</button>
						<span class="count">0</span>
						<button class="add">+</button>
					</td>
					<td>
						单价:￥
						<span class="subprice"></span>
					</td>
					<td>
						小计:
						<span class="subtotal"></span>
					</td>
					<td>
						操作
						<button class="detel">删除</button>
					</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="5">
						商品一共<span class="counts">0</span>件，花费一共￥<span class="money">0</span>;
					</td>
				</tr>
			</tfoot>
		</thead>
	</table>

<script>
		let cart = {
		 	json:[
		 		{
		 			name:"锅包肉",
		 			price:40,
		 		},
		 		{
		 			name:"铁锅炖大鹅",
		 			price:100,
		 		},
		 		{
		 			name:"猪肉炖粉条",
		 			price:60,
		 		},
		 		{
		 			name:"烤乳猪",
		 			price:200,
		 		},
		 		{
		 			name:"蒸羊羔",
		 			price:100,
		 		},
		 		{
		 			name:"江米酿鸭子",
		 			price:150,
		 		}
		 	],
		 	//模板
		 	template:document.querySelector("#template"),
		 	tbody:document.querySelector(".shopcartbody"),

		 	//获取添加节点
		 	addNode:"",
		 	//获取减少节点
		 	subNode:"",
		 	//获取删除节点;
		 	delNode:"",
		 	//获取小计节点
		 	subtotal:"",
		 	//获取总数量节点
		 	countNodess:document.querySelector(".counts"),
		 	//获取总金额节点
		 	money:document.querySelector(".money"),
		 	//获取数量节点
		 	countNode:"",

		 	resultcount:0,
		 	resultmoney:0,
		 	//初始化数据
		 	init:function(){
		 		this.json.forEach((item)=>{
		 			let netItem = this.template.cloneNode(true);
		 			netItem.id = "";
		 			this.tbody.insertBefore(netItem,this.template);
		 			netItem.querySelector(".subname").innerHTML = item.name;
		 			netItem.querySelector(".subprice").innerHTML = item.price;

		 			this.addNode = document.querySelectorAll(".add");
		 			this.subNode = document.querySelectorAll(".sub");
		 			this.delNode = document.querySelectorAll(".detel");
		 			this.subtotal = document.querySelectorAll(".subtotal");
		 			this.countNode = document.querySelectorAll(".count");
		 		})
		 		this.bindEvent();
		 	},

		 	//计算总价和总数量
		 	computedTotal:function(){
		 		//每次刷新小计节点和数量节点
		 		this.subtotal = document.querySelectorAll(".subtotal");
		 		this.countNode = document.querySelectorAll(".count");

		 		this.resultcount = 0;
		 		this.resultmoney = 0;

		 		for(let i = 0; i < this.countNode.length; i++){
		 			this.resultcount += Number(this.countNode[i].innerHTML);
		 			this.resultmoney += Number(this.subtotal[i].innerHTML);
		 		}
		 		this.countNodess.innerHTML = this.resultcount;
		 		this.money.innerHTML = this.resultmoney;
		 	},


		 	// 事件处理函数
		 	bindEvent:function(){
		 		for(let i = 0; i < this.addNode.length; i++){
		 			//添加点击事件
		 			this.addNode[i].onclick = function(){
		 				this.parentNode.querySelector(".count").innerHTML = parseInt(this.parentNode.querySelector(".count").innerHTML) + 1;
		 				this.parentNode.parentNode.querySelector(".subtotal").innerHTML = this.parentNode.querySelector(".count").innerHTML * this.parentNode.parentNode.querySelector(".subprice").innerHTML;
		 				cart.computedTotal();
		 			};

		 			//减少点击事件
		 			this.subNode[i].onclick = function(){
		 				if (Number(this.parentNode.querySelector(".count").innerHTML) === 0) {
		 					return;
		 				}
		 				this.parentNode.querySelector(".count").innerHTML = parseInt(this.parentNode.querySelector(".count").innerHTML - 1);
		 				this.parentNode.parentNode.querySelector(".subtotal").innerHTML = this.parentNode.querySelector(".count").innerHTML * this.parentNode.parentNode.querySelector(".subprice").innerHTML;
		 				cart.computedTotal();
		 			};

		 			//删除点击事件
		 			this.delNode[i].onclick = function(){
		 				let nowTr = this.parentNode.parentNode;
		 				nowTr.style.opacity = 1;
		 				let o = setInterval(function(){
		 					let ol = nowTr.style.opacity;
		 					if(ol <= 0){
		 						clearInterval(o);
		 						nowTr.style.opacity = 0;
		 						nowTr.style.display = "none";
		 						nowTr.parentNode.removeChild(nowTr);
		 						cart.computedTotal();
		 						return;
		 					}
		 					nowTr.style.opacity = ol - 0.03;
		 				},16)
		 			}
		 		}
		 	},
		}
		cart.init();
	</script>
	````