十月 15, 2019 | 前端與Vue

【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提供了一種解決辦法,寫法如下:

前言

傳統的網頁開發同常會將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的影響以及程式重複執行的問題。