Utilizing Design Patterns for Scalable JavaScript Applications
Introduction to common JavaScript design patterns and their applications in building scalable and maintainable codebases.
0 likes
186 views
Rule Content
{
"title": "Utilizing Design Patterns for Scalable JavaScript Applications",
"description": "Introduction to common JavaScript design patterns and their applications in building scalable and maintainable codebases.",
"category": "JavaScript Cursor Rules",
"rules": [
{
"name": "Module Pattern",
"description": "Encapsulate related functions and variables into a single unit to prevent global namespace pollution and promote modularity.",
"example": "const Module = (function () {\n let privateVar = 'I am private';\n function privateMethod() {\n console.log(privateVar);\n }\n return {\n publicMethod() {\n privateMethod();\n },\n };\n})();\nModule.publicMethod(); // Output: I am private"
},
{
"name": "Singleton Pattern",
"description": "Ensure a class has only one instance and provide a global point of access to it, useful for shared resources like configuration settings.",
"example": "const Singleton = (function () {\n let instance;\n function createInstance() {\n return { name: 'Singleton Instance' };\n }\n return {\n getInstance: function () {\n if (!instance) {\n instance = createInstance();\n }\n return instance;\n },\n };\n})();\nconst instance1 = Singleton.getInstance();\nconst instance2 = Singleton.getInstance();\nconsole.log(instance1 === instance2); // Output: true"
},
{
"name": "Factory Pattern",
"description": "Define an interface for creating objects, allowing subclasses to alter the type of objects that will be created, promoting flexibility in object creation.",
"example": "class Car {\n constructor(model) {\n this.type = 'Car';\n this.model = model;\n }\n}\nclass Bike {\n constructor(model) {\n this.type = 'Bike';\n this.model = model;\n }\n}\nclass VehicleFactory {\n static createVehicle(type, model) {\n if (type === 'car') return new Car(model);\n if (type === 'bike') return new Bike(model);\n throw new Error('Unknown vehicle type');\n }\n}\nconst tesla = VehicleFactory.createVehicle('car', 'Tesla');\nconsole.log(tesla); // Output: Car { type: 'Car', model: 'Tesla' }"
},
{
"name": "Observer Pattern",
"description": "Establish a one-to-many dependency between objects so that when one object changes state, all its dependents are notified and updated automatically.",
"example": "class Subject {\n constructor() {\n this.observers = [];\n }\n subscribe(observer) {\n this.observers.push(observer);\n }\n notify(data) {\n this.observers.forEach(observer => observer.update(data));\n }\n}\nclass Observer {\n constructor(name) {\n this.name = name;\n }\n update(data) {\n console.log(`${this.name} received: ${data}`);\n }\n}\nconst newsChannel = new Subject();\nconst subscriber1 = new Observer('Alice');\nconst subscriber2 = new Observer('Bob');\nnewsChannel.subscribe(subscriber1);\nnewsChannel.subscribe(subscriber2);\nnewsChannel.notify('Breaking News!'); // Output: Alice received: Breaking News!; Bob received: Breaking News!"
},
{
"name": "Decorator Pattern",
"description": "Dynamically add behavior to objects without modifying their structure, allowing for flexible and reusable code enhancements.",
"example": "function withTimestamp(func) {\n return function(message) {\n func(`[${new Date().toISOString()}] ${message}`);\n };\n}\nconst log = console.log;\nconst logWithTimestamp = withTimestamp(log);\nlogWithTimestamp('Hello, World!'); // Output: [2024-12-14T12:00:00.000Z] Hello, World!"
}
]
}