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!"
    }
  ]
}