बैकबोन के लिए एक एमवीसी कार्यान्वयन लिखना

एक सुबह बादल, मैंने सोचा कि मेरी पुरानी परियोजनाओं में से एक को ठीक से रिफ्लेक्टर करना अच्छा होगा। यह एक गैर-लाभकारी, एक 3 डी शूटर में HUD को अनुकूलित करने के लिए हल्का आवेदन है। मैंने इसे 2 साल पहले लिखा था, गर्म और अनुभवहीन था। नतीजतन, उत्कृष्ट स्पेगेटी कोड का एक गुच्छा, जो अपनी सभी कमियों के बावजूद, अपना काम कर रहा था। समझदार और अधिक अनुभवी बनने के बाद, मैंने पूरी तरह से आवेदन को फिर से लिखने, इसे एक नया आर्किटेक्चर देने, समर्थन और अद्यतन को सरल बनाने का फैसला किया। यह कैसे करना है? उत्तर सरल लग रहा था - एमवीसी का उपयोग करें, स्तरों में विभाजित करें और एक ही पूरे में सब कुछ कनेक्ट करें। इसलिए मुझे एक सरल और प्रभावी रूपरेखा चुनने की समस्या का सामना करना पड़ा जो एक ठोस आधार बन जाएगा। एक त्वरित शोध के बाद, मैंने backbone.js को चुना। अपनी सादगी और लचीलापन पसंद किया। आप बस स्रोत को खोल सकते हैं और समझ सकते हैं कि सब कुछ कैसे काम करता है और काम करता है। केवल बारीकियों कि कृपया नहीं था एमवी पैटर्न है। मैं वास्तव में कई विचारों के अनुसार तर्क को धब्बा नहीं करना चाहता था, इसलिए यह विचार आपकी बाइक लिखने के लिए पैदा हुआ था, जो पहेली के लापता भागों को प्रदान करेगा। साथ ही, कुछ नया बनाना हमेशा मजेदार और दिलचस्प होता है। दो बार सोचने के बिना, मैंने रीढ़ की हड्डी के लिए नियंत्रकों को लागू करने के बारे में निर्धारित किया है।

समस्या का विवरण और बुनियादी तरीकों के कार्यान्वयन

इसलिए, मुझे नियंत्रकों को बनाने की क्षमता की आवश्यकता है जो एप्लिकेशन के सभी भागों को एक ही संपूर्ण में एकीकृत करते हैं। प्रत्येक नियंत्रक को सभी मॉडल और संग्रह (दोनों बुनियादी डिजाइनरों और पहले से ही निर्मित उदाहरणों) तक पहुंच होनी चाहिए। इसके लिए घटकों (विचारों) को बनाने और उचित रूप से प्रतिक्रिया देने के लिए उनकी घटनाओं को सुनने में सक्षम होने की भी आवश्यकता होती है।

नियंत्रक का कंकाल इस तरह दिखेगा:

