पुराने एमएस अजाक्स पर एक नया रूप

एक साल पहले की बात है, मैं एक साइट पर आया था। पहली नज़र में, यह सैकड़ों समान साइटों से अलग नहीं था, लेकिन मेरे सहयोगी ने कार्यात्मक तत्वों पर क्लिक करते समय छोटे मॉड्यूल के कई अपडेट देखे। एक और खोज यह थी कि यह ओवरलोड के बिना काम करता है। आज, हम में से प्रत्येक बहुत प्रभावित नहीं होगा, लेकिन यह साइट 5 वर्षों से अधिक समय से काम कर रही है।
साइट के दो दिन के विश्लेषण के बाद, हमें इस सवाल का जवाब मिला - “यह कैसे काम करता है? "। इस साइट का केंद्र msajax.js नामक एक फ़ाइल थी , जिसने हमें इंटरनेट पर खोज करने के लिए प्रेरित किया। बहुत कम जानकारी थी, लेकिन प्रयोगों को शुरू करने के लिए पर्याप्त था।

यह पुस्तकालय छोटे तत्वों को बनाने के लिए कक्षाओं का एक सेट प्रदान करता है, जिनसे आप फिर एक पूर्ण साइट बना सकते हैं।
इसे कनेक्ट करने के लिए, बस ScriptManager को पेज पर जोड़ें और हमारी सभी फाइलों के लिए ScriptReference लिखें।
चलिए एक छोटा सा तत्व बनाना शुरू करते हैं।

Type.registerNamespace('MyNamespace'); // ctor MyNamespace.Widget = function (element, someData) { var t = this; t.template = "<span><label></label></span>"; if (!element) { element = $(t.template); } MyNamespace.Widget.initializeBase(t, [element]); }; //methods MyNamespace.Widget.prototype = { initialize: function () { var t = this; MyNamespace.Widget.callBaseMethod(t, 'initialize'); }, dispose: function () { var t = this; MyNamespace.Widget.callBaseMethod(t, 'dispose'); }, someMethod: function(){ var t = this; } }; MyNamespace.Widget.registerClass('MyNamespace.Widget', Sys.UI.Control); 

हमारे तत्व में एक निर्माता और विधियों का एक सेट शामिल है। निर्माणकर्ता तब कहा जाता है जब तत्व का एक उदाहरण बनाने की कोशिश करता है और हमेशा तत्व को पहले पैरामीटर के रूप में लेता है, यह DOM तत्व है जिसमें इसे प्रदर्शित किया जाएगा। अगला, आधार वर्ग के आरंभीकरण को कहा जाता है। इस मामले में, यह Sys.UI.Control है , जिसे हमने रजिस्टरक्लास कहते समय निर्दिष्ट किया था। यह विधि तीसरे पैरामीटर के रूप में एक इंटरफ़ेस ले सकती है, लेकिन अगली बार अगर कोई इस पद के लिए इच्छुक है तो इसके बारे में और अधिक।
तरीकों के सेट में हमेशा दो तरीके होते हैं, आरंभ और निपटान, नाम से यह स्पष्ट है कि वे क्या कर रहे हैं और मैं उन्हें वर्णन करने में बिंदु नहीं देखता हूं, मैं कह सकता हूं कि मैं आमतौर पर ईवेंट हैंडलर तैयार करता हूं और मुझे जिन तत्वों की आवश्यकता होती है उन्हें भरने में, और निपटान में मैं DOM से एक तत्व को हटाने के तर्क का वर्णन करता हूं। विभिन्न घटनाओं से हटकर। हम अपने विभिन्न तरीकों का भी वर्णन कर सकते हैं जो निर्मित उदाहरण के माध्यम से उपलब्ध होंगे। आप $ प्राप्त विधि का उपयोग करके तत्व को पास कर सकते हैं, जो html तत्व की आईडी विशेषता का नाम लेता है।

  Global.widget = new MyNamespace.Widget($get("ID")); Global.widget.initialize(); 

मुझे लगता है कि सबसे बड़ा प्लस Sys.UI.Control वर्ग का get_element () तरीका है, यह हमें एक अलग इकाई के रूप में हमारे तत्व के साथ काम करने की अनुमति देता है:

  initialize: function () { var t = this; ... $("label",t.get_element()).html("Hello world!"); } 

हम पूरे डोम के साथ काम नहीं करते हैं, लेकिन इसके एक छोटे से हिस्से के साथ, जो केवल साइट की गति को सकारात्मक रूप से प्रभावित करता है।
इस पुस्तकालय में एक और महान Sys.EventHandlerList वर्ग है जिसे कॉलबैक कार्यों के लिए भंडारण के रूप में उपयोग किया जा सकता है।

 BaseControl = function (element) { var t = this; BaseControl.initializeBase(t, [element]); t.handlers = new Sys.EventHandlerList(); }; BaseControl.prototype = { initialize: function () { var t = this; BaseControl.callBaseMethod(t, "initialize"); }, dispose: function () { var t = this; t.handlers = null; BaseControl.callBaseMethod(t, "dispose"); }, addEventHandler: function (name, h) { var t = this; t.handlers.addHandler(name, h); }, removeEventHandler: function (name, h) { var t = this; if (t.handlers) { t.handlers.removeHandler(name, h); } }, raiseEventHandler: function (name, args) { var t = this; var h = t.handlers.getHandler(name); if (h) h(args); } }; BaseControl.registerClass("BaseControl", Sys.UI.Control); 

इस वर्ग से इनहेरिट करते हुए, हम अपने तत्व को उसके राज्य में परिवर्तन के बारे में सभी ग्राहकों को सूचित करने की अनुमति देते हैं। AddEventHandler विधि को कॉल करने वाले सदस्य, उनके नाम को पारित करते हुए, उनके लिए ब्याज की घटना की सदस्यता लेते हैं। छोटी-मोटी कठिनाइयाँ हैं, आप केवल विधि के संदर्भ को पास नहीं कर सकते, आपको Function.createDelegate का उपयोग करके एक प्रतिनिधि बनाना होगा और इसे पास करना होगा। यदि यह हमारे साथ नहीं किया जाता है, तो इस वर्ग के सभी तत्वों को ऑब्जेक्ट की स्थिति में परिवर्तन के बारे में एक संदेश प्राप्त होगा, और हम इस तरह के लक्ष्य का पीछा नहीं करते हैं। अंत में, इन प्रतिनिधियों को हटाए जाने की आवश्यकता है, या आप अपनी साइट पर तत्वों के अतुलनीय व्यवहार का अवलोकन करेंगे।

इस लाइब्रेरी का उपयोग करते हुए, मेरी टीम ने बहुत समृद्ध कार्यक्षमता वाली साइट को लागू किया, और हमें बहुत ही अच्छे परिणाम मिले।