Il arrive souvent d'écrire du JavaScript dans le cadre du développement des modules ou thèmes Drupal personnalisés, dans cet article nous allons voir les bonnes pratiques à adopter afin d'avoir un code JavaScript propre et bien interprété coté Drupal et coté navigateur.
\nNous avons pris l'habitude de grouper le code jQuery dans la méthode ready() comme dans cet exemple :
$(document).ready(function () {\n // jQuery code here\n});L'utilisation de cette méthode nous garantie que le code ne va pas être exécuté qu'après le chargement complet du Document Object Model (DOM), en outre cela nous permet de placer notre code jQuery n'importe où dans la page.\nDrupal s'est inspiré de cette méthode pour fournir une solution plus efficace qui est bien les Drupal behaviors (comportements), le principe est le même qu'avec le document.ready sauf qu'ici il est géré par Drupal une fois que le DOM est chargé complètement.\nN'importe quel site développé avec Drupal contient l'objet global Drupal qui comporte plusieurs objets, un parmi eux et qui nous intéresse dans cet article est bien l'objet Drupal.behaviours qui contient le code JavaScript qu'on souhaite exécuter une fois que le DOM sera chargé complétement.
Exemple d'un Behavior Drupal :
\n(function ($, Drupal) {\n Drupal.behaviors.CustomBehavior = {\n attach: function (context, settings) {\n // jQuery code here.\n });\n }\n };\n})(jQuery, Drupal);Le système de behaviors est très utile lorsqu'il s'agit d'une modification du DOM via des appels Ajax sans chargement de page, entre autre après l'ajout de nouveaux éléments dans le DOM, Drupal invoque Drupal.behaviors afin d'être attachés aux éléments ajoutés, de même ce systéme de Behaviors nous fournit un objet context qui contient la partie du DOM qui vient d'être ajoutée que ce soit via appel Ajax ou autres méthodes.
\nConsidérons le code suivant :
\n(function ($, Drupal) {\n Drupal.behaviors.uniqueKey = {\n attach:function () {\n // Search the DOM for an element with class .behavior_example and logs it in the console.\n $(\".behavior_example\").once(\"unique-key\").each(function () {\n console.log($(this));\n });\n }\n };\n}(jQuery, Drupal));Je tiens à préciser qu'il faudra ajouter \"core/jquery.once\" comme dépendance à la librairie du module afin de pouvoir l'utiliser.
\nLa problématique dans cet exemple c'est qu'à chaque ajout d'un nouvel élément dans le DOM, ce dernier va être complétement analysé pour chercher l'élément avec la classe behavior_example ce qui entraînera une perte en performance.
C'est ici que context peut entrer en action pour mettre fin à cette problématique et donner un code plus efficient :
(function ($, Drupal) {\n Drupal.behaviors.uniqueKey = {\n attach:function (context) {\n // This example solves the problem by searching only in the context which contains only the part that is being added to the DOM.\n $(context).find(\".behavior_example\").once(\"unique-key\").each(function () {\n console.log($(this));\n });\n }\n };\n}(jQuery, Drupal));\n","excerpt":"Il arrive souvent d'écrire du JavaScript dans le cadre du développement des modules ou thèmes Drupal personnalisés, dans cet article nous allons voir les bonnes…","frontmatter":{"date":"2020-02-23","metaDate":"2020-02-23","title":"Drupal Behaviors","tags":["jQuery","JavaScript","Module development","Performance","Ajax"],"path":"/drupal-behaviors","cover":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAPABQDASIAAhEBAxEB/8QAGAAAAwEBAAAAAAAAAAAAAAAAAAIDAQX/xAAXAQADAQAAAAAAAAAAAAAAAAAAAQME/9oADAMBAAIQAxAAAAHm1k2uamA//8QAGBAAAwEBAAAAAAAAAAAAAAAAAAEREBL/2gAIAQEAAQUCHlR0VH//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/AT//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/AT//xAAWEAADAAAAAAAAAAAAAAAAAAAAICH/2gAIAQEABj8CIv8A/8QAGhABAAMAAwAAAAAAAAAAAAAAAQARIRAxYf/aAAgBAQABPyE7yITFFS/YQRVLwf/aAAwDAQACAAMAAAAQfN//xAAWEQADAAAAAAAAAAAAAAAAAAABEBH/2gAIAQMBAT8QhX//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAcEAEAAgEFAAAAAAAAAAAAAAABABExIXGBkfH/2gAIAQEAAT8QtohAsYy27wbldy5d08yhCBgBiXrP/9k=","aspectRatio":1.3337311058074781,"src":"/static/796626dc39bbb34b7c94b598456e29a3/88110/coding.jpg","srcSet":"/static/796626dc39bbb34b7c94b598456e29a3/0b320/coding.jpg 480w,\n/static/796626dc39bbb34b7c94b598456e29a3/60b32/coding.jpg 960w,\n/static/796626dc39bbb34b7c94b598456e29a3/88110/coding.jpg 1920w,\n/static/796626dc39bbb34b7c94b598456e29a3/40175/coding.jpg 2880w,\n/static/796626dc39bbb34b7c94b598456e29a3/a0c5f/coding.jpg 3353w","srcWebp":"/static/796626dc39bbb34b7c94b598456e29a3/d1a9d/coding.webp","srcSetWebp":"/static/796626dc39bbb34b7c94b598456e29a3/bc3bf/coding.webp 480w,\n/static/796626dc39bbb34b7c94b598456e29a3/39337/coding.webp 960w,\n/static/796626dc39bbb34b7c94b598456e29a3/d1a9d/coding.webp 1920w,\n/static/796626dc39bbb34b7c94b598456e29a3/fcbe1/coding.webp 2880w,\n/static/796626dc39bbb34b7c94b598456e29a3/07784/coding.webp 3353w","sizes":"(max-width: 1920px) 100vw, 1920px"},"resize":{"src":"/static/796626dc39bbb34b7c94b598456e29a3/c4f3a/coding.jpg"}}}}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"pathSlug":"/drupal-behaviors","locale":"fr","prev":{"fields":{"locale":"fr"},"frontmatter":{"path":"/cache-api","title":"Cache API","tags":["Cache","Performance","Module development","Drupal 8"]}},"next":{"fields":{"locale":"fr"},"frontmatter":{"path":"/getting-ready-for-drupal9","title":"Se préparer à Drupal 9","tags":["Drupal 8","Drupal 9","Performance","Update"]}}}}}Après le chargement de page,
\ncontextcontient le DOM tout entier et après des appels Ajax,contextprend la partie du DOM qui vient d'être chargée et ajoutée.