🏌️ 🛁 🈂️ JQuery से Backbone तक 👰🏽 ⛓️ ☑️

यह लेख दिखाएगा कि आप प्रतिनिधित्व, मॉडल, संग्रह और घटनाओं का उपयोग करके बैकबोन कोड में "सरल" jQuery शैली में लिखे गए कोड को कैसे पुनर्गठित कर सकते हैं। पुनर्गठन धीरे-धीरे होगा ताकि यह प्रक्रिया बैकबोन में मुख्य सार की स्पष्ट समझ दे। लेख उन लोगों के लिए है जो jQuery का उपयोग करते हैं और ग्राहक कोड के लिए MVC योजना से परिचित होना चाहते हैं।

यह लेख जीथब से अनुवाद है ।

आइए आवेदन कोड के साथ शुरू करें, जिसे हम वास्तव में पुनर्गठित करेंगे।

$(document).ready(function() { $('#new-status form').submit(function(e) { e.preventDefault(); $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: $('#new-status').find('textarea').val() }, success: function(data) { $('#statuses').append('<li>' + data.text + '</li>'); $('#new-status').find('textarea').val(''); } }); }); });

 <body> <div id="new-status"> <h2>New monolog</h2> <form action=""> <textarea></textarea><br> <input type="submit" value="Post"> </form> </div> <div id="statuses"> <h2>Monologs</h2> <ul></ul> </div> </body>

यहां आप कोड इन एक्शन देख सकते हैं। एप्लिकेशन आपको पाठ दर्ज करने की अनुमति देता है, जब आप "पोस्ट" पर क्लिक करते हैं तो यह पाठ सर्वर पर भेजा जाता है और इतिहास में नीचे प्रदर्शित होता है।
एप्लिकेशन लोड होने के लिए पृष्ठ की प्रतीक्षा करता है, फॉर्म जमा करने के लिए प्रतीक्षा जोड़ता है, जिसमें सभी तर्क स्थित हैं। लेकिन समस्या क्या है? यह कोड एक ही समय में बहुत सी चीजें करता है। यह पृष्ठ ईवेंट, उपयोगकर्ता ईवेंट, नेटवर्क ईवेंट, उपयोगकर्ता इनपुट को संसाधित करता है, प्रतिक्रिया का विश्लेषण करता है और DOM को हेरफेर करता है। और कोड की 16 लाइनों में यह सब है। अगला, हम इस कोड को पुनर्गठित करेंगे ताकि यह एकल जिम्मेदारी के सिद्धांत को पूरा करे, ताकि इसका परीक्षण, रखरखाव, पुन: उपयोग और विस्तार करना आसान हो।
यहां तीन मान्यताएं हैं जिन्हें हम प्राप्त करना चाहते हैं:

हम $ (दस्तावेज़) से यथासंभव अधिक कोड प्राप्त करना चाहते हैं। अपनी वर्तमान स्थिति में, कोड का परीक्षण करना लगभग असंभव है।
हम जिम्मेदारी के एक सिद्धांत का पालन करना चाहते हैं, और कोड को अधिक उपयोगी और सत्यापित करना चाहते हैं।
हम DOM और Ajax के बीच संबंध तोड़ना चाहते हैं।

DOM और Ajax का पृथक्करण

DOM को मैनिप्युलेट करने को अजाक्स के साथ काम करने से अलग होने की जरूरत है, और पहला कदम ऐडस्टैटस फ़ंक्शन बनाना है:

परिवर्तन नंबर 1

 +function addStatus(options) { + $.ajax({ + url: '/status', + type: 'POST', + dataType: 'json', + data: { text: $('#new-status textarea').val() }, + success: function(data) { + $('#statuses ul').append('<li>' + data.text + '</li>'); + $('#new-status textarea').val(''); + } + }); +} + $(document).ready(function() { $('#new-status form').submit(function(e) { e.preventDefault(); - $.ajax({ - url: '/status', - type: 'POST', - dataType: 'json', - data: { text: $('#new-status textarea').val() }, - success: function(data) { - $('#statuses ul').append('<li>' + data.text + '</li>'); - $('#new-status textarea').val(''); - } - }); + addStatus(); }); });

इसके बाद, "+" चिह्न जोड़ा लाइनों को चिह्नित करता है, और "-" हटाए गए लाइनों को चिह्नित करता है।

बेशक, डेटा और सफलता दोनों में , हम अभी भी DOM के साथ काम करते हैं। हमें उन्हें तर्क के रूप में पारित करके इस संबंध को तोड़ना चाहिए:

नंबर 2 बदलें

 function addStatus(options) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', - data: { text: $('#new-status textarea').val() }, - success: function(data) { - $('#statuses ul').append('<li>' + data.text + '</li>'); - $('#new-status textarea').val(''); - } + data: { text: options.text }, + success: options.success }); } $(document).ready(function() { $('#new-status form').submit(function(e) { e.preventDefault(); - addStatus(); + addStatus({ + text: $('#new-status textarea').val(), + success: function(data) { + $('#statuses ul').append('<li>' + data.text + '</li>'); + $('#new-status textarea').val(''); + } + }); }); });

