function getByClass(cName, obj) { var o = null; if (arguments.length == 2) { o = obj; } else { o = document; } var allNode = o.getElementsByTagName("*"); var aNode = []; for( var i = 0 ; i < allNode.length; i++ ){ if( allNode[i].className == cName ){ aNode.push( allNode[i] ); } } return aNode; } function getSubTotal( unitPrice, goodsNum ){ return unitPrice * goodsNum; } function getSum(){ //计算总花费 var aSubtotal = getByClass("subtotal"); var res = 0; for( var i = 0; i < aSubtotal.length; i++ ){ res += parseInt(aSubtotal[i].innerHTML); } return res; } function compareUnit() { //比单价，找出最高的单价 var aNum = getByClass( "num"); var aUnit = getByClass( "unit"); var temp = 0; for( var i = 0; i < aNum.length; i++ ){ if( parseInt(aNum[i].innerHTML) != 0 ){ if( temp < parseInt(aUnit[i].innerHTML) ) { temp = parseInt(aUnit[i].innerHTML); } } } return temp; } window.onload = function () { var aInput = document.getElementsByTagName("input"); var total = 0; var oGoodsNum = document.getElementById("goods-num"); var oTotalPrice = document.getElementById("total-price"); var oUnitPrice = document.getElementById("unit-price"); for (var i = 0; i < aInput.length; i++) { if (i % 2 != 0) { //加号 aInput[i].onclick = function () { //当前加号所在行的数量 var aNum = getByClass( "num", this.parentNode ); var n = parseInt( aNum[0].innerHTML ); n++; aNum[0].innerHTML = n; //获取单价 var aUnit = getByClass( "unit", this.parentNode ); var unitPrice = parseInt(aUnit[0].innerHTML); var subtotal = getSubTotal( unitPrice, n ); var aSubtotal = getByClass( "subtotal", this.parentNode ); aSubtotal[0].innerHTML = subtotal; total++; //商品总数 oGoodsNum.innerHTML = total; oTotalPrice.innerHTML = getSum(); oUnitPrice.innerHTML = compareUnit(); } }else { aInput[i].onclick = function(){ var aNum = getByClass( "num", this.parentNode ); if ( parseInt( aNum[0].innerHTML ) != 0 ){ var n = parseInt( aNum[0].innerHTML ); n--; aNum[0].innerHTML = n; //获取单价 var aUnit = getByClass( "unit", this.parentNode ); var unitPrice = parseInt(aUnit[0].innerHTML); var subtotal = getSubTotal( unitPrice, n ); var aSubtotal = getByClass( "subtotal", this.parentNode ); aSubtotal[0].innerHTML = subtotal; total--; //商品总数 oGoodsNum.innerHTML = total; oTotalPrice.innerHTML = getSum(); oUnitPrice.innerHTML = compareUnit(); } } } } }
耦合度太高，可维护性很差.
重构之后的购物车:
window.onload = function () { var Event = { userList: {}, subscribe: function (key, fn) { if (!this.userList[key]) { this.userList[key] = []; } this.userList[key].push(fn); }, publish: function () { var key = Array.prototype.shift.apply(arguments), fns = this.userList[key]; if (!fns || fns.length === 0) { return false; } for (var i = 0, len = fns.length; i < len; i++) { fns[i].apply(this, arguments); } } }; (function(){ var aBtnMinus = document.querySelectorAll( "#box li>input:first-child"), aBtnPlus = document.querySelectorAll( "#box li>input:nth-of-type(2)"), curNum = 0, curUnitPrice = 0; for( var i = 0, len = aBtnMinus.length; i < len; i++ ){ aBtnMinus[i].index = aBtnPlus[i].index = i; aBtnMinus[i].onclick = function(){ (this.parentNode.children[1].innerHTML > 0) && Event.publish( "total-goods-num-minus" ); --this.parentNode.children[1].innerHTML < 0 && (this.parentNode.children[1].innerHTML = 0); curUnitPrice = this.parentNode.children[4].innerHTML; Event.publish( "minus-num" + this.index, parseInt( curUnitPrice ), parseInt( this.parentNode.children[1].innerHTML ) ); }; aBtnPlus[i].onclick = function(){ (this.parentNode.children[1].innerHTML >= 0) && Event.publish( "total-goods-num-plus" ); this.parentNode.children[1].innerHTML++; curUnitPrice = this.parentNode.children[4].innerHTML; Event.publish( "plus-num" + this.index, parseInt( curUnitPrice ), parseInt( this.parentNode.children[1].innerHTML ) ); } } })(); (function(){ var aSubtotal = document.querySelectorAll("#box .subtotal"), oGoodsNum = document.querySelector("#goods-num"), oTotalPrice = document.querySelector("#total-price"); Event.subscribe( 'total-goods-num-plus', function(){ ++oGoodsNum.innerHTML; }); Event.subscribe( 'total-goods-num-minus', function(){ --oGoodsNum.innerHTML; }); for( let i = 0, len = aSubtotal.length; i < len; i++ ){ Event.subscribe( 'minus-num' + i, function( unitPrice, num ){ aSubtotal[i].innerHTML = unitPrice * num; }); Event.subscribe( 'plus-num' + i, function( unitPrice, num ){ aSubtotal[i].innerHTML = unitPrice * num; }); } })(); console.log( Event.userList ); }