एक अद्भुत साइट http://todomvc.com/ है , जो विभिन्न जावास्क्रिप्ट एमवी * ( मॉडल-व्यू- [नियंत्रक] ) चौखटे का उपयोग करके एक ही समस्या के समाधान को प्रदर्शित करती है। अब दर्जनों अलग-अलग ढांचे हैं, जिनमें से प्रत्येक के अपने फायदे और नुकसान हैं। एंगुलर , एम्बर और बैकबोन जैसे दिग्गज हैं। उच्च प्रतिस्पर्धा के बावजूद, मैं अभी भी अपने MV * फ्रेमवर्क - jWidget का प्रदर्शन करना चाहूंगा ।

मैंने जल्दी से टोडोएमवीसी वेबसाइट पर प्रस्तुत सभी समाधानों के माध्यम से देखा और jWidget के समान एक भी ढांचा नहीं मिला। तथ्य यह है कि, जावास्क्रिप्ट के अलावा, मैं जावा, सी #, और सी ++ में अतीत में ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग भाषाओं में बहुत प्रोग्राम करता हूं। इसलिए, मैं ऑब्जेक्ट-ओरिएंटेड प्रोग्रामिंग, SOLID सिद्धांतों और ऑब्जेक्ट-ओरिएंटेड डिज़ाइन के पैटर्न का बहुत बड़ा प्रशंसक हूं। मुझे एक ऐसी रूपरेखा की आवश्यकता नहीं है जो मुझे मानक वस्तु-उन्मुख समाधानों का उपयोग करने की संभावना से विवश करे। मैंने मौजूदा टोडो एमवीसी समाधानों में जो देखा वह इस संबंध में आत्मविश्वास को प्रेरित नहीं करता है। एक नियम के रूप में, वे कुछ घोषणात्मक वाक्यविन्यास और एक शक्तिशाली टेम्पलेट इंजन प्रदान करते हैं, लेकिन इस सब के वस्तु-उन्मुख आधार, भले ही यह मौजूद हो, हमारी आंखों से छिपा हुआ है।

अंग्रेजी प्रलेखन: http://enepomnyaschih.github.io/jwidget/index.html#/guide/ome

रूसी में प्रलेखन: http://enepomnyaschih.github.io/jwidget/index.html#!/guide/ruhome

गिटहब परियोजना: https://github.com/enepomnyaschih/jwidget

ट्विटर: @jwidgetproject

टोडोमेक्सी कार्यान्वयन jWidget पर: http://enepomnyaschih.github.io/todomvc/labs/altecture-examples/jwidget/release/

स्रोत लिंक अभी वहां काम नहीं करता है, क्योंकि jWidget केवल मेरे कांटे में है। नीचे स्रोत कोड का सही लिंक है।

TodoMVC के लिए JWidget स्रोत कोड: https://github.com/enepomnyaschih/todomvc/tree/gh-pages/labs/altecture-examples/jwidget/

संक्षेप में jWidget की मुख्य विशेषताएं सूचीबद्ध करें:

1. ओओपी के सिद्धांतों का सख्त अनुपालन। नमूना ट्यूटोरियल के साथ एक पूरी तरह से प्रलेखित द्विभाषी वर्ग पुस्तकालय।

2. सभी के ऊपर स्क्रिप्ट की गति। इसलिए, क्लास कंस्ट्रक्टर की स्पष्ट घोषणा और कक्षाओं की घोषणा करते समय क्लोजर का न्यूनतम उपयोग, क्योंकि Google Chrome में, प्रोटोटाइप के माध्यम से वंशानुक्रम "मॉड्यूल" पैटर्न (फ़ायरफ़ॉक्स में, इसके विपरीत, वहाँ अंतर बहुत अच्छा नहीं है) के अनुसार विरासत की तुलना में बहुत अधिक कुशल है ।

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

4. फ्रेमवर्क jQuery पर चलता है।