अगला, आपको इन स्थितियों को एक ऑब्जेक्ट में लपेटने की आवश्यकता है ताकि आप एडस्टैटस के बजाय स्टेटस लिख सकें ।
ऐसा करने के लिए, प्रोटोटाइप के साथ कंस्ट्रक्टर पैटर्न का उपयोग करें, और "क्लास" स्टेट्यूज़ बनाएं:

नंबर 3 बदलें

 -function addStatus(options) { +var Statuses = function() { +}; +Statuses.prototype.add = function(options) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: options.text }, success: options.success }); -} +}; $(document).ready(function() { + var statuses = new Statuses(); + $('#new-status form').submit(function(e) { e.preventDefault(); - addStatus({ + statuses.add({ text: $('#new-status textarea').val(), success: function(data) { $('#statuses ul').append('<li>' + data.text + '</li>'); $('#new-status textarea').val(''); } }); }); });

दृश्य बनाएँ

हमारे फॉर्म हैंडलर में अब स्टेटस वैरिएबल पर एक निर्भरता है, और हैंडलर के अंदर सब कुछ केवल DOM के साथ काम करता है। चलो फॉर्म हैंडलर और सब कुछ अंदर एक अलग "वर्ग" NewStatusView में स्थानांतरित करें :

परिवर्तन नंबर 4

 var Statuses = function() { }; Statuses.prototype.add = function(options) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: options.text }, success: options.success }); }; +var NewStatusView = function(options) { + var statuses = options.statuses; + + $('#new-status form').submit(function(e) { + e.preventDefault(); + + statuses.add({ + text: $('#new-status textarea').val(), + success: function(data) { + $('#statuses ul').append('<li>' + data.text + '</li>'); + $('#new-status textarea').val(''); + } + }); + }); +}; + $(document).ready(function() { var statuses = new Statuses(); - $('#new-status form').submit(function(e) { - e.preventDefault(); - - statuses.add({ - text: $('#new-status textarea').val(), - success: function(data) { - $('#statuses ul').append('<li>' + data.text + '</li>'); - $('#new-status textarea').val(''); - } - }); - }); + new NewStatusView({ statuses: statuses }); });

अब हम केवल DOM के लोड होने पर एप्लिकेशन को इनिशियलाइज़ करते हैं, और बाकी सब कुछ $ (डॉक्यूमेंट) के लिए प्रदान किया जाता है। अब तक हमने जो कदम उठाए हैं, उन्होंने कोड से दो घटकों की पहचान की है जो परीक्षण करना आसान है और स्पष्ट जिम्मेदारियां हैं। लेकिन फिर भी कुछ पर काम करना है। आइए फॉर्म हैंडलर को एक अलग ऐडस्टैटस विधि में दृश्य से बाहर ले जाकर शुरू करें:

5 नंबर बदलें

  var Statuses = function() { }; Statuses.prototype.add = function(options) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: options.text }, success: options.success }); }; var NewStatusView = function(options) { - var statuses = options.statuses; + this.statuses = options.statuses; - $('#new-status form').submit(function(e) { - e.preventDefault(); - statuses.add({ - text: $('#new-status textarea').val(), - success: function(data) { - $('#statuses ul').append('<li>' + data.text + '</li>'); - $('#new-status textarea').val(''); - } - }); - }); + $('#new-status form').submit(this.addStatus); }; +NewStatusView.prototype.addStatus = function(e) { + e.preventDefault(); + + this.statuses.add({ + text: $('#new-status textarea').val(), + success: function(data) { + $('#statuses ul').append('<li>' + data.text + '</li>'); + $('#new-status textarea').val(''); + } + }); +}; $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ statuses: statuses }); });

लेकिन जब हम क्रोम में शुरू करते हैं, तो हमें एक त्रुटि दिखाई देती है:

बिना पढ़े टाइपरोर: अपरिभाषित की विधि को 'ऐड' नहीं कर सकता

हमें यह त्रुटि मिलती है क्योंकि इसका कंस्ट्रक्टर और ऐडस्टैटस विधि में अलग-अलग अर्थ है। (यदि आपको पूरी तरह से समझ में नहीं आ रहा है कि ऐसा क्यों हो रहा है, तो मैं जावास्क्रिप्ट फंक्शन इनवोकेशन और "इस" को समझने की सलाह देता हूं)। इस समस्या को हल करने के लिए, हम $ .proxy का उपयोग कर सकते हैं, जो एक फ़ंक्शन बनाता है जिसमें यह वह संदर्भ होता है जिसकी हमें आवश्यकता होती है।

नंबर 6 को बदलें

 var Statuses = function() { }; Statuses.prototype.add = function(options) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: options.text }, success: options.success }); }; var NewStatusView = function(options) { this.statuses = options.statuses; - $('#new-status form').submit(this.addStatus); + var add = $.proxy(this.addStatus, this); + $('#new-status form').submit(add); }; NewStatusView.prototype.addStatus = function(e) { e.preventDefault(); this.statuses.add({ text: $('#new-status textarea').val(), success: function(data) { $('#statuses ul').append('<li>' + data.text + '</li>'); $('#new-status textarea').val(''); } }); }; $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ statuses: statuses }); });

