जावास्क्रिप्ट में आर्किटेक्चरल पैटर्न: कोड में कैसे न डूबें

आर्किटेक्चर उबाऊ आरेखों के बारे में क्यों नहीं है

कल्पना करें कि आप एक घर बना रहे हैं। आप बस ईंटें ढेर कर सकते हैं, कंक्रीट डाल सकते हैं और उम्मीद कर सकते हैं कि संरचना नहीं गिरेगी। या आप नींव, लोड-असर वाली दीवारें और फर्श डिज़ाइन कर सकते हैं। JavaScript-डेवलपमेंट में भी यही बात है: एक सुविचारित आर्किटेक्चर के बिना, आपका प्रोजेक्ट "स्पेगेटी कोड" में बदल जाता है, जहाँ एक फंक्शन में बदलाव पूरे एप्लिकेशन को तोड़ देता है।

आर्किटेक्चरल पैटर्न किताबों का सूखा सिद्धांत नहीं हैं। ये सिद्ध युद्ध-परीक्षित योजनाएँ हैं जो आपकी मदद करेंगी:

\n
• पागल न होना जब प्रोजेक्ट 50,000 लाइन कोड तक बढ़ जाए।
\n
• बग्स को जल्दी ढूँढना, क्योंकि कोड तार्किक ब्लॉकों में विभाजित है।
\n
• बिना डर के फीचर जोड़ना कि कुछ टूट जाएगा।
\n

इस लेख में, हम JavaScript एप्लिकेशन के लिए पाँच प्रमुख पैटर्न देखेंगे: क्लासिक MVC से लेकर मॉड्यूलर दृष्टिकोण तक। चलिए शुरू करते हैं!

MVC (Model-View-Controller): सभी पैटर्न के दादा

MVC वेब डेवलपमेंट का स्वर्ण मानक है। यह पैटर्न एप्लिकेशन को तीन परतों में विभाजित करता है:

\n
• Model — डेटा और बिज़नेस लॉजिक (CRUD, वैलिडेशन)।
\n
• View — इंटरफ़ेस जो उपयोगकर्ता देखता है (HTML, रेंडर)।
\n
• Controller — मध्यस्थ: उपयोगकर्ता के अनुरोधों को लेता है और Model या View को अपडेट करता है।
\n

कोड में यह इस तरह दिखता है:

// Model\nclass UserModel {\n    constructor() {\n        this.users = [];\n    }\n\n    addUser(user) {\n        this.users.push(user);\n    }\n\n    getUsers() {\n        return this.users;\n    }\n}\n\n// View\nclass UserView {\n    render(users) {\n        const list = document.getElementById('user-list');\n        list.innerHTML = users.map(u => `<li>${u.name}</li>`).join('');\n    }\n}\n\n// Controller\nclass UserController {\n    constructor(model, view) {\n        this.model = model;\n        this.view = view;\n    }\n\n    addUser(name) {\n        this.model.addUser({ name, id: Date.now() });\n        this.view.render(this.model.getUsers());\n    }\n}\n\n// उपयोग\nconst model = new UserModel();\nconst view = new UserView();\nconst controller = new UserController(model, view);\ncontroller.addUser('आलिसा');\ncontroller.addUser('बॉब');

JavaScript में MVC का उपयोग कब करें? मध्यम और बड़े SPA (सिंगल-पेज एप्लिकेशन) के लिए आदर्श। लेकिन सावधान रहें: यदि View Model पर बहुत अधिक निर्भर है, तो पैटर्न "Massive View Controller" में बदल जाता है — कंट्रोलर अत्यधिक फूल जाता है।

MVP (Model-View-Presenter): सख्त पर्यवेक्षक

MVP, MVC का विकास है, जहाँ Presenter View को नियंत्रित करने का सारा लॉजिक ले लेता है। MVC के विपरीत, MVP में View एक निष्क्रिय "बेवकूफ" परत है। यह केवल डेटा प्रदर्शित करती है और Presenter को इवेंट भेजती है।

// Model (MVC जैसा ही)\nclass UserModel {\n    constructor() {\n        this.users = [];\n    }\n    addUser(user) { this.users.push(user); }\n    getUsers() { return this.users; }\n}\n\n// View — निष्क्रिय इंटरफ़ेस\nclass UserView {\n    constructor() {\n        this.list = document.getElementById('user-list');\n        this.addButton = document.getElementById('add-btn');\n    }\n\n    bindAddUser(handler) {\n        this.addButton.addEventListener('click', () => {\n            const name = prompt('नाम दर्ज करें:');\n            if (name) handler(name);\n        });\n    }\n\n    render(users) {\n        this.list.innerHTML = users.map(u => `<li>${u.name}</li>`).join('');\n    }\n}\n\n// Presenter — एप्लिकेशन का मस्तिष्क\nclass UserPresenter {\n    constructor(model, view) {\n        this.model = model;\n        this.view = view;\n        this.view.bindAddUser(this.handleAddUser.bind(this));\n        this.view.render(this.model.getUsers());\n    }\n\n    handleAddUser(name) {\n        this.model.addUser({ name, id: Date.now() });\n        this.view.render(this.model.getUsers());\n