कॉर्नरजेएस, या एंगुलरजेएस जैसे निर्देश, केवल बेहतर

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

कामकाजी परियोजनाओं में, यह कुछ नीचे आ सकता है

function pageChange(){ if ($('.element-carousel').length>0) {$('.element-carousel').initCarousel()} if ($('.element-scrollbox').length>0) {$('.element-scrollbox').initScrollbox()} … 

या इसे कम नहीं किया जा सकता है, और प्रत्येक सशर्त नियंत्रक (एक विशिष्ट पृष्ठ को बदलने के लिए कॉलबैक) में हम कुछ तत्वों से जुड़े कोड को कहते हैं।

क्या वह परिचित है? मुझे ऐसा लगता है। क्या आपको यह दृष्टिकोण गलत लगता है? यदि पहला उत्तर हाँ है, तो मुझे यकीन है कि दूसरा भी हाँ है।

जानना चाहते हैं कि आप इसे सही तरीके से, बड़े करीने से और खूबसूरती से कैसे कर सकते हैं?

दिशा निर्देशों

AngularJS के पास, जैसा कि वे लिखते हैं, एक अनूठी विशेषता है - निर्देश। लेकिन अब वह वास्तव में अद्वितीय नहीं है।
उनके बारे में एक अच्छा लेख पहले से ही हब पर था
मैं लेख की संपूर्ण सामग्री को फिर से नहीं लिखूंगा, मैं केवल एक वाक्यांश दोहराऊंगा:

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

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

यह कैसे काम करता है?

म्यूटेशनऑब्जर्वर पर कार्यान्वयन कार्य करता है (जो उन लोगों के लिए नहीं है, जो डोम ब्राउजर को बदलने के लिए देशी ब्राउज़र ईवेंट हैं) म्यूटेशन इवेंट्स (DOMSubtreeModified और इसी तरह) पर काम कर रहे पॉलीफिल के साथ। Polyfill वास्तव में केवल IE के लिए आवश्यक है, क्योंकि अन्य सभी डेस्कटॉप ब्राउज़र पहले से ही देशी MutationObserver का समर्थन करते हैं।
दुर्भाग्य से, पॉलीफ़िल के साथ भी, देशी ब्राउज़र एंड्रॉइड 2.3 का समर्थन नहीं किया गया है, जो वास्तव में दुखी है, लेकिन 4.0 में सभी परीक्षण सख्ती से गुजरते हैं।
सैद्धांतिक रूप से, "मैनुअल" - कॉल के साथ, यदि आवश्यक हो, तो निर्देशन को अद्यतन करने के लिए जांचना - निर्देशों का समर्थन IE6 से शुरू होने वाले लगभग किसी भी मोबाइल और डेस्कटॉप ब्राउज़र में संभव है।

शुरुआत

सिंटैक्स को मूल रूप से परिभाषित किया गया था:

 directive('name', function(node){ alert("i'm alive!") }) 

पहले तो इसे लक्ष्य तत्व बनाना चाहिए था, लेकिन बड़ी संख्या में कॉलबैक (इससे पहले var _this = यह हर बार लिखा जाना था) के कारण, इसे पहले तर्क में रखने का निर्णय लिया गया था।
इसके अलावा, सिंटैक्स को दूसरे विकल्प में विस्तारित किया गया था:

 directive('name', { load: function(node){}, unload: function(node){} }) 

लोड घटना एक निर्देश (एक तत्व नहीं) की उपस्थिति के साथ जुड़ा हुआ है, उतराई इसके हटाने से मेल खाती है।
निर्देश के आगमन के साथ ठीक क्यों? क्योंकि उन्हें या तो शुरू में पंजीकृत किया जा सकता है, या किसी तत्व के साथ काम करने की प्रक्रिया में जोड़ा या हटाया जा सकता है। एक सरल उदाहरण - यह निर्देश कहा जाएगा यदि तत्व से बदलता है

 <div class="container something"> 

पर

 <div class="container test something"> 

यह उपयोगी है

इसलिए कॉलबैक एक दूसरे के लिए मानों को पारित कर सकते हैं - उन्हें यह एक सामान्य मिला। इसलिए ऐसा करना संभव है:

 directive('name', { load: function(){ this.interval = setInterval(function(){}, 1000) }, unload: function(){ clearInterval(this.interval) } }) 

कुछ मामलों में, सामग्री के साथ बातचीत के लिए बाहरी तरीके बनाना सुविधाजनक है: उदाहरण के लिए, संक्रमण की संभावना के साथ एक प्रस्तुति। इसके लिए, स्कोप स्वयं उपलब्ध है - यह नोड की विशेषताओं में से एक है - इसलिए, परीक्षण निर्देश के लिए, यह नोड है।
परिणामस्वरूप, निर्देश के लिए सार्वजनिक तरीके बनाना सरल और सुविधाजनक हो जाता है:

 directive('name', function(){ this.publicMethod = function(a){alert(a)} }) 

HTML सिंटैक्स

कक्षाओं, विशेषताओं और टैग को निर्देश के लिए लक्ष्य के रूप में सेट किया गया था, और शुरुआत से ही यह अनुमान लगाया गया था कि उपसर्ग 'डेटा -' होना चाहिए था (वास्तव में, विन्यासकर्ता दूसरे उपसर्ग के लिए चूक करता है - 'निर्देश'! ') यह निर्देशों की पठनीयता के लिए किया जाता है। कक्षाएं: div class = "निर्देश-स्क्रॉलबॉक्स" div class = "स्क्रॉलबॉक्स") की तुलना में बहुत स्पष्ट है।
तदनुसार, इस तरह के निर्देश को निम्नलिखित परिदृश्यों में निष्पादित किया जाएगा:

 <div class="name"/> <div class="data-name"/> <div name/> <div data-name="john"/> <name/> <data-name first-name="john" last-name="doe"> 

विशेषताओं के साथ काम करें

विशेषताओं से डेटा स्थानांतरित करने का निर्णय खुद से अनुरोध किया गया था। विशेषताओं में निर्देशों के लिए, एक स्क्रिप्ट विशेषता मानों को प्रेषित करने के लिए पारित की गई थी, निर्देश-टैग के लिए - सभी विशेषताओं से एक ऑब्जेक्ट बनता है। परिणामस्वरूप, ऊपर दिए गए उदाहरणों में, पहले मामले में, 'जॉन' पारित किया जाएगा, दूसरे में - {'प्रथम-नाम': 'जॉन', 'अंतिम-नाम': 'डो'}।
अधिक "स्मार्ट" डेटा ट्रांसफर के लिए, "शॉर्ट" ऑब्जेक्ट सिंटैक्स के लिए समर्थन दिखाई दिया है: आप नाम लिख सकते हैं = "पहला: 'जॉन', jast: 'doe'"। वास्तव में, ऐसा कुछ अंदर होता है

 try {value = eval( '{' + value + '}' )} try {value = eval( value )} return value 

विशेषताएँ बदल सकती हैं, और उन्हें बदलने के लिए एक अलग कॉलबैक है:

 directive('name', { alter: function(){} } 

कुछ मामलों में - उदाहरण के लिए, जैसे एक निर्देश

 directive('include', function(node, path){ $.get(path, function(data){node.innerHTML = data}) }) 

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

नतीजतन, हमें एक उपकरण मिला जो हमें तत्व-विशिष्ट चीजों से पूरी तरह से सार करने की अनुमति देता है जिन्हें हमें चलाने की आवश्यकता है।

उदाहरण

कुछ परियोजनाओं में पहले से उपयोग किए जाने वाले बड़े निर्देशों में से, सबसे सुखद में से एक स्क्रॉलबॉक्स है , किसी भी तत्व के लिए एक स्वचालित "आवरण" जो तत्व पर एक कस्टम स्क्रॉल लटकाता है।

JsFiddle उदाहरण

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

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

जो लोग अपनी परियोजनाओं में कोनेजेएस की कोशिश करना चाहते हैं, उनके लिए - यहाँ पर न्यूनतम और नियमित संस्करण हैं:
कॉर्नरजेएस रिपोजिटरी ऑन जीथब