5. इसमें सबसे सरल टेम्पलेट इंजन है जिसे फंक्शन में भेजे जाने से पहले प्रीप्रोसेसिंग की आवश्यकता नहीं होती है https://api.jquery.com/jQuery.parseHTML/ । टेम्प्लेट में कोई जादू नहीं, कोई इनलाइन कोड नहीं: सभी डेटा बाइंडिंग को घटक के जावास्क्रिप्ट कोड में लागू किया जाता है। इसके कारण, समान डेटा बाइंडिंग तकनीकों का उपयोग किसी मॉडल के साथ किसी दृश्य को जोड़ने के लिए और वस्तुओं को किसी मॉडल के भीतर या किसी दृश्य के भीतर जोड़ने के लिए किया जा सकता है, जो अक्सर उपयोगी होता है।

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

7. मूल एप्लिकेशन बिल्डर, jWidget एसडीके , अनुप्रयोग विकास को सरल करता है और इसे उत्पादन से पहले कोड को अनुकूलित करता है। इसे ग्रंटज के लिए प्लगइन्स के ढेर के साथ बदलने की योजना है। यह सिर्फ इतना है कि जब मैंने jWidget, GruntJS या ऐसा कुछ विकसित करना शुरू किया, जो मौजूद नहीं था।

यह पुष्टि करने के लिए कि jWidget बहुत तेज है, मैंने उस समय को मापा, जिसमें टोडो वीवीसी को 500 प्रविष्टियां लेने के लिए 0 मिलीसेकंड के इंतजार के साथ प्रत्येक प्रविष्टि को जोड़ने के बाद ब्राउज़र को देखने के लिए समय दिया गया है। इसके अलावा, मैंने लगभग सभी रिकॉर्डों के लिए चुनिंदा सभी और साफ़ किए गए कार्यों के समय को मापा। परिणाम इस प्रकार हैं:

कोणीय जेएस - 16847 मिलीसेकंड। सभी का चयन करें और पूरा हो गया संचालन तत्काल हैं।
कोणीय जेएस (प्रदर्शन अनुकूलित संस्करण) - 13287 मिलीसेकंड। सभी का चयन करें और पूरा हो गया संचालन तत्काल हैं।
एम्बर जेएस - 13095 मिलीसेकंड। सभी का चयन करें और पूरा हो गया संचालन लगभग 3 सेकंड लें।
बैकबोन - 9506 मिलीसेकंड। सभी का चयन करें और पूरा हो गया संचालन लगभग 3 सेकंड लें।
jWidget - 9974 मिलीसेकंड। सभी का चयन करें और पूरा हो गया संचालन तत्काल हैं।
YUI - एक मिनट से अधिक। मैंने इंतजार नहीं किया

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

अब मैं jWidget के तंत्र के बारे में बताऊंगा। ढांचे में 5 परतें शामिल हैं:

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

1. कक्षाओं और वस्तुओं।

निम्नलिखित jWidget वर्ग का एक उदाहरण घोषणा है। एक वर्ग को मानक वंशानुक्रम द्वारा बनाया जाता है, जिसमें थोड़ी मात्रा में सिंथैटिक शुगर के साथ पतला एक प्रोटोटाइप होता है।

//  . var Hand = function(side) { //    . Hand._super.call(this); //  . this.side = side; //    ,     . //  ,         . this.grabbedObject = null; }; //  Hand  JW.Class. JW.extend(Hand, JW.Class, { //    ,   . // String side; // Grabbable grabbedObject; //  . grab: function(obj) { this.grabbedObject = obj; }, //    . destroy: function() { console.log("Destroying " + this.side + " hand"); //         _super. this._super(); } });

JW.Class की प्रमुख विशेषताओं में से एक वस्तु एकत्रीकरण तंत्र है, जो उन वस्तुओं को नष्ट करने का कार्य करता है जो किसी अन्य वस्तु के नियंत्रण में हैं। मुझे यह विचार वस्तु-उन्मुख डिजाइन की पुस्तक ट्रिक्स से परिचय से मिला । चार के गिरोह से डिजाइन पैटर्न । यह हमें बताता है कि सभी पॉइंटर्स ऑब्जेक्ट्स को दो प्रकारों में विभाजित किया गया है: एकत्रीकरण और जागरूकता। जागरूकता का मतलब है कि जो वस्तु सूचक का मालिक है, वह उस वस्तु के लिए कोई जिम्मेदारी नहीं उठाता है जिसे वह संदर्भित करता है। उसके पास अपने सार्वजनिक क्षेत्रों और तरीकों तक पहुंच है, लेकिन इस वस्तु का जीवनकाल उसके नियंत्रण में नहीं है। हालाँकि, एकत्रीकरण का अर्थ है कि जिस वस्तु के पास लिंक है, वह उस वस्तु को नष्ट करने के लिए जिम्मेदार है, जिसे वह संदर्भित करता है। एक नियम के रूप में, कुल वस्तु जीवित रहती है जबकि मालिक वस्तु जीवित है, हालांकि अधिक जटिल मामले हैं।

