Здесь у меня есть один простой пример концепции закрытия, который мы можем использовать на нашем сайте электронной коммерции или многих других. Я добавляю ссылку jsfiddle с примером. он содержит небольшой список товаров из 3 предметов и один счетчик корзины.
//Counter clouser implemented function;
var CartCouter = function(){
var counter = 0;
function changeCounter(val){
counter += val
}
return {
increment: function(){
changeCounter(1);
},
decrement: function(){
changeCounter(-1);
},
value: function(){
return counter;
}
}
}
var cartCount = CartCouter();
function updateCart(){
document.getElementById('cartcount').innerHTML = cartCount.value();
}
var productlist = document.getElementsByClassName('item');
for(var i = 0; i< productlist.length; i++){
productlist[i].addEventListener('click',function(){
if(this.className.indexOf('selected')<0){
this.className += " selected";
cartCount.increment();
updateCart();
} else{
this.className = this.className.replace("selected", "");
cartCount.decrement();
updateCart();
}
})
}
.productslist{
padding:10px;
}
ul li{
display: inline-block;
padding: 5px;
border: 1px solid #ddd;
text-align: center;
width: 25%;
cursor: pointer;
}
.selected{
background-color: #7CFEF0;
color: #333;
}
.cartdiv{
position: relative;
float:right;
padding: 5px;
box-sizing: border-box;
border: 1px solid #f1f1f1;
}
Practical Use of JavaScript Closure consept/private variable.
0
- Product 1
- Product 2
- Product 3