6.8. Drupal में JavaScript/jQuery के साथ काम करना। Behaviors क्या हैं?

शुरू करने के लिए, आइए देखें कि अपनी थीम में कस्टम JavaScript फ़ाइलें कैसे जोड़ी जाती हैं। इसके लिए आपको .libraries.yml फ़ाइल में js को शामिल करना होगा:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
  dependencies:
    - core/jquery
    - core/jquery.once

यह ध्यान रखना महत्वपूर्ण है कि इंडेंटेशन दो स्पेस में होना चाहिए। यहाँ हमने js/custom.js फ़ाइल को शामिल किया है। लेकिन यह jQuery के काम करने के लिए पर्याप्त नहीं है। दरअसल, Drupal core डिफ़ॉल्ट रूप से jQuery को आवश्यक नहीं मानता और इसे शामिल नहीं करता। इसे आपको अलग से शामिल करना होगा:

dependencies:
  - core/jquery

हम jQuery.once() का भी उपयोग करेंगे — यह jQuery के लिए एक अलग प्लगइन है, जो किसी सेलेक्टर पर इवेंट्स और मेथड्स को केवल एक बार जोड़ने की अनुमति देता है।

dependencies:
  - core/jquery
  - core/jquery.once

ऐसा इसलिए है क्योंकि हम ऐसा JavaScript कोड लिखेंगे जो Drupal द्वारा कई बार (विभिन्न इवेंट्स पर) कॉल किया जाएगा। इसलिए हमें .once() मेथड की आवश्यकता होगी।

अब custom.js फ़ाइल में कुछ कोड जोड़ते हैं:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      $(context).find('.click-me').once('myCustomBehavior').click(function () {
        alert('Hello, World!');
      });
    }
  };
})(jQuery);

इसे चरणबद्ध तरीके से समझते हैं:

(function ($) {
 
})(jQuery);

हम jQuery को इस संरचना में लपेटते हैं क्योंकि Drupal में jQuery .noConflict() मोड में चलता है। यह इसलिए आवश्यक है ताकि हम डॉलर ($) साइन का उपयोग कर सकें और यह Prototype या MooTools जैसे अन्य JavaScript फ़्रेमवर्क्स से संघर्ष (conflict) न करे। आज के समय में ये फ्रेमवर्क बहुत कम उपयोग होते हैं, लेकिन फिर भी Drupal में jQuery को इस संरचना में रखना अनिवार्य है।

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
 
    }
  };
})(jQuery);

अब हम Behavior पर आते हैं। जब आप Drupal में jQuery कोड लिखते हैं, तो आपको इसे पहले function ($) में और फिर behavior में लपेटना चाहिए। Behavior का नाम यूनिक (अद्वितीय) होना चाहिए — हमारे उदाहरण में यह myModuleBehavior है, लेकिन आपको हर behavior के लिए अलग नाम देना होगा:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
 
    }
  };
 
  Drupal.behaviors.productPageBehavior = {
    attach: function (context, settings) {
 
    }
  };
})(jQuery);

Behavior के नामकरण के लिए camelCase का उपयोग करें। Behavior पेज लोड होने पर और हर AJAX अनुरोध पर कॉल किया जाता है। इसका मतलब है कि जब भी नया कंटेंट साइट पर लोड होकर मौजूदा पेज संरचना में शामिल होता है, Behavior का कोड हर बार फिर से चलता है। यह इस कोड से काफी अलग है:

$(document).ready(function () {
  // कुछ कार्य करें।
  // Drupal में इस तरह का कोड उपयोग न करें।
});

क्योंकि ऊपर वाला कोड केवल एक बार — पेज लोड पर — ही चलता है।

यदि आप Behavior का उपयोग कर रहे हैं और देखते हैं कि साइट पर अजीब इवेंट्स हो रहे हैं — जैसे jQuery के माध्यम से कोई ब्लॉक कई बार जुड़ रहा है — तो इसका कारण यह है कि Behavior कई बार कॉल हो रहा है:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior पेज पर कई बार कॉल होता है, .once() फ़ंक्शन का उपयोग करना न भूलें।
      $('.inner').append('<p>Test</p>');
    }
  };
})(jQuery);

प्रत्येक AJAX अनुरोध पर एक और "Test" पैराग्राफ जुड़ जाएगा। इसलिए आपको .once() फ़ंक्शन जोड़ने की आवश्यकता है:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior पेज पर कई बार कॉल होता है, .once() फ़ंक्शन का उपयोग करना न भूलें।
      $('.inner').once('add-paragraph').append('<p>Test</p>');
    }
  };
})(jQuery);

Behavior की एक और विशेषता है context वेरिएबल। हर बार जब नया कंटेंट साइट पर जोड़ा जाता है — चाहे पेज लोड पर हो या AJAX के माध्यम से — वह सारा नया कंटेंट context वेरिएबल में होता है। इसलिए, हमें हर AJAX अनुरोध के बाद पूरे DOM को फिर से स्कैन करने की आवश्यकता नहीं है। बस context का उपयोग करें:

(function ($) {
  Drupal.behaviors.myModuleBehavior = {
    attach: function (context, settings) {
      // Behavior पेज पर कई बार कॉल होता है, .once() फ़ंक्शन का उपयोग करना न भूलें।
      $(context).find('.inner').once('add-paragraph').append('<p>Test</p>');
    }
  };
})(jQuery);

अब यह पैराग्राफ Drupal शैली में सही लिखा गया है। बेशक, आप पुराना तरीका document.ready() का उपयोग कर सकते हैं, लेकिन तब यह केवल एक बार ही काम करेगा और Behavior की तुलना में धीमा चलेगा।

यदि आपके पास jQuery/JavaScript से संबंधित प्रश्न हैं या किसी अतिरिक्त विषय के लिए सुझाव हैं, तो टिप्पणियों में लिखें।