我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操作，cookie，json等知识点，同时，采用三层架构方式对购物车进行设计，对javascript的综合应用较强，对javascript初学者进阶有一定的益处。
请看主页效果图：
现在读者已经对主页的效果图进行了了解，我在这里附上主页的html代码，供读者参考，建议读者根据自己的思路写代码。
请看html代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>商品列表页面</title> <!--商品列表样式表--> <link type="text/css" href="https://www.jb51.net/css/index.css" /> <!--cookie操作的js库--> <script src="https://www.jb51.net/js/cookie.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div> <h1>商品列表</h1> <div> <a href="https://www.jb51.net/cart.html" >我的购物车</a><i>0</i> </div> <div> <dl pid="1001"> <dt> <img src="https://www.jb51.net/images/p1.jpg" /> </dt> <dd>智能手表</dd> <dd>酷黑，棒，棒，棒，棒</dd> <dd>￥<span>998</span></dd> <dd> <button>添加购物车</button> </dd> </dl> <dl pid="1002"> <dt> <img src="https://www.jb51.net/images/p2.jpg" /> </dt> <dd>智能手机001</dd> <dd>金红色，酷酷酷酷</dd> <dd>￥<span>1998</span></dd> <dd> <button>添加购物车</button> </dd> </dl> <dl pid="1003"> <dt> <img src="https://www.jb51.net/images/p3.jpg" /> </dt> <dd>华为手机002</dd> <dd>帅帅帅帅帅帅帅帅帅帅</dd> <dd>￥<span>998</span></dd> <dd> <button>添加购物车</button> </dd> </dl> <dl pid="1004"> <dt> <img src="https://www.jb51.net/images/p4.jpg" /> </dt> <dd>华为手机003</dd> <dd>杠杠的</dd> <dd>￥<span>2000</span></dd> <dd> <button>添加购物车</button> </dd> </dl> </div> </div> <!-- 描述：数据访问层，操作本地数据的模块 --> <script type="text/javascript" src="https://www.jb51.net/js/server.js"></script> <!-- 描述：本页面的js操作 --> <script type="text/javascript" src="https://www.jb51.net/js/index.js"></script> </body> </html>
html结构代码有了之后，就可以对主页进行css表现设计，这里不对css进行过多讲解。
我们对主页进行设计之后，就可以进行与主页相关的DOM操作，涉及到添加按钮的点击事件，cookie和json的应用，cookie主要为了让当前数据与购物车进行共享，以方便操作。请看与之相关的javascript代码：
这是index.js代码，主要是主页的相关操作：
/* 思路： 第一步：获取所要操作的节点对象 第二步：当页面加载完后，需要计算本地cookie存了多少【个】商品，把个数赋值给ccount 第三步：为每一个商品对应的添加购物车按钮绑定一个点击事件onclick 更改本地的cookie 获取当前商品的pid 循环遍历本地的cookie转换后的数组，取出每一个对象的pid进行对比，若相等则该商品不是第一次添加 从购物车中取出该商品，然后更pCount值追加1 否则：创建一个新的对象，保存到购物中。同时该商品的数量为1 */ var ccount = document.getElementById("ccount"); //显示商品总数量的标签节点对象 var btns = document.querySelectorAll(".list dl dd button"); //所有的购物车按钮 //约定好用名称为datas的cookie来存放购物车里的数据信息 datas里所存放的就是一个json字符串 var listStr = cookieObj.get("datas"); /*判断一下本地是否有一个购物车（datas），没有的话，创建一个空的购物车，有的话就直接拿来使用*/ if(!listStr) { //没有购物车 datas json cookieObj.set({ name: "datas", value: "[]" }); listStr = cookieObj.get("datas"); } var listObj = JSON.parse(listStr); //数组 /*循环遍历数组，获取每一个对象中的pCount值相加总和*/ var totalCount = 0; //默认为0 for(var i = 0, len = listObj.length; i < len; i++) { totalCount = listObj[i].pCount + totalCount; } ccount.innerHTML = totalCount; /*循环为每一个按钮添加点击事件*/ for(var i = 0, len = btns.length; i < len; i++) { btns[i].onclick = function() { var dl = this.parentNode.parentNode; var pid = dl.getAttribute("pid");//获取自定义属性 var arrs = dl.children;//获取所有子节点 if(checkObjByPid(pid)) { listObj = updateObjById(pid, 1) } else { var imgSrc = arrs[0].firstElementChild.src; var pName = arrs[1].innerHTML; var pDesc = arrs[2].innerHTML; var price = arrs[3].firstElementChild.innerHTML; var obj = { pid: pid, pImg: imgSrc, pName: pName, pDesc: pDesc, price: price, pCount: 1 }; listObj.push(obj) listObj = updateData(listObj); } ccount.innerHTML = getTotalCount(); } }
这是cookie.js的代码，主要涉及cookie的设置获取操作，采用单例设计模式进行了封装设计，请看代码：