zJaaal
commented
3 months ago JavaScript Design Patterns
Time spent: 37 minutes
What did I learned?
At the moment I learned about the first 2 principles of SOLID and created 2 JS Snippets that work as example for both.
S (Single Responsibility Principle)
All classes should have one responsibility and not mix responsibility. We should avoid the creation of a God Object and apply the Separation of Concerns Principle
import fs from 'fs';
// A class should have one responsibility in this case manage a Journal
class Journal {
constructor() {
this.entries = [];
this.count = 0;
}
addEntry(text) {
this.entries.push(`${++this.count}: ${text}`);
return this.count;
}
removeEntry(index) {
this.entries.splice(index, 1);
}
toString() {
return this.entries.join('\n');
}
// Since all the operations that are below this comment are related and probably will have the same behavior, they could be in another class.
// This is an antipattern because we are mixing responsibilities, Journal should only manage entries
// save(filename) {
// fs.writeFileSync(filename, this.toString());
// }
// // This is an antipattern because we are mixing responsibilities, Journal should only manage entries
// load(filename) {
// // Load from file
// }
// // This is an antipattern because we are mixing responsibilities, Journal should only manage entries
// loadFromWeb(url) {
// // Load from web
// }
}
// This class should be responsible for saving and loading the journal
// Also this way we apply the separation of concerns principle and avoid th God object antipattern
class PersistenceManager {
preprocess(j) {
// Do something
}
saveToFile(journal, filename) {
fs.writeFileSync(filename, journal.toString());
}
}
let j = new Journal();
j.addEntry('I started a course today.');
j.addEntry('I am learning about design patterns.');
console.log(j.toString());
let p = new PersistenceManager();
let filename = 'journal.txt';
// Dont want to run this, is just for the example
// p.saveToFile(j, filename);
O (Open and Closed Principle)
All classes should be opened for extension and closed for modification. This means that once a Class is created, tested and deployed we should avoid the modification of it and instead design it and write it in a way that we could extend it without modifying the base class.
And it states that we should avoid the space explosion anti-pattern. Which means that if we let a class open for modification, we can end with a class that covers infinite cases in infinite methods and infinite properties, as the example shows in the ProductsFilter class
// Just enums to handle constants
let Color = Object.freeze({
red: 'red',
green: 'green',
blue: 'blue'
});
let Size = Object.freeze({
small: 'small',
medium: 'medium',
large: 'large'
});
// Class that represents a product
class Product {
constructor({ name, color, size }) {
this.name = name;
this.color = color;
this.size = size;
}
}
// Objects are open for extension but closed for modification.
class ProductFilter {
// This class represents the anti-pattern of the open-closed principle
filterByColor(products, color) {
return products.filter((p) => p.color === color);
}
// This is modifying the class, we should avoid this
filterBySize(products, size) {
return products.filter((p) => p.size === size);
}
// This is modifying the class, we should avoid this
filterBySizeAndColor(products, size, color) {
return products.filter((p) => p.size === size && p.color === color);
}
// State space explosion, with more and more criteria the number of methods grows exponentially
// 3 criteria = 7 methods
// color
// size
// price
// size and color
// size and price
// color and price
// size and color and price
// ...
}
// Criterias
// This way we don't need to modify the BetterFilter class to add new criterias
class ColorSpecification {
constructor(color) {
this.color = color;
}
isSatisfied(item) {
return item.color === this.color;
}
}
class SizeSpecification {
constructor(size) {
this.size = size;
}
isSatisfied(item) {
return item.size === this.size;
}
}
// Combinator
// This way we can combine criterias
class AndSpecification {
constructor(...specs) {
this.specs = specs;
}
isSatisfied(item) {
return this.specs.every((spec) => spec.isSatisfied(item));
}
}
// Better filter, that is open for extension but closed for modification
class BetterFilter {
filter(items, spec) {
return items.filter((item) => spec.isSatisfied(item));
}
}
// init products
let products = [
{
name: 'Apple',
color: Color.green,
size: Size.small
},
{
name: 'Tree',
color: Color.green,
size: Size.large
},
{
name: 'House',
color: Color.blue,
size: Size.large
}
].map((p) => new Product(p));
let pf = new ProductFilter();
console.log('Green products (old):');
for (let p of pf.filterByColor(products, Color.green)) {
console.log(`* ${p.name} is green`);
}
// With this approach we can add new criterias without modifying the BetterFilter class
let bf = new BetterFilter();
let colorSpec = new ColorSpecification(Color.green);
console.log('Green products (new):');
for (let p of bf.filter(products, colorSpec)) {
console.log(`* ${p.name} is green`);
}
let sizeSpec = new SizeSpecification(Size.large);
console.log('Large and Green products:');
// Combine color and size Specifications
let andSpec = new AndSpecification(colorSpec, sizeSpec);
for (let p of bf.filter(products, andSpec)) {
console.log(`* ${p.name} is large and green`);
}
I'll be doing this Udemy Course and tracking my progress in the way using this ticket