चैनवास: एक सुरुचिपूर्ण और लघु बैसाखी जो किसी भी एपीआई के लिए विधि जंजीर को जोड़ती है

2006 के बाद से jQuery लाइब्रेरी के लिए धन्यवाद, (जो कि लगभग पांच साल पुराना है) किसी को यह समझाने की ज़रूरत नहीं है कि विधि की रूपरेखा क्या है : यह वही प्रोग्रामिंग तकनीक है जिसमें किसी ऑब्जेक्ट के तरीकों को चेन में एक के बाद एक कहा जा सकता है, जैसे कि jQuery में।

इस तकनीक का मुख्य लाभ प्रोग्रामर के प्रयासों में ध्यान देने योग्य बचत है। इसके साथ, प्रोग्रामर को ऑब्जेक्ट का नाम इस तरह से बार-बार लिखना नहीं पड़ता है:

obj.(); obj.(); obj.(); 

इसके बजाय, प्रोग्रामर जंजीर तरीके से सभी तरीकों को कॉल कर सकता है - एक लाइन पर:

 obj.().().(); 

यदि उसे ऐसा लगता है कि इस प्रकार की रिकॉर्डिंग पिछले एक की तुलना में किसी व्यक्ति द्वारा कम पठनीय है (विशेषकर जब विधियों में पैरामीटर, कभी-कभी काफी व्यापक होते हैं), तो प्रोग्रामर नई लाइन से विधियों के नाम लिख सकता है (यह जावास्क्रिप्ट की अनुमति देता है), लेकिन फिर भी नाम पर सहेजें वस्तु:

 obj .(1, 2, …) .(1, 2, …) .(1, 2, …); 

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

जहां तक ​​मुझे पता है, अंग्रेजी वाक्यांश "मेथड चैनिंग" के समान रूसी स्थापित नहीं है। शायद, हम "श्रृंखला" के बारे में बात कर सकते हैं या, सरलता के लिए, विधि कॉल के "श्रृंखला" रूप के बारे में बात कर सकते हैं।

चेन कॉल की सुविधा नशे की लत है। खैर, सच्चाई यह है: यह jQuery पर कुछ हफ़्ते या दो सप्ताह का कार्यक्रम करने के लिए पर्याप्त है - और साधारण APIs एक श्रृंखला कॉल की अपनी प्रतिबाधा-अक्षमता के साथ नाराज़गी, यहां तक ​​कि क्रोध करना शुरू करते हैं। यह jQuery में (। रंग: 'लाल', 'लाइन-ऊंचाई': 1}) जैसे किसी विधि को पारित किए गए ऑब्जेक्ट के रूप में उनके गुणों को सेट करने की क्षमता का भी अभाव है।

उदाहरण के लिए, यदि आप चेन (<कैनवास>) चेन कॉल को इस तरीके से आकर्षित कर सकते हैं तो यह कितना असामान्य रूप से सुविधाजनक होगा:

 ctx.beginPath() .prop({ lineWidth: 2, strokeStyle: '#333' }).moveTo(0,0) .bezierCurveTo(50,50, 80,80, 100,100) .stroke().closePath(); 

और बस इस तरह के चेन कॉल के लिए एक उपकरण के बारे में आया है - ली वेरो के लिए धन्यवाद। यहाँ यह है:



चैनवास पुस्तकालय का वजन केवल ≈1⅓ किलोबाइट होता है, एक मिनिफायर के साथ प्रसंस्करण के बाद, और इस बीच, इसके तरीकों का उपयोग करके, आप किसी भी वस्तु के सभी (या केवल कुछ) तरीकों के आसपास एक आवरण प्रदान कर सकते हैं, उन्हें एक चेन कॉल प्रदान कर सकते हैं। तैयार अतिरिक्त मॉड्यूल के एक जोड़े को भी इसके साथ जोड़ा जाता है, जिनमें से एक (348 बाइट्स की मात्रा के साथ) एपीआई डोम के चारों ओर एक आवरण को परिभाषित करता है, और दूसरा (406 बाइट की मात्रा के साथ) टॉवर्स के एक रैपर (<कैनवास>) को परिभाषित करता है ।

डोम रैपिंग आपको निम्नलिखित की तरह चेन कॉल करने की अनुमति देता है:

 //   DOM (  ): document.body.appendChild( document.createElement('a') .prop({ 'href': 'http://leaverou.me', 'innerHTML': 'Lea Verou', 'title': 'Visit this awesome blog!', 'onclick': function(evt){ alert('gotcha!'); } }) .setAttribute('data-unicorns', '42') .addEventListener('mouseover', function(){ alert('don't do this'); }, false) ); //   CSSOM (  ): var css = document.body.style.prop({ color: '#245', fontFamily: 'Georgia, serif', textDecoration: 'underline' }).removeProperty('text-decoration').cssText; //    classList: element.classList .add('foo') .add('bar') .toggle('baz'); 

यह अच्छा लग रहा है - लेकिन, निश्चित रूप से, jQuery के साथ, किसी को भी यह सब चाहिए। मैं उदाहरण के लिए , केवल $ ('<a />') के बजाय document.createElement ('a') से परेशान नहीं होऊंगा।

लेकिन कैनवास के लिए आवरण (<कैनवास>) एक पूरी तरह से अलग मामला है। यह न केवल कैनवास विधियों को एक चेन कॉल प्रदान करता है (जिसका एक उदाहरण मैंने चेनवासा का उल्लेख करने से पहले दिया था), जो कि jQuery में नहीं है, लेकिन ड्राइंग हलकों और राउंडरेक्ट (x ) के लिए दो उपयोगी सहायक विधियों: सर्कल (x, y, त्रिज्या) को परिभाषित करता है । गोल आयतों को खींचने के लिए y, चौड़ाई, ऊंचाई, त्रिज्या) । (यहां मैं आउटलाइन की रूपरेखा की परिभाषा "ड्राइंग" कहता हूं, जिसके बाद स्ट्रोक () या भरण () के लिए एक अतिरिक्त कॉल वास्तविक प्रदर्शन के लिए आवश्यक होगा।)

मीठी, मीठी वाक्यगत शक्कर।

इसलिए, यह आश्चर्य की बात नहीं है कि लेखक ने खुद को पुस्तकालय "चैनवास" कहा है।