JWidget में, JW.Class वर्ग की स्वयं की विधि के माध्यम से एकत्रीकरण लागू किया जाता है। ऑब्जेक्ट A के ऑब्जेक्ट B के पास होने पर, आपने ऑब्जेक्ट A को ऑब्जेक्ट B का स्वामी बना दिया। जब आप ऑब्जेक्ट A को नष्ट करते हैं, तो ऑब्जेक्ट B स्वचालित रूप से नष्ट हो जाएगा। सुविधा के लिए, स्वयं की विधि ऑब्जेक्ट बी लौटाती है। निम्नलिखित कोड का एक उदाहरण है जो इस सुविधा का उपयोग करता है।

 var Soldier = function() { Soldier._super.call(this); //   .  -   , //   . this.leftHand = this.own(new Hand("left")); this.rightHand = this.own(new Hand("right")); }; JW.extend(Soldier, JW.Class, { // Hand leftHand; // Hand rightHand; destroy: function() { console.log("Destroying soldier"); this._super(); } });

अब हम एक सैनिक बना सकते हैं और इसे नष्ट करने की विधि को बुलाकर नष्ट कर सकते हैं।

 var soldier = new Soldier(); soldier.destroy();

परिणामस्वरूप, हम ब्राउज़र कंसोल में निम्न पंक्तियाँ देखेंगे:

 सैनिक को नष्ट करना
 दाहिने हाथ को नष्ट करना
 बाएं हाथ को नष्ट करना

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

एकत्रित वस्तुएं उल्टे क्रम में नष्ट हो जाती हैं, जो उनके बीच संबंधों की उपस्थिति में अखंडता की गारंटी देता है।

2. घटनाएँ।

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

जैसा कि मैंने लेख की शुरुआत में लिखा था, jWidget में स्क्रिप्ट की गति सभी से ऊपर है। इसलिए, मानक घटना सदस्यता योजना, जो प्रस्तावित है, उदाहरण के लिए, jQuery में, हमारे लिए उपयुक्त नहीं है।

 $("#document").bind("click", onClick); $("#document").unbind("click", onClick);

यहां समस्या यह है कि घटना प्रतिक्रिया एल्गोरिथ्म में रैखिक कम्प्यूटेशनल जटिलता (संपूर्ण खोज) है। मैं एक ऐसी योजना को लागू करने में कामयाब रहा, जिसमें घटना से सदस्यता समाप्त होने का समय उस कुंजी के बराबर होता है, जिसे शब्दकोष से हटा दिया गया था, जो बहुत तेज है। इसके अलावा, jWidget इवेंट योजना OOP के सभी सिद्धांतों के अनुसार लागू की जाती है और वस्तुओं के एकत्रीकरण के तंत्र के साथ पूरी तरह से जोड़ती है।

 var Document = function(title) { Document._super.call(this); this.title = title; //   . this.titleChangeEvent = this.own(new JW.Event()); }; JW.extend(Document, JW.Class, { // String title; // JW.Event titleChangeEvent; setTitle: function(title) { if (this.title === title) { return; } this.title = title; //  . this.titleChangeEvent.trigger(new JW.ValueEventParams(this, title)); } }); var Client = function(document) { Client._super.call(this); this.document = document; //   .  ,     //     . this.own(document.titleChangeEvent.bind(this._onTitleChange, this)); }; JW.extend(Client, JW.Class, { // Document document; _onTitleChange: function(params) { console.log("Changed title to " + params.value); } }); //  . var doc = new Document("apple"); var client = new Client(doc); doc.setTitle("banana"); // : Changed title to banana doc.setTitle("cherry"); // : Changed title to cherry //    ,  . client.destroy(); doc.destroy();

घटना को JW.Event वर्ग द्वारा दर्शाया गया है। ईवेंट सदस्यता को JW.EventAttachment वर्ग के उदाहरण के रूप में बाइंड विधि द्वारा वापस किया जाता है। एक सदस्यता को नष्ट करना एक घटना से सदस्यता समाप्त करने के बराबर है। जब हम ट्रिगर विधि का उपयोग करके किसी घटना को फेंकते हैं, तो हम JW.EventParams का एक उदाहरण पास करते हैं, इसे एक तर्क के रूप में इवेंट हैंडलर को पास करते हैं।

3. गुण और उनके सहायक

यदि डेटा बाइंडिंग की संभावना प्रदान नहीं करता है तो एक फ्रेमवर्क को पूर्ण विकसित MV * फ्रेमवर्क नहीं कहा जा सकता है। jWidget यह सुविधा प्रदान करता है। निम्न वर्गों की वस्तुएं अपने परिवर्तन के बारे में घटनाओं को स्वचालित रूप से फेंकती हैं, और इसलिए, डेटा बाध्यकारी के लिए उपयोग किया जा सकता है:

मैं अगले पैराग्राफ में संग्रह (सरणी, मानचित्र, सेट) के बारे में बात करूंगा और अब मैं यह बताना चाहूंगा कि एक संपत्ति ( JW.Property ) क्या है। एक संपत्ति एक "चर" है जो अपने मूल्य में बदलाव के बारे में घटनाओं को फेंकता है। इसलिए इस वर्ग का सबसे सरल इंटरफ़ेस:

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

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

 var source = new JW.Property("apple"); var target = new JW.Property(); new JW.Copier(source, {target: target}); assertEqual("apple", target.get()); source.set("banana"); assertEqual("banana", target.get());

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

 var source = new JW.Property("apple"); var target1 = new JW.Property(); target1.bindTo(source); var target2 = new JW.Property(); target2.bindTo(target1); source.set("banana"); assertEqual("banana", target2.get());

मक्खी पर संपत्तियों की नकल केवल शुरुआत है। आइए सूत्र text = value + " " + unit

का उपयोग करके दो मौजूदा गुणों के आधार पर एक नई संपत्ति बनाने का प्रयास करें:

 var value = new JW.Property(1000); var unit = new JW.Property("MW"); var functor = new JW.Functor([ value, unit ], function(value, unit) { return value + " " + unit; }, this); var target = functor.target; assertEqual("1000 MW", target.get()); value.set(1500); assertEqual("1500 MW", target.get()); unit.set(""); //    assertEqual("1500 ", target.get());

अंत में, निर्मित संपत्ति के कुछ प्रतिनिधित्व तत्व के अंदर पाठ को बांधें:

 new JW.UI.TextUpdater("#capacity", target);

अब मान और इकाई को बदलते समय, #capacity तत्व के अंदर का पाठ स्वचालित रूप से अपडेट हो जाएगा।

प्रलेखन में JW.Property वर्ग सुविधाओं की पूरी सूची देखें।

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

संपत्ति के मूल्य को स्वयं वेल्यू विधि का उपयोग करके एकत्र किया जा सकता है।

4. संग्रह और तुल्यकालिक

jWidget अपने स्वयं के संग्रह वर्गों में से 3 का परिचय देता है: JW.AbstractArray , JW.AbstractMap और JW.AbstractSet । इसका मतलब यह नहीं है कि आपको देशी ऐरे और ऑब्जेक्ट का उपयोग करने से मना किया गया है - jwidget संग्रह आसानी से देशी और इसके विपरीत में परिवर्तित हो जाते हैं। प्रत्येक jwidget संग्रह में दो कार्यान्वयन हैं - एक साधारण एक और एक चेतावनी:

- JW.AbstractArray : JW.Array और JW.ObservableArray

- JW.AbstractMap : JW.Map और JW.ObservableMap

- JW.AbstractSet : JW.Set और JW.ObservableSet

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

 // @param {JW.AbstractArray} documents function createDocumentViews(documents) { return documents.$map(function(document) { return new DocumentView(document); }, this); }

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

 function createDocumentViews(documents) { return documents.createMapper({ createItem: function(document) { return new DocumentView(document); }, destroyItem: function(documentView) { documentView.destroy(); }, scope: this }).target; }

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

 var DocumentList = function(documents) { DocumentList._super.call(this); this.documentViews = this.createDocumentViews(documents); }; JW.extend(DocumentList, JW.Class, { createDocumentViews: function(documents) { return this.own(documents.createMapper({ createItem: function(document) { return new DocumentView(document); }, destroyItem: function(documentView) { documentView.destroy(); }, scope: this })).target; } });

इस बात पर ध्यान दें कि कोष्ठक कैसे खड़े होते हैं। हम बिल्कुल मैपर को एकत्र करते हैं, और ठीक उसके लक्ष्य पर लौटते हैं।

CreateMapper मेथड JW.Array और JW.ObservableArray दोनों के लिए काम करता है। केवल पहले मामले में, यह निरंतर डेटा बाइंडिंग को लागू करने में सक्षम नहीं होगा, क्योंकि JW.Array किसी भी घटना को नहीं फेंकता है। लेकिन यदि आवश्यक हो तो आप किसी भी समय JW.ObservableArray के साथ JW.Array को बदलने की क्षमता के साथ एक बिल्कुल बहुरूपी समाधान विकसित कर सकते हैं।

jWidget सिंक्रोनाइज़र की एक विस्तृत श्रृंखला प्रदान करता है। पूरी सूची के लिए प्रलेखन देखें।

संग्रह के तत्वों को स्वयं के तरीके का उपयोग करके एकत्र किया जा सकता है।

5. अवयव

अंत में, हम प्रस्तुति के लिए तैयार हो गए। jWidget सभी प्रस्तुति घटकों के लिए आधार वर्ग के रूप में JW.UI.Component वर्ग प्रदान करता है। प्रत्येक घटक वर्ग का अपना टेम्पलेट होता है, जो इस वर्ग के साथ विरासत में मिला है। एक टेम्प्लेट सादा HTML है, जिसमें 2 नई विशेषताएँ जोड़ी जाती हैं : jwclass और jwid । टेम्पलेट JW.UI.template विधि का उपयोग करके घटक वर्ग के लिए बाध्य है।

 var MyComponent = function(message, link) { MyComponent._super.call(this); this.message = message; this.link = link; }; JW.extend(MyComponent, JW.UI.Component, { // String message; // String link; renderComponent: function() { this._super(); this.getElement("hello-message").text(this.message); this.getElement("link").attr("href", this.link); } }); JW.UI.template(MyComponent, { main: '<div jwclass="my-component">' + '<div jwid="hello-message" />' + '<a href="#" jwid="link">Click me!</a>' + '</div>' });

Jwclass विशेषता केवल एक घटक के मूल तत्व के लिए सेट की गई है, और यह CSS तत्व वर्गों के लिए एक उपसर्ग है। इस तत्व के CSS वर्ग के लिए jwid विशेषता एक प्रत्यय है। उदाहरण के लिए, उपरोक्त टेम्पलेट निम्नलिखित HTML तक विस्तृत है:

 <div class="my-component"> <div class="my-component-hello-message" /> <a href="#" class="my-component-link">Click me!</a> </div>

DOM में एक कंपोनेंट को रेंडर करने के लिए, आप निम्न निर्देश का उपयोग कर सकते हैं:

 var component = new MyComponent("Hello, Wanderer!", "http://google.com"); component.renderTo("body");

घटक कोड दिखाता है कि गेटईमेंट विधि का उपयोग करके, आप इसके jwid द्वारा एक तत्व के लिए एक jQuery आवरण प्राप्त कर सकते हैं।

रेंडरकंपोनेंट विधि एक घटक जीवन चक्र विधि है। इसे ओवरलोड करके, आप एक घटक के घटकों में हेरफेर कर सकते हैं और बाल घटक बना सकते हैं।

बाल घटक तीन प्रकार के होते हैं:

नाम दिया गया बाल घटक
आसान बदली बच्चे के घटक
बाल घटकों की सरणियाँ

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

 var Application = function() { Application._super.call(this); }; JW.extend(Application, JW.UI.Component, { renderComponent: function() { this._super(); this.children.set(this.own(new Header()), "header"); this.children.set(this.own(new Content()), "content"); } }); JW.UI.template(Application, { main: '<div jwclass="application">' + '<div jwid="header" />' + '<div jwid="content" />' + '</div>' });

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

आसानी से बदली जाने वाली बाल घटक नामित लोगों के समान हैं, लेकिन JW.Property के आधार पर काम करते हैं। वे addReplaceable विधि द्वारा जोड़े जाते हैं। इस तरह के घटकों को JW.Mapper का उपयोग करके आसानी से प्रदान किया जाता है :

 var Application = function(selectedDocument) { Application._super.call(this); this.selectedDocument = selectedDocument; }; JW.extend(Application, JW.UI.Component, { // JW.Property selectedDocument; renderComponent: function() { this._super(); var documentView = this.own(new JW.Mapper([ this.selectedDocument ], { createValue: function(document) { return new DocumentView(document); }, destroyValue: function(documentView) { documentView.destroy(); }, scope: this })).target; this.addReplaceable(documentView, "document"); } }); JW.UI.template(Application, { main: '<div jwclass="application">' + '<div jwid="document" />' + '</div>' });

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

बाल घटकों की सारणियाँ JW.AbstractArray पर आधारित हैं। उन्हें AddArray विधि द्वारा जोड़ा जाता है। यदि सरणी JW.ObservableArray है, तो विधि इस सरणी के साथ दृश्य के निरंतर सिंक्रनाइज़ेशन प्रदान करेगी। बाल घटकों की सारणी आसानी से createMapper विधि के माध्यम से प्रदान की जाती है:

 var Application = function(documents) { Application._super.call(this); this.documents = documents; }; JW.extend(Application, JW.UI.Component, { // JW.AbstractArray documents; renderComponent: function() { this._super(); var documentViews = this.own(this.documents.createMapper({ createItem: function(document) { return new DocumentView(document); }, destroyItem: function(documentView) { documentView.destroy(); }, scope: this })).target; this.addArray(documentViews, "documents"); } }); JW.UI.template(Application, { main: '<div jwclass="application">' + '<div jwid="documents" />' + '</div>' });

नामित और आसानी से बदली जाने वाली बाल घटकों के विपरीत, एक सरणी निर्दिष्ट तत्व को प्रतिस्थापित नहीं करता है, लेकिन इस तत्व के अंदर बाल घटकों को जोड़ता है। तो, आप AddArray विधि के लिए दूसरे तर्क को छोड़ कर सीधे घटक के मूल तत्व में बाल घटकों की एक सरणी जोड़ सकते हैं।

सुविधा के लिए, jWidget आपको रेंडरचिल्ड विधि को परिभाषित करने की अनुमति देता है, जहां चाइल्डआईड तत्व की जेवीडी है, जिसे कैमलकेज़ में कैपिटल किया गया है। विधि इनपुट के रूप में एक टेम्पलेट तत्व को स्वीकार करती है। नीचे इस पद्धति की विभिन्न विशेषताएं दी गई हैं:

 var Application = function(title, documents, selectedDocument) { Application._super.call(this); this.title = title; this.documents = documents; this.selectedDocument = selectedDocument; }; JW.extend(Application, JW.UI.Component, { // JW.Property<String> title; // JW.AbstractArray<Document> documents; // JW.Property<Document> selectedDocument; //     ,       . renderTitle: function(el) { this.own(new JW.UI.TextUpdater(el, this.title)); }, //    JW.UI.Component,     . renderHeader: function() { return this.own(new Header()); }, //    JW.AbstractArray,     . renderDocumentList: function() { return this.own(this.documents.createMapper({ createItem: function(document) { return new DocumentListItem(document); }, destroyItem: JW.destroy, //  scope: this })).target; }, //    JW.Property,      . renderSelectedDocument: function() { return this.own(new JW.Mapper([ this.selectedDocument ], { createValue: function(document) { return new DocumentPanel(document); }, destroyValue: JW.destroy, //  scope: this })).target; }, //    false,       DOM renderHappyNewYear: function() { return new Date().getMonth() === 0; } }); JW.UI.template(Application, { main: '<div jwclass="application">' + '<div jwid="title" />' + '<div jwid="header" />' + '<div jwid="document-list" />' + '<div jwid="selected-document" />' + '<div jwid="happy-new-year">Happy new year!</div>' + '</div>' });

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

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

jWidget - ऑब्जेक्ट ओरिएंटेड JavaScript MV फ्रेमवर्क

1. कक्षाओं और वस्तुओं।

2. घटनाएँ।

3. गुण और उनके सहायक

4. संग्रह और तुल्यकालिक

5. अवयव

More articles: