Skip to content

Instantly share code, notes, and snippets.

@teddykishi
Forked from holmberd/cart-example.js
Created January 19, 2021 21:43
Show Gist options
  • Save teddykishi/3065e06fb9f48dfa791a94b3f6e98f5d to your computer and use it in GitHub Desktop.
Save teddykishi/3065e06fb9f48dfa791a94b3f6e98f5d to your computer and use it in GitHub Desktop.
Cart pub-sub example
/** Quick and dirty Cart pub/sub example */
class CartStore {
add(item) {}
remove(index) {}
update(index, item) {}
get(index) {}
getAll() {}
}
class CartService {
constructor(eventEmitter, CartStore) {
this.cartStore = new CartStore();
this.events = eventEmitter;
}
init() {}
updateRequest() {
this.notify();
}
remove(item) {
this.store.add(item);
this.notify('remove', item);
}
notify(event, data) {
// either send individual events, depends on the level of granularity the subscribers depends on.
if (event) {
return this.events.emit(event, data);
}
return this.events.emit('updated', this.store.getAll());
}
}
class CartListController {
constructor(service, cartList) {
this.service = service;
this.cartList = cartList;
}
init() {
this.service.updateRequest();
this.loadEventListeners();
}
loadEventListeners() {
this.cartList.addEventListener('removeItem', e => {
return this.remove(index);
});
}
remove(index) {
this.service.remove(e.detail.index);
}
}
/* Class representing a Cart Item Component */
class CartItem extends HTMLELement {
constructor() {
super();
}
get title() {}
set title() {}
set price() {}
get price() {}
remove() {}
}
/* Class representing a Cart List Component */
class CartList extends HTMLELement {
constructor(service) {
super();
this.service = service;
}
// Element inserted into DOM.
connectedCallback() {
this.service.events.on('update', this.render);
this.loadEventListners();
}
// Element removed from DOM.
disconnectedCallback() {
// Prevent memory leak when component is destroyed.
this.service.events.removeListener('update', this.render);
}
loadEventListeners() {
this.removeButton.addEventListener('click', e => {
return this.dispatchEvent(new CustomEvent('removeItem', {
detail: {
index: e.dataset.index,
},
bubbles: true
}));
});
}
get removeButton() {
return this.querySelector('.remove-button');
}
getAll() {
return Array.prototype.slice.call(this.children);
}
update(items) {
this.render(items);
}
get() {}
remove() {}
render() {}
}
class App {
constructor() {
this.events = new EventEmitter();
this.cartService = new CartService(this.events);
}
init() {
this.cartservice.init();
}
}
var app = new App();
app.init();
var cartList = new CartList(app.cartService);
var cartListController = new CartListController();
cartListController.init();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment