Utilizing Design Patterns for Scalable JavaScript Applications
Introduction to common JavaScript design patterns and their applications in building scalable and maintainable codebases.
0 likes
10 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!" } ] }