十月 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的影響以及程式重複執行的問題。