चलो सफलता को एक अलग विधि बनाते हैं जो DOM के साथ काम करेगा, जो कोड को अधिक पठनीय और लचीला बनाएगा:

7 नंबर बदलें

 var Statuses = function() { }; Statuses.prototype.add = function(options) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: options.text }, success: options.success }); }; var NewStatusView = function(options) { this.statuses = options.statuses; var add = $.proxy(this.addStatus, this); $('#new-status form').submit(add); }; NewStatusView.prototype.addStatus = function(e) { e.preventDefault(); + var that = this; + this.statuses.add({ text: $('#new-status textarea').val(), success: function(data) { - $('#statuses ul').append('<li>' + data.text + '</li>'); - $('#new-status textarea').val(''); + that.appendStatus(data.text); + that.clearInput(); } }); }; +NewStatusView.prototype.appendStatus = function(text) { + $('#statuses ul').append('<li>' + text + '</li>'); +}; +NewStatusView.prototype.clearInput = function() { + $('#new-status textarea').val(''); +}; $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ statuses: statuses }); });

इसके विकास के दौरान परियोजना का परीक्षण और समर्थन करना बहुत आसान है। हम भी बैकबोन का उपयोग करने के करीब हो गए हैं।

ईवेंट जोड़ें

अगले चरण के लिए, हमें अपने पहले बैकबोन मॉड्यूल - घटनाओं का उपयोग करने की आवश्यकता होगी। घटनाएँ केवल कहने का एक तरीका है: "हैलो, मैं जानना चाहता हूं कि कुछ कार्रवाई कब होगी" और "हैलो, क्या आप जानते हैं कि जिस कार्रवाई का आप इंतजार कर रहे थे वह हुआ?" यह डोम के साथ काम करते समय jQuery की घटनाओं के रूप में एक ही विचार है, जैसे कि एक क्लिक या सबमिट के लिए प्रतीक्षा करना।
Backbone प्रलेखन Backbone.Events के बारे में इस तरह से बताता है: "घटनाक्रम एक मॉड्यूल है जिसे किसी भी वस्तु के साथ मिलाया जा सकता है, जो वस्तु को कस्टम घटनाओं को बांधने और ट्रिगर करने की क्षमता देता है।" प्रलेखन हमें यह भी बताता है कि हम एक घटना डिस्पैचर बनाने के लिए अंडरस्कोर.जे का उपयोग कैसे कर सकते हैं:

 var events = _.clone(Backbone.Events);

इस थोड़ी कार्यक्षमता के साथ, हम कॉलिंग फ़ंक्शन के बजाय सफलता को सूचित कर सकते हैं। हम कंस्ट्रक्टर में यह भी घोषित कर सकते हैं कि घटना होने पर हम किन तरीकों से सूचित करना चाहते हैं:

नंबर 8 बदलें

 +var events = _.clone(Backbone.Events); + var Statuses = function() { }; Statuses.prototype.add = function(options) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: options.text }, success: options.success }); }; var NewStatusView = function(options) { this.statuses = options.statuses; + events.on('status:add', this.appendStatus, this); + events.on('status:add', this.clearInput, this); + var add = $.proxy(this.addStatus, this); $('#new-status form').submit(add); }; NewStatusView.prototype.addStatus = function(e) { e.preventDefault(); - var that = this; - this.statuses.add({ text: $('#new-status textarea').val(), success: function(data) { - that.appendStatus(data.text); - that.clearInput(); + events.trigger('status:add', data.text); } }); }; NewStatusView.prototype.appendStatus = function(text) { $('#statuses ul').append('<li>' + text + '</li>'); }; NewStatusView.prototype.clearInput = function() { $('#new-status textarea').val(''); }; $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ statuses: statuses }); });

अब कंस्ट्रक्टर में हम यह घोषणा कर सकते हैं कि जब कोई नया स्टेटस जोड़ा जाता है तो हम क्या कॉल करना चाहते हैं, एडस्टैटस के बजाय वांछित फ़ंक्शन को कॉल करना। AddStatus की एकमात्र जिम्मेदारी फीडबैक है, न कि DOM मैनिपुलेशन।

