【D8教學】Drupal8超新手入門開發系列-Drupal behaviors

前言

傳統的網頁開發同常會將jQuery寫在$(document).ready()的function內，確保頁面全部載入後才開始執行JS。 但在Drupal開發上，部分頁面若使用到AJAX，依照傳統方式載入jQuery將會失效，為此本次將介紹Drupal開發上防止AJAX影響jQuery的寫法-Drupal.behaviors。

Drupal.behaviors

Drupal Javascript API 介紹中有詳細介紹，一般jQuery的標準寫法如下：

$(document).ready(function () {
  // Do some fancy stuff.
});

倘若我們在使用到AJAX的頁面使用上述寫法，將導致jQuery失效，因此Drupal提供了一種解決辦法，寫法如下：

Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
    // Using once() to apply the myCustomBehaviour effect when you want to run just one function.
    $('input.myCustomBehavior', context).once('myCustomBehavior').addClass('processed');

    // Using once() with more complexity.
    $('input.myCustom', context).once('mySecondBehavior').each(function () {
      if ($(this).visible()) {
        $(this).css('background', 'green');
      }
      else {
        $(this).css('background', 'yellow').show();
      }
    });
  }
};

需要先定義自己的Drupal.behaviors.myBehavior，myBehavior為自定義變數，將自己的程式碼放在attach:function()內即可。 這樣就能解決AJAX導致jQuery失效的問題。

Drupal.behaviors once()

解決了AJAX導致jQuery失效的問題後會發現，在這種寫法下JS會重複執行許多次導致功能異常，為此若該程式只需執行一次，需使用once()，範例如下：

Drupal.behaviors.myBehavior = {
  attach: function (context, settings) {
    // Using once() to apply the myCustomBehaviour effect when you want to run just one function.
    let myNumber = $('.views-view-field-block-1').find('.phone-wrapper');
    $(myNumber, context).once('myBehavior').addClass('processed');
    });
  }
};

若發現自己的程式重複執行就要記得加上once()。

結語

Drupal的開發團隊真的是設想周到，提供如此方便的function使用，希望這篇文章能給初入Drupal開發的工程師們一點幫助，切記在Drupal開發JS要考慮到AJAX的影響以及程式重複執行的問題。