Drupal 7 के लिए फ्रंट-एंड डेवलपर्स के लिए JS स्क्रिप्ट लिखने के लिए एक गाइड

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

JQuery के चर नाम

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

$(function () { $('div.menu-expanded').hide(); $(....); }); 

द्रुपाल से कनेक्ट करते समय इसे काम करने के लिए, आपको इसे इस तरह से फिर से व्यवस्थित करने की आवश्यकता है:

 (function ($) { $(function () { $('div.menu-expanded').hide(); $(...); }); }) (jQuery); 

इस प्रकार, सभी कोड अपरिवर्तित लपेटकर, मानक गुंजाइश आवंटन तंत्र का उपयोग करके, jQuery वस्तु $ के नाम से उपलब्ध हो गई।
भविष्य में समस्याओं से बचने और सुधारों के साथ उनकी लिपियों पर न चढ़ने के लिए अपने टाइपसेट्टर को तुरंत ऐसी तकनीक की व्याख्या करना बेहतर है।

Drupal.behaviors

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

 $(function (){ $('a.tooltip').someTooltipPlugin(); }); 

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

 (function ($) { Drupal.behaviors.yourName = { attach : function(context, settings) { // Your code here. } }; })(jQuery); 

इस तरह, हमने अपना व्यवहार निर्दिष्ट किया - बस Drupal.behaviors ऑब्जेक्ट में एक नई प्रॉपर्टी जोड़ी। इसका लाभ यह है कि पूरे पृष्ठ को लोड करने के दौरान कॉल के अलावा, ड्रुपल सभी व्यवहारों को कॉल करेगा, उदाहरण के लिए, जब एक अजाक्स अनुरोध प्राप्त होता है (यदि यह एक मानक अनुरोध है, उदाहरण के लिए, प्रपत्र या दृश्य को अपडेट करना)।
सभी व्यवहारों को इस तरह मैन्युअल रूप से कहा जा सकता है:

 Drupal.attachBehaviors(document, {}); 

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

 $('a...', context).someTooltipPlugin(); 

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

jQuery.once

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

 $('a.tooltip:not(.processed)', context).addClass('processed').someTooltipPlugin(); 

व्यवहार के अंदर यह डिजाइन सुनिश्चित करता है कि जब कोड को फिर से निष्पादित किया जाता है, तो हैंडलर को एक बार जोड़ा जाता है।
एक ही तंत्र jQuery.once प्लगइन में शामिल है, जो D7 कोर में शामिल है और किसी भी पृष्ठ पर डिफ़ॉल्ट रूप से उपलब्ध है।
प्लगइन का उपयोग करना, ऊपर के निर्माण को इस तरह बदला जा सकता है:

 $(context).once('myIdentifier', function () { // Your code here. }); 

जहाँ myIdentifier कोई विशिष्ट मूल्य है जो उस संसाधित वर्ग के रूप में उपयोग किया जाएगा।
एक छोटे डिजाइन के साथ बदला जा सकता है:

 $(context).once(function () { // Your code here. }); 

इस मामले में, प्लगइन अपने आप में एक अनूठी कक्षा बनाएगा।

बेस url

एक काफी सामान्य गलती - वे आधार यूआरएल को ध्यान में रखना भूल जाते हैं। मैं उसे सिद्ध मॉड्यूल में एक से अधिक बार मिला।
इसे पहचानना आसान है - पथ की शुरुआत में एक स्लैश:
var url = '/ ajax / my-मॉड्यूल / कुछ-एक्शन';
वे आम तौर पर एक ही वातावरण में विकसित होते हैं, और बस स्लैश को हार्डकोड करते हैं, और जब बेस यूआरएल बदल जाता है, तो कुछ स्क्रिप्ट काम करना बंद कर देती हैं ... ज्यादातर, जब अजाक्स अनुरोधों के लिए पथ बनाते हैं और जब और एएमजी टैग की विशेषताओं के लिए पथ सेट करते हैं तो एक त्रुटि उत्पन्न होती है।
विशेष चर का उपयोग करना सही होगा, जो कर्नेल द्वारा घोषित किया गया है:

 var url = Drupal.settings.basePath + 'ajax/my-module/some-action'; 

अजाक्स अनुरोध पथ

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

लाइन आउटपुट

जेएस में पाठ प्रदर्शित करते समय कई कार्य किए जाने चाहिए।
मैं केवल मुख्य लोगों को सूचीबद्ध करूँगा, बिना गहन किए - वे PHP कर्नेल फ़ंक्शन के सभी एनालॉग हैं:

 //   . Drupal.t('text'); //  ""  . Drupal.checkPlain(name); //   ,    /  . Drupal.formatPlural(count, singular, plural, args, options); 

वे सभी drupal.js में घोषित किए जाते हैं, क्रमशः इसके बिना काम नहीं करेंगे।