परिवर्तन नंबर 9

 var events = _.clone(Backbone.Events); var Statuses = function() { }; -Statuses.prototype.add = function(options) { +Statuses.prototype.add = function(text) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', - data: { text: options.text }, - success: options.success + data: { text: text }, + success: function(data) { + events.trigger('status:add', data.text); + } }); }; var NewStatusView = function(options) { this.statuses = options.statuses; events.on('status:add', this.appendStatus, this); events.on('status:add', this.clearInput, this); var add = $.proxy(this.addStatus, this); $('#new-status form').submit(add); }; NewStatusView.prototype.addStatus = function(e) { e.preventDefault(); - this.statuses.add({ - text: $('#new-status textarea').val(), - success: function(data) { - events.trigger('status:add', data.text); - } - }); + this.statuses.add($('#new-status textarea').val()); }; NewStatusView.prototype.appendStatus = function(text) { $('#statuses ul').append('<li>' + text + '</li>'); }; NewStatusView.prototype.clearInput = function() { $('#new-status textarea').val(''); }; $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ statuses: statuses }); });

प्रस्तुतियाँ की बाध्यता

NewStatusView में appendStatus और clearInput को देखते हुए , हम देखते हैं कि ये विधियाँ क्रमशः दो अलग DOM तत्वों, #statuses और # new-status के साथ काम करती हैं। यह साझा जिम्मेदारी के सिद्धांत के अनुरूप नहीं है। चलिए NewStatusView से #statuses के साथ एक अलग StatusesView में काम करने की ज़िम्मेदारी लेते हैं। इस पृथक्करण को हमसे अधिक प्रयास की आवश्यकता नहीं है, क्योंकि अब हम ईवेंट डिस्पैचर का उपयोग करते हैं, और हार्ड फ़ंक्शन कॉलबैक के साथ यह अधिक जटिल होगा।

10 नंबर बदलें

 var events = _.clone(Backbone.Events); var Statuses = function() { }; Statuses.prototype.add = function(text) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: text }, success: function(data) { events.trigger('status:add', data.text); } }); }; var NewStatusView = function(options) { this.statuses = options.statuses; - events.on('status:add', this.appendStatus, this); events.on('status:add', this.clearInput, this); var add = $.proxy(this.addStatus, this); $('#new-status form').submit(add); }; NewStatusView.prototype.addStatus = function(e) { e.preventDefault(); this.statuses.add($('#new-status textarea').val()); }; -NewStatusView.prototype.appendStatus = function(text) { - $('#statuses ul').append('<li>' + text + '</li>'); -}; NewStatusView.prototype.clearInput = function() { $('#new-status textarea').val(''); }; +var StatusesView = function() { + events.on('status:add', this.appendStatus, this); +}; +StatusesView.prototype.appendStatus = function(text) { + $('#statuses ul').append('<li>' + text + '</li>'); +}; + $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ statuses: statuses }); + new StatusesView(); });

अब, चूंकि विचार केवल एक HTML तत्व के लिए जिम्मेदार हैं, हम उन्हें निर्माता में निर्दिष्ट कर सकते हैं:

11 नंबर बदलें

 var events = _.clone(Backbone.Events); var Statuses = function() { }; Statuses.prototype.add = function(text) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: text }, success: function(data) { events.trigger('status:add', data.text); } }); }; var NewStatusView = function(options) { this.statuses = options.statuses; + this.el = $('#new-status'); events.on('status:add', this.clearInput, this); var add = $.proxy(this.addStatus, this); - $('#new-status form').submit(add); + this.el.find('form').submit(add); }; NewStatusView.prototype.addStatus = function(e) { e.preventDefault(); - this.statuses.add($('#new-status textarea').val()); + this.statuses.add(this.el.find('textarea').val()); }; NewStatusView.prototype.clearInput = function() { - $('#new-status textarea').val(''); + this.el.find('textarea').val(''); }; var StatusesView = function() { + this.el = $('#statuses'); + events.on('status:add', this.appendStatus, this); }; StatusesView.prototype.appendStatus = function(text) { - $('#statuses ul').append('<li>' + text + '</li>'); + this.el.find('ul').append('<li>' + text + '</li>'); }; $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ statuses: statuses }); new StatusesView(); });

हमारे विचार, NewStatusView और StatusesView अभी भी परीक्षण करना मुश्किल है, क्योंकि वे एक HTML तत्व की उपस्थिति पर निर्भर करते हैं। इसे ठीक करने के लिए, हम इन तत्वों को दृश्य बनाते समय सेट करेंगे:

