Articulo anterior Module Pattern #3 – getters y setters
Como una practica sencilla aqui va lo que seria una base de como implementar un carrito de la compra en javascript. Se pone en practica lo visto hasta ahora sobre module pattern.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>javascript object in detail</title>
</head>
<body>
<div id="fb"></div>
<script>
//carritoModulo tendrá tres métodos: addItem(), itemsLength(), getItem()
var carritoModulo = (function(){
var carrito = []; //variable privada
return {
//parte pública
addItem : function (valores) {
carrito.push(valores);
console.log('El producto se ha añadido correctamente.');
},
itemsLength : function () {
return carrito.length;
},
getItem : function(indice) {
if (indice <= this.itemsLength() ) {
return carrito[indice];
}
},
muestraCarrito : function(capaID){
var capa = document.getElementById(capaID);
var txtCapa = "";
var longitud = this.itemsLength();
while (longitud--) {
txtCapa += '<p>' + this.getItem(longitud).articulo + ': ' + this.getItem(longitud).precio + '</p>' ;
}
capa.innerHTML = txtCapa;
}
};
}());
carritoModulo.addItem({articulo:'mermelada',precio:'3 €'});
carritoModulo.addItem({articulo:'café',precio:'4.5 €'});
console.log( 'El carrito tiene '+ carritoModulo.itemsLength() + ' productos' );
carritoModulo.muestraCarrito('fb');
//carritoModulo.carrito; //daría error
</script>
</body>
</html>
Aqui puedes ver el ejemplo funcionando
Ver Pen carrito de la compra por Aitor Alejandro (@aitoralejandro) on CodePen.