Controller = { views: {}, // views hash map models: {}, // models hash map collections: {}, // collections hash map // Set of methods to get existing view, get view constructor and create new view using constuctor getView: function() {}, getViewConstructor: function() {}, createView: function() {}, // Set of methods to get existing model, get model constructor and create new model using constuctor getModel: function() {}, getModelConstructor: function() {}, createModel: function() {}, // Set of methods to get existing collection, // get collection constructor and create new collectionusing constuctor getCollection: function() {}, getCollectionConstructor: function() {}, createCollection: function() {}, // This method will subscribe controller instance to view events addListeners: function() {} } 

अब तक, सब कुछ बहुत सरल है। लेकिन एक जटिल अनुप्रयोग के लिए, हमारे पास कई नियंत्रक होने की आवश्यकता है, यह वांछनीय है कि संग्रह और मॉडल का सेट पूरे आवेदन के लिए सामान्य हो। इसलिए Application हमारी सहायता के लिए आता है - एक बुनियादी निर्माता जो नियंत्रकों को एक ही आवेदन में जोड़ता है।

आवेदन का कंकाल इस तरह दिखेगा:

 Application = { //Method that will initialize all controllers upon applicaiton launch initializeControllers: function() {}, // Set of methods to get existing model, get model constructor and create new model using constuctor getModel: function() {}, getModelConstructor: function() {}, createModel: function() {}, // Set of methods to get existing collection, get collectionconstructor and create new collectionusing constuctor getCollection: function() {}, getCollectionConstructor: function() {}, createCollection: function() {}, } 

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

 // Create collection instances upon application start Application.buildCollections() // Initialize all application controllers Application.initializeControllers() 

यह केवल नियंत्रकों को एक-दूसरे के साथ संवाद करने के लिए सिखाने के लिए रहता है। इस उद्देश्य के लिए, हम एक और इकाई बनाते हैं जो हमें एप्लिकेशन के सभी घटकों के बीच संचार स्थापित करने की अनुमति देगा।

 EventBus = { // Function to add event listeners addListeners: function() {}, // Function to fire event listneres fireEvent: function() {} } 

अब जब मूल वस्तुओं को परिभाषित किया गया है, तो हम अपने आवेदन के सभी हिस्सों के ठोस कार्यान्वयन के साथ आगे बढ़ सकते हैं।

आवेदन कार्यान्वयन

आइए मुख्य निर्माता के साथ शुरू करें - Application । हम बेस क्लास को उसी तरह लागू करते हैं जिस तरह से बैकबोन करता है।

 var Application = function(options) { _.extend(this, options || {}); // Create a new instance of EventBus and pass the reference to out application this.eventbus = new EventBus({application: this}); // Run application initialization if needed this.initialize.apply(this, arguments); // Create documentReady callback to lauch the application $($.proxy(this.onReady, this)); }; 

इसके अलावा, _.extend का उपयोग करते _.extend , हम प्रोटोटाइप का विस्तार करते हैं:

 _.extend(Application.prototype, { // Hash maps to store models, collections and controllers models: {}, collections: {}, controllers: {}, /** * Abstract fuction that will be called during application instance creation */ initialize: function(options) { return this; }, /** * Called on documentReady, defined in constructor */ onReady: function() { // initialize controllers this.initializeControllers(this.controllers || {}); // call to controller.onLauch callback this.launchControllers(); // call application.lauch callback this.launch.call(this); }, /** * Function that will convert string identifier into the instance reference */ parseClasses: function(classes) { var hashMap = {}; _.each(classes, function(cls) { var classReference = resolveNamespace(cls), id = cls.split('.').pop(); hashMap[id] = classReference; }, this); return hashMap; }, /** * Abstract fuction that will be called during application lauch */ launch: function() {}, /** * Getter to retreive link to the particular controller instance */ getController: function(id) { return this.controllers[id]; }, /** * Function that will loop throught the list of collection constructors and create instances */ buildCollections: function() { _.each(this.collections, function(collection, alias) { this.getCollection(alias); }, this); } }); 

अपने नियंत्रकों को आरंभ करने के लिए, हमें दो विधियों की आवश्यकता है। Application.initializeControllers सीधे ही एप्लिकेशन में लिंक को स्टोर करने के लिए संग्रह और मॉडल के संग्रह को तत्काल और घटा देंगे। और Application.launchControllers पहले से ही बनाए गए नियंत्रकों के माध्यम से जाएंगे और Controller.onLaunch कॉलबैक को निष्पादित करेंगे।

 _.extend(Application.prototype, { ... /** * Fuction that will loop through all application conrollers and create their instances * Additionaly, read the list of models and collections from each controller * and save the reference within application */ initializeControllers: function(controllers) { this.controllers = {}; _.each(controllers, function(ctrl) { var classReference = resolveNamespace(ctrl), id = ctrl.split('.').pop(); // create new Controller instance and pass reference to the application var controller = new classReference({ id: id, application: this }); controller.views = this.parseClasses(controller.views || []); _.extend(this.models, this.parseClasses(controller.models || [])); _.extend(this.collections, this.parseClasses(controller.collections || {})); this.buildCollections(); this.controllers[id] = controller; }, this); }, /** * Launch all controllers using onLauch callback */ launchControllers: function() { _.each(this.controllers, function(ctrl, id) { ctrl.onLaunch(this); }, this); } ... }); 

नियंत्रकों के बीच संचार सुनिश्चित करने और आपको विशिष्ट घटकों से घटनाओं की सदस्यता लेने के लिए सक्षम करने के लिए, हम Application.addListeners विधि जोड़ते हैं, जो हमारे EventBus को कार्य सौंपता है:

 _.extend(Application.prototype, { ... /** * Abstract fuction that will be called during application lauch */ addListeners: function(listeners, controller) { this.eventbus.addListeners(listeners, controller) } ... }); 

मॉडल और संग्रह के साथ काम करने के लिए, हमें उदाहरण के लिए, निर्माणकर्ता का संदर्भ और नई इकाई बनाने के लिए एक विधि प्राप्त करने के लिए कार्यों की आवश्यकता होती है। उदाहरण के रूप में मॉडल का उपयोग करके एक विशिष्ट कार्यान्वयन पर विचार करें; संग्रह के लिए, फ़ंक्शन समान रूप से काम करेंगे।

 _.extend(Application.prototype, { ... /** * Getter to retreive link to the particular model instance * If model instance isn't created, create it */ getModel: function(name) { this._modelsCache = this._modelsCache || {}; var model = this._modelsCache[name], modelClass = this.getModelConstructor(name); if(!model && modelClass) { model = this.createModel(name); this._modelsCache[name] = model; } return model || null; }, /** * Getter to retreive link to the particular model consturctor */ getModelConstructor: function(name) { return this.models[name]; }, /** * Function to create new model instance */ createModel: function(name, options) { var modelClass = this.getModelConstructor(name), options = _.extend(options || {}); var model = new modelClass(options); return model; }, /** * Getter to retreive link to the particular collection instance * If collection instance isn't created, create it */ getCollection: function(name) { ... }, /** * Getter to retreive link to the particular collection consturctor */ getCollectionConstructor: function(name) { ... }, /** * Function to create new collection instance */ createCollection: function(name, options) { ... }, ... }); 

अब, आवेदन के लिए हमारा बुनियादी निर्माण तैयार है। उल्लेख Application.parseClasses विधि से बना होना चाहिए। तथ्य यह है कि मैंने नियंत्रक, मॉडल, संग्रह की सूची को स्थानांतरित करने और स्ट्रिंग्स की एक सरणी के रूप में देखने का निर्णय लिया। प्रवेश द्वार पर हो रही है

 [ 'myApplication.controller.UserManager', 'myApplication.controller.FormBuilder' ] 

Application.parseClasses फ़ंक्शन इस सरणी को मैपिंग में बदल देगा

 { 'UserManager': myApplication.controller.UserManager, 'FormBuilder': myApplication.controller.FormBuilder } 

इसलिए मैं 2 समस्याओं को हल करता हूं। सबसे पहले, सभी लिंक स्वचालित रूप से एक अद्वितीय पहचानकर्ता के साथ जुड़े होंगे जो निर्माणकर्ता के नाम के बराबर है। यह डेवलपर को प्रत्येक व्यक्ति इकाई के लिए नामों से परेशान होने से बचाएगा। दूसरे, हम बेस भागों को उनके उपलब्ध होने की प्रतीक्षा किए बिना निर्धारित कर सकते हैं। यह आपको यादृच्छिक क्रम में फाइलें अपलोड करने की अनुमति देगा। लिंक के लिए पार्सिंग नाम सभी लिपियों के लोड होने के बाद ही होंगे।

नियंत्रक कार्यान्वयन

नियंत्रक को थोड़ा सरल कोड मिलेगा, इसलिए हम Application लिए मॉडल और संग्रह के साथ सभी काम सौंपते हैं। आरंभ करने के लिए, घोषणा:

 var Controller = function(options) { _.extend(this, options || {}); this.initialize.apply(this, arguments); }; 

और फिर आप प्रोटोटाइप का विस्तार कर सकते हैं

 _.extend(Controller.prototype, { views: {}, models: {}, collections: {}, initialize: function(options) { }, /** * Add new listener to the application event bus */ addListeners: function(listeners) { this.getApplication().addListeners(listeners, this); }, /** * Abstract fuction that will be called during application lauch */ onLaunch: function(application) { }, /** * Getter that will return the reference to the application instance */ getApplication: function() { return this.application; } }); 

दृश्य के साथ काम करने के तरीके जोड़ें:

 _.extend(Controller.prototype, { ... /** * Getter that will return the reference to the view constructor */ getViewConstructor: function(name) { return this.views[name]; }, /** * Function to create a new view instance * All views are cached within _viewsCache hash map */ createView: function(name, options) { var view = this.getViewConstructor(name), options = _.extend(options || {}, { alias: name }); return new view(options); } ... }); 

हम अपने Application लिए मॉडल और संग्रह के साथ काम सौंपते हैं

 _.extend(Controller.prototype, { ... /** * Delegate method to get model instance reference */ getModel: function(name) { return this.application.getModel(name); }, /** * Delegate method to get model constructor reference */ getModelConstructor: function(name) { return this.application.getModelConstructor(name); }, /** * Delegate method to create model instance */ createModel: function(name, options) { return this.application.createModel(name) }, /** * Delegate method to get collection instance reference */ getCollection: function(name) { return this.application.getCollection(name); }, /** * Delegate method to get collection constructor reference */ getCollectionConstructor: function(name) { return this.application.getCollectionConstructor(name); }, /** * Delegate method to create collection instance */ createCollection: function(name, options) { return this.application.createCollection(name); } ... }); 

और अंत में, हमारे नियंत्रकों को Application.EventBus का उपयोग करके संवाद करने दें

 _.extend(Controller.prototype, { ... /** * Delegate method to fire event */ fireEvent: function(selector, event, args) { this.application.eventbus.fireEvent(selector, event, args); } ... }); 

नियंत्रक के लिए बुनियादी निर्माण तैयार है! केवल थोड़ा सा बचा है :)

EventBus कार्यान्वयन

सबसे पहले, हम कंस्ट्रक्टर का वर्णन करते हैं। नियंत्रक को देखने से घटनाओं को सुनने के लिए सक्षम करने के लिए, हमें Backbone.View के मूल प्रोटोटाइप को थोड़ा विस्तारित करने की आवश्यकता है। तथ्य यह है कि हमें एक निश्चित चयनकर्ता की आवश्यकता है जिसके द्वारा घटनाओं को ट्रैक किया जाएगा। ऐसा करने के लिए, हम alias संपत्ति का परिचय देते हैं, जो घटक बनाए जाने पर स्वचालित रूप से असाइन की जाएगी। और एक fireEvent विधि जोड़ें जो मूल View.trigger() कॉल करता है और नई घटना EventBus को EventBus ।

 var EventBus = function(options) { var me = this; _.extend(this, options || {}); // Extend Backbone.View.prototype _.extend(Backbone.View.prototype, { alias: null, /* * Getter that wll return alias */ getAlias: function() { return this.options.alias; }, /* * Instead of calling View.trigger lets use custom function * It will notify the EventBus about new event */ fireEvent: function(event, args) { this.trigger.apply(this, arguments); me.fireEvent(this.getAlias(), event, args); } }); }; 

अब आप सुरक्षित रूप से प्रोटोटाइप का विस्तार कर सकते हैं। हम नई घटनाओं की सदस्यता के लिए EventBus.addListeners का उपयोग करते हैं, और EventBus.fireEvent वांछित हैंडलर पर डालता है और इसे निष्पादित करता है।

 _.extend(EventBus.prototype, { // Hash Map that will contains references to the all reginstered event listeners pool: {}, /** * Function to register new event listener */ addListeners: function(selectors, controller) { this.pool[controller.id] = this.pool[controller.id] || {}; var pool = this.pool[controller.id]; if(_.isArray(selectors)) { _.each(selectors, function(selector) { this.control(selector, controller); }, this) } else if(_.isObject(selectors)) { _.each(selectors, function(listeners, selector) { _.each(listeners, function(listener, event) { pool[selector] = pool[selector] || {}; pool[selector][event] = pool[selector][event] || []; pool[selector][event].push(listener); }, this); }, this) } }, /** * Function to execute event listener */ fireEvent: function(selector, event, args) { var application = this.getApplication(); _.each(this.pool, function(eventsPoolByAlias, controllerId) { var events = eventsPoolByAlias[selector]; if(events) { var listeners = events[event] controller = application.getController(controllerId); _.each(listeners, function(fn) { fn.apply(controller, args); }); } }, this); }, /** * Getter to receive the application reference */ getApplication: function() { return this.options['application']; } }); 

हुर्रे! अब सभी मुख्य भागों को लागू किया गया है! अंतिम स्पर्श

 Application.extend = Backbone.Model.extend; Controller.extend = Backbone.Model.extend; 

अब हम extend फ़ंक्शन का उपयोग करके अपने बेस कंस्ट्रक्टरों से विरासत बना सकते हैं।

प्रलेखन और उदाहरण

आधिकारिक Backbone.Application पेज पर स्रोत फाइलें और प्रलेखन

मैंने एक साधारण उदाहरण भी बनाया - यह एमवीसी का उपयोग करके एक क्लासिक टूडो है। कार्यान्वयन के लिए सूत्र और टिप्पणियां यहां पाई जा सकती हैं - github.com/namad/Backbone.Application/blob/master/examples/ToDo/js/todos.js

और एक बोनस के रूप में, एक और अधिक जटिल उदाहरण जिसके लिए मैंने यह पूरी बाइक लिखी है , वह है विज़ुध , मेरे पसंदीदा क्वेक लाइव गेम के लिए HUD संपादक। फिलहाल, नया संस्करण अभी भी विकास में है, आपको छोटी चीजों का एक गुच्छा खत्म करने की आवश्यकता है, लेकिन सामान्य तौर पर, सभी कार्यक्षमता काम करती है और आप इसे अपने हाथों से छू सकते हैं। कौन परवाह करता है, Google कोड पर पुराने संस्करण का स्रोत कोड

PS यह इस प्रकृति का मेरा पहला लेख है और मुझे कुछ पता नहीं है कि क्या हुआ :) इसलिए किसी भी पर्याप्त समीक्षा का वजन सोने में है। धन्यवाद!