🕑 🚭 🐆 एक वेब अनुप्रयोग में इवेंट-संचालित मॉडल का अनुप्रयोग ⛸️ ➖ 📨

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

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

तो चलिए शुरू करते है!

हमारे आवेदन में क्या शामिल है?

कोर। फ़ाइलों के बारे में डेटा संग्रहीत करता है और सर्वर साइड के साथ इंटरैक्ट करता है
देखें। फ़ाइलों की एक सूची बनाता है और उपयोगकर्ता के कार्यों का जवाब देता है
टीम। फ़ाइलों के साथ कुछ क्रियाएं करें

अब हम वर्णन करते हैं कि हमारे घटक एक दूसरे के साथ कैसे संपर्क करते हैं।

और ताओ की सच्ची शक्ति को खोजने के लिए हमारे ज्ञानोदय के क्रम में, हम सबसे पहले एक दूसरे के साथ संपर्क साधने के असफल तरीके - “प्रत्यक्ष संपर्क” का वर्णन करते हैं।

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

- क्या यह जटिल है?

लेकिन अभी इसके लिए यह सहूलियत है। अब एक और दृश्य जोड़ते हैं - डायरेक्टरी ट्री। अब कर्नेल को याद रखना चाहिए कि इस तरह की फ़ाइल को एक सूची के साथ भी स्थानांतरित किया जाना चाहिए।
और एक दृश्य जोड़ें - "पसंदीदा" ।
कोर सदमे में है - "क्या आपको यही चाहिए?"

मैं जारी नहीं रखूंगा - और यह इतना स्पष्ट है कि हमारे पास एक्सटेंशन के लिए कोई अवसर नहीं है। प्रत्येक नई टीम को लागू करने के लिए, हमें लगातार कोर जोड़ना होगा।

घटनाओं की विचारधारा

और अब हम तब तक कार्य पर ध्यान करेंगे, जब तक ज्ञानोदय के परिणामस्वरूप (मैंने वादा किया था कि यह आएगा), हम नहीं करेंगे:

- कोई भी बदलाव एक घटना है!

और इसलिए कल को मत भूलना कि हमारे मन में क्या था, हम कुछ विवरण लिखेंगे।

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

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

- क्या यह आसान हो गया है?

निस्संदेह। लेकिन इसके अलावा, हमारे आवेदन ने दो महत्वपूर्ण गुणों का अधिग्रहण किया है।

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

और अब हम इस बिंदु पर पहुंचते हैं कि हम सबसे अधिक प्यार करते हैं - कोड लिखें!

कार्यान्वयन एक अपवाद के साथ jQuery के रूप में ही दिखेगा -
किसी विशेष ईवेंट कॉल से जुड़े डेटा को इवेंट ऑब्जेक्ट के क्षेत्र में ही स्थानांतरित कर दिया जाएगा।

"use strict"; //   window.elFinder = function(node, options) { var self = this, //   listeners = {}; /** *   id      * * @type Array */ this.selected = []; /** *     * * @type Object */ this.ui = {}; /** *     * * @type Object */ this.commands = {}; /** *   . * * @param String  ,          * @param Object   * @return elFinder */ this.bind = function(event, callback) { var i; if (typeof(callback) == 'function') { event = ('' + event).toLowerCase().split(/\s+/); for (i = 0; i < event.length; i++) { if (listeners[event[i]] === void(0)) { listeners[event[i]] = []; } listeners[event[i]].push(callback); } } return this; }; /** *  . * * @param String   * @param Object   * @return elFinder */ this.unbind = function(event, callback) { var l = listeners[('' + event).toLowerCase()] || [], i = l.indexOf(callback); i > -1 && l.splice(i, 1); return this; }; /** *     . * * @param String   * @param Object     * @return elFinder */ this.trigger = function(event, data) { var event = event.toLowerCase(), handlers = listeners[event] || [], i; if (handlers.length) { event = $.Event(event); for (i = 0; i < handlers.length; i++) { //           //    event.data = $.extend(true, {}, data); try { if (handlers[i](event, this) === false || event.isDefaultPrevented()) { break; } } catch (ex) { window.console && window.console.log && window.console.log(ex); } } } return this; } /** *     . * * @param Object    * @return jQuery.Deferred */ this.ajax = function(data) { var self = this, dfrd = $.Deferred() .fail(function(error) { self.error({error : error}); }) .done(function(data) { //      self.trigger(data.cmd, data); }); $.ajax({ // ...   data : data }).error(function() { dfrd.reject('Unable to connect to backend'); }).success(function(data) { if (!this.validData(data)) { dfrd.reject('Invalid data from backend'); } else if (data.error) { dfrd.reject(data.error); } dfrd.resolve(data); }) return dfrd; } //  -  - // .............. //   ""   // -  / . $.each(['open', 'select', 'error'], function(i, name) { self[name] = function() { var arg = arguments[0]; return arguments.length == 1 && typeof(arg) == 'function' ? self.bind(name, arg) : self.trigger(name, $.isPlainObject(arg) ? arg : {}); } }); //       this.open(function(e) { //     }) .select(function(e) { //     this.selected = e.data.selected; }) .error(function(e) { //     alert(e.data.error); }); } elFinder.prototype = { //  views : { //   cwd : function(fm, node) { var self = this, view = $('<div/>') .appendTo(node) .delegate('div[id]', 'click', function() { view.find('div[id]').removeClass('selected'); $(this).addClass('selected'); //      "select" fm.select({selected : [this.id]}); }) .delegate('div[id]', 'dblclick', function() { fm.trigger('dblclick', {target : this.id}); }) ; //    "open" fm.open(function(e) { var files = e.data.files; //      }); } }, //  commands : { open : function(fm) { this.enabled = false; //    "dblclick" fm.select(function(e) { // ,     / //     ,     Enter this.enabled = e.data.selected.length > 0; }) bind('dblclick', function(e) { //     fm.ajax({cmd : 'open', target : e.data.target}); }); } } }

एक बार फिर, कोड बहुत सरल है और हमारी परियोजना के वास्तविक कोड से काफी अलग है। यदि आप यह देखने के लिए उत्सुक हैं कि यह वास्तव में कैसा दिखता है - गिटहब पर एक परियोजना

और अब संक्षेप में।

ईवेंट-चालित मॉडल का उपयोग करके हमें क्या लाभ हुआ है?

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

नुकसान:

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

मेरी राय में, हमारे लिए एकमात्र महत्वपूर्ण माइनस इस अद्भुत पैटर्न का उपयोग करने के सभी लाभों से आगे नहीं निकलता है।

संबंधित लिंक:
en.wikipedia.org/wiki/Coupling_(computer_science)
en.wikipedia.org/wiki/Event-driven_architecture
ru.wikipedia.org/wiki/-_

एक वेब अनुप्रयोग में इवेंट-संचालित मॉडल का अनुप्रयोग

हमारे आवेदन में क्या शामिल है?

घटनाओं की विचारधारा

और अब संक्षेप में।

ईवेंट-चालित मॉडल का उपयोग करके हमें क्या लाभ हुआ है?

नुकसान:

More articles: