Backbone.Component - Backbone.js के लिए स्टैंडअलोन UI घटक

हमारी परियोजना में, हम मुख्य JS फ्रेमवर्क के रूप में Backbone.js का उपयोग करते हैं। पसंद उस पर क्यों गिर गई, मैं अभी भी आपको निम्नलिखित पोस्ट में से एक में बता सकता हूं, इस बार कुछ और बात कर रहा हूं। जैसा कि आप जानते हैं, बॉक्स से बैकबोन बहुत मामूली सुविधाएँ प्रदान करता है, इसके लिए अधिकतम लचीलेपन के साथ क्षतिपूर्ति करता है। चूंकि बैकबोन लंबे समय से अस्तित्व में है और डेवलपर्स के एक गंभीर समुदाय का अधिग्रहण करने में कामयाब रहा है, आज बैकबोन अनुप्रयोगों की कई विशिष्ट समस्याओं को हल करने के लिए बैकबोन पर निर्मित प्लगइन्स या पूरे ढांचे हैं (कई लोग उदाहरण के लिए बैकबोन.मार्टलेट को जानते हैं, हाल ही में जारी किया गया आधार बहुत आशाजनक लगता है - वैसे, मैं आपको एक नज़दीकी नज़र लेने की सलाह देता हूं)।
फिर भी, एक काफी सामान्य कार्य है, एक पर्याप्त समाधान जिसके बारे में मुझे अभी भी पता नहीं चला है: हम ठेठ स्वायत्त यूआई तत्वों को बनाने के बारे में बात कर रहे हैं। मान लें कि आपकी परियोजना तिथि पिकर का उपयोग करती है, इसे बनाने के लिए आप जीआईटीई प्लगइन का उपयोग करते हैं जो आपको गीथब के विशाल विस्तार में मिलता है। इस अंतिम के साथ, सब कुछ ठीक है सिवाय इसके कि आपको अपने पृष्ठ पर संबंधित इनपुट दिखाई देने पर हर बार इसे मैन्युअल रूप से खींचने की आवश्यकता होती है, और फिर आगे के संघर्षों से बचने के लिए इसके द्वारा बनाए गए मार्कअप को साफ करना भी संभव है। नतीजतन, आपको बहुत अधिक दोहराव वाला कोड लिखना होगा। यह वह जगह है जहाँ Backbone.Component काम में आता है।

के उपयोग

Backbone.Component के पीछे का विचार Ember.js में वेब घटकों और घटकों के समान है । प्रत्येक घटक अपने स्वयं के मार्कअप और तर्क के साथ एक अलग यूआई तत्व है।

घटक घोषणा

अपना खुद का घटक बनाने के लिए, आपको बैकबोन से विरासत में मिली एक कक्षा घोषित करने की आवश्यकता है। इसमें तीन तरीके और ओवरराइड करें:

Backbone.Components.MyDate = Bakcbone.Component.extend( { generate: function( ) { ... }, activate: function( ) { ... }, deactivate: function( ) { ... } } ); 

क्रम में:

• जनरेट मार्कअप बनाने की एक विधि है। यह आपके लिए आवश्यक किसी भी पैरामीटर को प्राप्त कर सकता है और एक स्ट्रिंग (उत्पन्न HTML) को वापस करना चाहिए।
• सक्रियण - घटक सक्रियण कोड। विधि पैरामीटर प्राप्त नहीं करती है और मान नहीं लौटाती है। हमारे तारीख के उदाहरण में, यह कुछ इस तरह दिख सकता है:

    activate: function( ) { this.$( "input" ).datepicker( ); } 

• यदि आवश्यक हो, तो निष्क्रिय करें - घटक निष्क्रियकरण कोड। इसके अलावा पैरामीटर प्राप्त नहीं करता है और मान नहीं लौटाता है।

टेम्प्लेट में उपयोग करें

वह सब है। अब आपके टेम्प्लेट में, आप घटक को प्रस्तुत करने के लिए निम्नलिखित सिंटैक्स का उपयोग कर सकते हैं:

 <%= this.insertMyDate( ) %> 

यह मानता है कि यह टेम्प्लेट के अंदर किसी व्यू ऑब्जेक्ट को इंगित करता है। BackMone.Component initialization (अधिक जानकारी के लिए, दस्तावेज़ीकरण देखें) के समय InsertMyDate पद्धति को स्वचालित रूप से व्यू क्लास में जोड़ा गया था, ऐसे घटक प्रत्येक घटक के लिए बनाए जाते हैं जिन्हें आपने घोषित किया था। सम्मिलित करने के लिए दिए गए सभी पैरामीटर ... विधि को संबंधित घटक की जनरेट विधि में परिवर्तन के बिना पुनर्निर्देशित किया जाता है।
जैसे ही पृष्ठ पर प्रस्तुत घटक दिखाई देता है, सक्रिय विधि को इसके लिए कहा जाता है, जब यह पृष्ठ से गायब हो जाता है - निष्क्रिय करें। अब आप अपनी तारीख के पिकर का उपयोग प्रोजेक्ट में कहीं भी इसके इनिशियलाइज़ेशन और डी-इनिशियलाइज़ेशन की चिंता किए बिना कर सकते हैं: आपको बस इसे टेम्पलेट में ड्रा करना होगा।

प्रतिपादन के बिना उपयोग करें

शायद आपके द्वारा उपयोग किए जाने वाले घटकों में निश्चित मार्कअप नहीं है जो टेम्पलेट में खींचे जा सकते हैं। उदाहरण के लिए, आपके पास एक कस्टम स्क्रॉलबार है जिसे .my-स्क्रॉलबार वर्ग के साथ सभी तत्वों पर लागू करने की आवश्यकता है। इस स्थिति में, आपको उत्पन्न विधि के बिना MyScrollbar घटक का एक वर्ग बनाने की आवश्यकता है, और आपके दृश्य ऑब्जेक्ट के अंदर (उदाहरण के लिए, प्रारंभिक विधि उपयुक्त है) निम्न कॉल करें:

 this.observeMyScrollbar( ".my-scrollbar" ); 

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

स्थापना, प्रलेखन, निर्भरता

गितुब पर परियोजना भंडार:
https://github.com/malroc/backbone-component
वहां आप अधिक विस्तृत दस्तावेज पा सकते हैं।
Backbone.Component, Bbone_component नाम के तहत Bower में उपलब्ध है। यदि आप Bower का उपयोग करते हैं, तो आप बैश कंसोल से Backbone.Component इंस्टॉल कर सकते हैं:

 bower install backbone_component 

या अपनी परियोजना निर्भरता में backbone_component लिखकर।
प्लगइन के लिए केवल दो बाहरी निर्भरताएं हैं: वास्तव में बैकबोन और अंडरस्कोर (बाद वाला खुद बैकबोन के लिए एक कठिन निर्भरता है)। jQuery / Zepto / आप किसी और चीज का उपयोग नहीं कर सकते, लेकिन बैकबोन के साथ, DOM के साथ काम करने के लिए कुछ सुविधाजनक तरीके खो सकते हैं (प्रलेखन देखें)।
इसके अलावा, Backbone.Component MutationObserver का उपयोग करके बनाया गया है। यदि आप उन ब्राउज़रों का समर्थन करने की योजना बनाते हैं, जिनमें इसे लागू नहीं किया गया है (और फिलहाल यह 11 से नीचे के सभी IE संस्करण हैं), तो आपको एक पॉलीफ़ाइल ( उदाहरण के लिए ) का उपयोग करना होगा।

प्रतिक्रिया

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