12 नंबर बदलें

 var events = _.clone(Backbone.Events); var Statuses = function() { }; Statuses.prototype.add = function(text) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: text }, success: function(data) { events.trigger('status:add', data.text); } }); }; var NewStatusView = function(options) { this.statuses = options.statuses; - this.el = $('#new-status'); + this.el = options.el; events.on('status:add', this.clearInput, this); var add = $.proxy(this.addStatus, this); this.el.find('form').submit(add); }; NewStatusView.prototype.addStatus = function(e) { e.preventDefault(); this.statuses.add(this.el.find('textarea').val()); }; NewStatusView.prototype.clearInput = function() { this.el.find('textarea').val(''); }; -var StatusesView = function() { - this.el = $('#statuses'); +var StatusesView = function(options) { + this.el = options.el; events.on('status:add', this.appendStatus, this); }; StatusesView.prototype.appendStatus = function(text) { this.el.find('ul').append('<li>' + text + '</li>'); }; $(document).ready(function() { var statuses = new Statuses(); - new NewStatusView({ statuses: statuses }); - new StatusesView(); + new NewStatusView({ el: $('#new-status'), statuses: statuses }); + new StatusesView({ el: $('#statuses') }); });

अब कोड का परीक्षण करना आसान है। इस बदलाव के साथ, हम विचारों का परीक्षण करने के लिए निम्नलिखित jQuery चाल का उपयोग कर सकते हैं। उदाहरण $ ('# नई-स्थिति') का उपयोग करके दृश्य को आरम्भ करने के बजाय, हम आवश्यक jQuery HTML आवरण को पारित कर सकते हैं, उदाहरण के लिए $ (' …' ) । jQuery मक्खी पर आवश्यक तत्वों का निर्माण करेगा। यह अविश्वसनीय रूप से तेज़ परीक्षण प्रदान करता है, क्योंकि कोई डोम हेरफेर नहीं है।

हमारा अगला कदम हमारे विचारों को थोड़ा स्पष्ट करने के लिए एक सहायक का परिचय देना होगा। इसे लिखने के बजाय .el.find हम एक सरल सहायक फ़ंक्शन बना सकते हैं ताकि हम इसे लिख सकें । $ । इस छोटे से बदलाव के साथ, ऐसा लग रहा है कि हम कह रहे हैं, "मैं किसी दृश्य में स्थानीय रूप से कुछ खोजने के लिए jQuery का उपयोग करना चाहता हूं, और सभी HTML में विश्व स्तर पर नहीं।" और इसे जोड़ना इतना आसान है:

13 नंबर बदलें

  var events = _.clone(Backbone.Events); var Statuses = function() { }; Statuses.prototype.add = function(text) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: text }, success: function(data) { events.trigger('status:add', data.text); } }); }; var NewStatusView = function(options) { this.statuses = options.statuses; this.el = options.el; events.on('status:add', this.clearInput, this); var add = $.proxy(this.addStatus, this); - this.el.find('form').submit(add); + this.$('form').submit(add); }; NewStatusView.prototype.addStatus = function(e) { e.preventDefault(); - this.statuses.add(this.el.find('textarea').val()); + this.statuses.add(this.$('textarea').val()); }; NewStatusView.prototype.clearInput = function() { - this.el.find('textarea').val(''); + this.$('textarea').val(''); }; +NewStatusView.prototype.$ = function(selector) { + return this.el.find(selector); +}; var StatusesView = function(options) { this.el = options.el; events.on('status:add', this.appendStatus, this); }; StatusesView.prototype.appendStatus = function(text) { - this.el.find('ul').append('<li>' + text + '</li>'); + this.$('ul').append('<li>' + text + '</li>'); }; +StatusesView.prototype.$ = function(selector) { + return this.el.find(selector); +}; $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ el: $('#new-status'), statuses: statuses }); new StatusesView({ el: $('#statuses') }); });

हालाँकि, इस सुविधा को प्रत्येक दृश्य में जोड़ना मूर्खतापूर्ण लगता है। यह बैकबोन विचारों का उपयोग करने का एक कारण है - विचारों में कार्यक्षमता का पुन: उपयोग।

विचारों से शुरुआत करना

हमारे कोड की वर्तमान स्थिति में, आपको बैकबोन दृश्य जोड़ने के लिए बस कुछ ही पंक्तियाँ लिखनी होंगी:

14 नंबर बदलें

  var events = _.clone(Backbone.Events); var Statuses = function() { }; Statuses.prototype.add = function(text) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: text }, success: function(data) { events.trigger('status:add', data.text); } }); }; -var NewStatusView = function(options) { - this.statuses = options.statuses; - this.el = options.el; - - events.on('status:add', this.clearInput, this); - - var add = $.proxy(this.addStatus, this); - this.$('form').submit(add); -}; +var NewStatusView = Backbone.View.extend({ + initialize: function(options) { + this.statuses = options.statuses; + this.el = options.el; + + events.on('status:add', this.clearInput, this); + + var add = $.proxy(this.addStatus, this); + this.$('form').submit(add); + } +}); NewStatusView.prototype.addStatus = function(e) { e.preventDefault(); this.statuses.add(this.$('textarea').val()); }; NewStatusView.prototype.clearInput = function() { this.$('textarea').val(''); }; NewStatusView.prototype.$ = function(selector) { return this.el.find(selector); }; var StatusesView = function(options) { this.el = options.el; events.on('status:add', this.appendStatus, this); }; StatusesView.prototype.appendStatus = function(text) { this.$('ul').append('<li>' + text + '</li>'); }; StatusesView.prototype.$ = function(selector) { return this.el.find(selector); }; $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ el: $('#new-status'), statuses: statuses }); new StatusesView({ el: $('#statuses') }); });

जैसा कि आप कोड से देख सकते हैं, हम एक नया बैकबोन दृश्य बनाने के लिए Backbone.View.extend का उपयोग करते हैं। वारिस में, हम विधियों को निर्दिष्ट कर सकते हैं, जैसे कि आरंभीकरण, जो कि कंस्ट्रक्टर है।
अब जब हमने बैकबोन विचारों का उपयोग शुरू कर दिया है, तो आइए बैकबोन के दूसरे दृश्य का अनुवाद करें:

15 नंबर बदलें

 var events = _.clone(Backbone.Events); var Statuses = function() { }; Statuses.prototype.add = function(text) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: text }, success: function(data) { events.trigger('status:add', data.text); } }); }; var NewStatusView = Backbone.View.extend({ initialize: function(options) { this.statuses = options.statuses; this.el = options.el; events.on('status:add', this.clearInput, this); var add = $.proxy(this.addStatus, this); this.$('form').submit(add); - } + }, + + addStatus: function(e) { + e.preventDefault(); + + this.statuses.add(this.$('textarea').val()); + }, + + clearInput: function() { + this.$('textarea').val(''); + }, + + $: function(selector) { + return this.el.find(selector); + } }); -NewStatusView.prototype.addStatus = function(e) { - e.preventDefault(); - - this.statuses.add(this.$('textarea').val()); -}; -NewStatusView.prototype.clearInput = function() { - this.$('textarea').val(''); -}; -NewStatusView.prototype.$ = function(selector) { - return this.el.find(selector); -}; -var StatusesView = function(options) { - this.el = options.el; - - events.on('status:add', this.appendStatus, this); -}; -StatusesView.prototype.appendStatus = function(text) { - this.$('ul').append('<li>' + text + '</li>'); -}; -StatusesView.prototype.$ = function(selector) { - return this.el.find(selector); -}; +var StatusesView = Backbone.View.extend({ + initialize: function(options) { + this.el = options.el; + + events.on('status:add', this.appendStatus, this); + }, + + appendStatus: function(text) { + this.$('ul').append('<li>' + text + '</li>'); + }, + + $: function(selector) { + return this.el.find(selector); + } +}); $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ el: $('#new-status'), statuses: statuses }); new StatusesView({ el: $('#statuses') }); });

अब, चूंकि हम केवल बैकबोन विचारों का उपयोग करते हैं, हम इसे हटा सकते हैं । $ हेल्पर फ़ंक्शन क्योंकि यह बैकबोन में पहले से मौजूद है। इसके अलावा, अब हमें इसे सहेजने की आवश्यकता नहीं है। क्योंकि, बैकबोन स्वचालित रूप से ऐसा करता है जब दृश्य HTML तत्व के साथ आरंभीकृत होता है।

16 नंबर बदलें

 var events = _.clone(Backbone.Events); var Statuses = function() { }; Statuses.prototype.add = function(text) { $.ajax({ url: '/status', type: 'POST', dataType: 'json', data: { text: text }, success: function(data) { events.trigger('status:add', data.text); } }); }; var NewStatusView = Backbone.View.extend({ initialize: function(options) { this.statuses = options.statuses; - this.el = options.el; events.on('status:add', this.clearInput, this); var add = $.proxy(this.addStatus, this); this.$('form').submit(add); }, addStatus: function(e) { e.preventDefault(); this.statuses.add(this.$('textarea').val()); }, clearInput: function() { this.$('textarea').val(''); }, - - $: function(selector) { - return this.el.find(selector); - } }); var StatusesView = Backbone.View.extend({ initialize: function(options) { - this.el = options.el; - events.on('status:add', this.appendStatus, this); }, appendStatus: function(text) { this.$('ul').append('<li>' + text + '</li>'); }, - - $: function(selector) { - return this.el.find(selector); - } }); $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ el: $('#new-status'), statuses: statuses }); new StatusesView({ el: $('#statuses') }); });

मॉडल का उपयोग करना

अगला कदम उन मॉडलों को पेश करना है जो सर्वर के साथ संचार करने के लिए जिम्मेदार हैं, अर्थात, अजाक्स अनुरोधों और प्रतिक्रियाओं के लिए। चूंकि बैकबोन अजाक्स को अच्छी तरह से अमूर्त करता है, हमें अब अनुरोध प्रकार, डेटा प्रकार और डेटा को निर्दिष्ट करने की आवश्यकता नहीं है। अब हमें केवल URL निर्दिष्ट करना होगा और सेव मॉडल को कॉल करना होगा। सहेजें पद्धति उस डेटा को स्वीकार करती है जिसे हम पहले पैरामीटर के रूप में सहेजना चाहते हैं, और पैरामीटर, जैसे कॉलबैक, दूसरे पैरामीटर के रूप में।

नंबर 17 को बदलें

 var events = _.clone(Backbone.Events); +var Status = Backbone.Model.extend({ + url: '/status' +}); + var Statuses = function() { }; Statuses.prototype.add = function(text) { - $.ajax({ - url: '/status', - type: 'POST', - dataType: 'json', - data: { text: text }, - success: function(data) { - events.trigger('status:add', data.text); - } - }); + var status = new Status(); + status.save({ text: text }, { + success: function(model, data) { + events.trigger('status:add', data.text); + } + }); }; var NewStatusView = Backbone.View.extend({ initialize: function(options) { this.statuses = options.statuses; events.on('status:add', this.clearInput, this); var add = $.proxy(this.addStatus, this); this.$('form').submit(add); }, addStatus: function(e) { e.preventDefault(); this.statuses.add(this.$('textarea').val()); }, clearInput: function() { this.$('textarea').val(''); } }); var StatusesView = Backbone.View.extend({ initialize: function(options) { events.on('status:add', this.appendStatus, this); }, appendStatus: function(text) { this.$('ul').append('<li>' + text + '</li>'); } }); $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ el: $('#new-status'), statuses: statuses }); new StatusesView({ el: $('#statuses') }); });

कई मॉडल प्रसंस्करण

अब जब हमने मॉडल पेश किए हैं, तो हमें मॉडल की एक सूची की अवधारणा की आवश्यकता है, जैसे कि हमारे आवेदन में स्थिति की सूची। बैकबोन में, इस अवधारणा को संग्रह कहा जाता है।
संग्रह के बारे में महान चीजों में से एक यह है कि उनके पास घटनाओं का एक क्षेत्र है। मूल रूप से, इसका मतलब यह है कि हम अपने ईवेंट चर का उपयोग करने के बजाय सीधे संग्रह पर घटनाओं को बांध और ट्रिगर कर सकते हैं। अगर अब हम सीधे स्टेटस पर घटनाओं को उत्पन्न करना शुरू करते हैं, तो इवेंट के नाम में "स्टेटस" शब्द की कोई आवश्यकता नहीं है, इसलिए हम इसे "स्टेटस: ऐड" से "ऐड" में बदल देंगे।

18 नंबर बदलें

 -var events = _.clone(Backbone.Events); - var Status = Backbone.Model.extend({ url: '/status' }); -var Statuses = function() { -}; -Statuses.prototype.add = function(text) { - var status = new Status(); - status.save({ text: text }, { - success: function(model, data) { - events.trigger("status:add", data.text); - } - }); -}; +var Statuses = Backbone.Collection.extend({ + add: function(text) { + var that = this; + var status = new Status(); + status.save({ text: text }, { + success: function(model, data) { + that.trigger("add", data.text); + } + }); + } +}); var NewStatusView = Backbone.View.extend({ initialize: function(options) { this.statuses = options.statuses; - events.on("status:add", this.clearInput, this); + this.statuses.on("add", this.clearInput, this); var add = $.proxy(this.addStatus, this); this.$('form').submit(add); }, addStatus: function(e) { e.preventDefault(); this.statuses.add(this.$('textarea').val()); }, clearInput: function() { this.$('textarea').val(''); } }); var StatusesView = Backbone.View.extend({ initialize: function(options) { + this.statuses = options.statuses; + - events.on("status:add", this.appendStatus, this); + this.statuses.on("add", this.appendStatus, this); }, appendStatus: function(text) { this.$('ul').append('<li>' + text + '</li>'); } }); $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ el: $('#new-status'), statuses: statuses }); - new StatusesView({ el: $('#statuses') }); + new StatusesView({ el: $('#statuses'), statuses: statuses }); });

हम बैकबोन निर्माण विधि का उपयोग करके इस कोड को सरल बना सकते हैं। वह मॉडल का एक नया उदाहरण बनाता है, इसे संग्रह में जोड़ता है और सर्वर पर सहेजता है। इसलिए, हमें यह इंगित करना चाहिए कि हम संग्रह के लिए किस प्रकार के मॉडल का उपयोग करेंगे। बैकबोन संग्रह का उपयोग करने के लिए दो चीजें हैं जिन्हें हमें बदलना होगा:

एक नई स्थिति बनाते समय, हमें उस विशेषता नाम को भी पास करना होगा जिसे हम सहेजना चाहते हैं, न कि केवल पाठ को
बनाते समय, "ऐड" इवेंट स्वचालित रूप से चालू हो जाता है, लेकिन केवल पाठ को पारित करने के बजाय, जैसा कि अब तक था, पूरे मॉडल को भेजा जाएगा। हम मॉडल से कॉल करके पाठ प्राप्त कर सकते हैं। मॉडल ("पाठ")

19 नंबर बदलें

  var Status = Backbone.Model.extend({ url: '/status' }); var Statuses = Backbone.Collection.extend({ - add: function(text) { - var that = this; - var status = new Status(); - status.save({ text: text }, { - success: function(model, data) { - that.trigger("add", data.text); - } - }); - } + model: Status }); var NewStatusView = Backbone.View.extend({ initialize: function(options) { this.statuses = options.statuses; this.statuses.on("add", this.clearInput, this); var add = $.proxy(this.addStatus, this); this.$('form').submit(add); }, addStatus: function(e) { e.preventDefault(); - this.statuses.add(this.$('textarea').val()); + this.statuses.create({ text: this.$('textarea').val() }); }, clearInput: function() { this.$('textarea').val(''); } }); var StatusesView = Backbone.View.extend({ initialize: function(options) { this.statuses = options.statuses; this.statuses.on("add", this.appendStatus, this); }, - appendStatus: function(text) { + appendStatus: function(status) { - this.$('ul').append('<li>' + text + '</li>'); + this.$('ul').append('<li>' + status.get("text") + '</li>'); } }); $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ el: $('#new-status'), statuses: statuses }); new StatusesView({ el: $('#statuses'), statuses: statuses }); });

el , Backbone this.collection . statuses collection :

№20

 var Status = Backbone.Model.extend({ url: '/status' }); var Statuses = Backbone.Collection.extend({ model: Status }); var NewStatusView = Backbone.View.extend({ - initialize: function(options) { + initialize: function() { - this.statuses = options.statuses; - - this.statuses.on('add', this.clearInput, this); + this.collection.on('add', this.clearInput, this); var add = $.proxy(this.addStatus, this); this.$('form').submit(add); }, addStatus: function(e) { e.preventDefault(); - this.statuses.add({ text: this.$('textarea').val() }); + this.collection.create({ text: this.$('textarea').val() }); }, clearInput: function() { this.$('textarea').val(''); } }); var StatusesView = Backbone.View.extend({ - initialize: function(options) { + initialize: function() { - this.statuses = options.statuses; - - this.statuses.on('add', this.appendStatus, this); + this.collection.on('add', this.appendStatus, this); }, appendStatus: function(status) { this.$('ul').append('<li>' + status.get('text') + '</li>'); } }); $(document).ready(function() { var statuses = new Statuses(); - new NewStatusView({ el: $('#new-status'), statuses: statuses }); + new NewStatusView({ el: $('#new-status'), collection: statuses }); - new StatusesView({ el: $('#statuses'), statuses: statuses }); + new StatusesView({ el: $('#statuses'), collection: statuses }); });

, $.proxy . Backbone . {'event selector': 'callback'} :

№21

 var Status = Backbone.Model.extend({ url: '/status' }); var Statuses = Backbone.Collection.extend({ model: Status }); var NewStatusView = Backbone.View.extend({ + events: { + 'submit form': 'addStatus' + }, + initialize: function() { this.collection.on('add', this.clearInput, this); - - var add = $.proxy(this.addStatus, this); - this.$('form').submit(add); }, addStatus: function(e) { e.preventDefault(); this.collection.create({ text: this.$('textarea').val() }); }, clearInput: function() { this.$('textarea').val(''); } }); var StatusesView = Backbone.View.extend({ initialize: function() { this.collection.on('add', this.appendStatus, this); }, appendStatus: function(status) { this.$('ul').append('<li>' + status.get('text') + '</li>'); } }); $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ el: $('#new-status'), collection: statuses }); new StatusesView({ el: $('#statuses'), collection: statuses }); });

हमारा अंतिम कदम XSS हमलों को रोकना है। Model.get ('टेक्स्ट') का उपयोग करने के बजाय हम अंतर्निहित एस्केप फ़ंक्शन का उपयोग करेंगे, यह मॉडल .स्केप ('टेक्स्ट') जैसा दिखता है । यदि आप हैंडलबार्स, मूंछें या अन्य टेम्पलेट इंजन का उपयोग करते हैं, तो आप बॉक्स से सुरक्षा प्राप्त कर सकते हैं।

22 नंबर बदलें

  var Status = Backbone.Model.extend({ url: '/status' }); var Statuses = Backbone.Collection.extend({ model: Status }); var NewStatusView = Backbone.View.extend({ events: { "submit form": "addStatus" }, initialize: function(options) { this.collection.on("add", this.clearInput, this); }, addStatus: function(e) { e.preventDefault(); this.collection.create({ text: this.$('textarea').val() }); }, clearInput: function() { this.$('textarea').val(''); } }); var StatusesView = Backbone.View.extend({ initialize: function(options) { this.collection.on("add", this.appendStatus, this); }, appendStatus: function(status) { - this.$('ul').append('<li>' + status.get("text") + '</li>'); + this.$('ul').append('<li>' + status.escape("text") + '</li>'); } }); $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ el: $('#new-status'), collection: statuses }); new StatusesView({ el: $('#statuses'), collection: statuses }); });

हम कर रहे हैं!

यह कोड का अंतिम संस्करण है:

 var Status = Backbone.Model.extend({ url: '/status' }); var Statuses = Backbone.Collection.extend({ model: Status }); var NewStatusView = Backbone.View.extend({ events: { 'submit form': 'addStatus' }, initialize: function() { this.collection.on('add', this.clearInput, this); }, addStatus: function(e) { e.preventDefault(); this.collection.create({ text: this.$('textarea').val() }); }, clearInput: function() { this.$('textarea').val(''); } }); var StatusesView = Backbone.View.extend({ initialize: function() { this.collection.on('add', this.appendStatus, this); }, appendStatus: function(status) { this.$('ul').append('<li>' + status.escape('text') + '</li>'); } }); $(document).ready(function() { var statuses = new Statuses(); new NewStatusView({ el: $('#new-status'), collection: statuses }); new StatusesView({ el: $('#statuses'), collection: statuses }); });

यहां आप पुनर्गठन के बाद आवेदन देख सकते हैं। हां, निश्चित रूप से, उपयोगकर्ता के दृष्टिकोण से, यह पहले संस्करण के समान ही दिखता है। और इसके अलावा, कोड 16 लाइनों से बढ़कर 40 से अधिक हो गया है, तो मुझे क्यों लगता है कि कोड बेहतर हो गया है? हां, क्योंकि अब हम अमूर्तता के उच्च स्तर पर काम कर रहे हैं। इस कोड को बनाए रखना आसान है, पुन: उपयोग करना आसान है और विस्तारित करना और परीक्षण करना आसान है।
जैसा कि हमने देखा, बैकबोन ने एप्लिकेशन कोड की संरचना को बेहतर बनाने में काफी मदद की, और मेरे अनुभव में अंतिम परिणाम कम जटिल है और मेरे "वेनिला जावास्क्रिप्ट" की तुलना में कम कोड है। सुविधा के लिए

UPD ने बिगाड़ने के लिए परिवर्तनों के स्रोत को छिपा दिया

JQuery से Backbone तक